vue:element-ui輸入框綁定回車事件

參考：

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