### 实现 Vue 中 `<el-form-item>` 输入框的回车登录功能 在 Vue 和 Element UI 的组合中，可以通过绑定 `@keyup.enter` 事件以及阻止表单默认提交行为来实现输入框中的回车触发登录逻辑的功能。以下是完整的解决方案： #### HTML 结构与事件处理 通过设置 `@submit.native.prevent` 来防止浏览器默认的表单提交行为[^1]。同时，在输入框上绑定 `@keyup.enter` 事件以捕获用户的键盘操作并执行特定函数。 ```vue <template> <div class="login-container"> <el-form @submit.native.prevent> <el-form-item label="用户名"> <el-input v-model="username" placeholder="请输入用户名" /> </el-form-item> <el-form-item label="密码"> <el-input v-model="password" type="password" placeholder="请输入密码" @keyup.enter="handleLogin" /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { handleLogin() { if (!this.username || !this.password) { this.$message.error('用户名和密码不能为空'); return; } console.log(`正在尝试登录... 用户名: ${this.username}, 密码: ${this.password}`); // 可在此处调用 API 进行实际登录请求 } } }; </script> <style scoped> .login-container { max-width: 400px; margin: auto; } </style> ``` #### 关键点解析 1. **阻止默认提交行为** 使用 `@submit.native.prevent` 防止表单因按下回车而自动提交刷新页面的行为[^1]。 2. **绑定回车事件** 在密码输入框中绑定 `@keyup.enter` 事件，当用户按下回车键时会触发指定的方法 `handleLogin()`[^1]。 3. **验证数据有效性** 登录前需检查字段是否为空，并提供友好的提示消息。这里使用了 Element UI 提供的消息提示组件 `$message.error`。 4. **样式优化** 添加简单的 CSS 样式使界面更加美观整洁。 --- ###