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

参考：

https://segmentfault.com/q/1010000011347642

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"。

巴特西

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

最新文章

热门文章