vue:element-ui输入框绑定回车事件

时间:2021-12-27 09:27:25

参考:

https://segmentfault.com/q/1010000011347642

https://weiku.co/article/297/

vue监听input输入框的回车事件:keyup事件,加enter修饰符。如果input是组件,加上.native修饰符。

例如:

@keyup.enter="方法名"

<div id="app">
<input placeholder="请输入账号" type="text">
<input placeholder="请输入密码" type="password" @keyup.enter="login">
<button @click="login">登录</button>
<div>
<script>
new Vue({
methods: {
login() {
console.log('哎呀,登录中...');
}
}
}).$mount('#app')
</script>

在element-ui中:el-input 绑定了 @keyup.enter.native 事件

@keyup.enter.native="方法名"
 
注意:
当一个 form 元素中只有一个输入框时,在该输入框中按下回车会提交该表单。如果希望阻止这一默认行为,可以在标签上添加 @submit.native.prevent
<el-form @submit.native.prevent>
.....
</el-form>

或者为表单元素增加属性 onSubmit="return false"