There seems to be no enter event among the officially exposed events, and then writing @keyup.enter directly on el-input failed to catch the event. I hope God can enlighten me~~
怪我咯2017-05-19 10:48:36
<el-input type="password" v-model="loginForm.password" placeholder="password" @keyup.enter.native="loginSubmit"></el-input>
@keyup.enter.native can be triggered
仅有的幸福2017-05-19 10:48:36
element-ui api indicates that there is no onkeyup event, so it is recommended to change input if you must use this event
PHPz2017-05-19 10:48:36
I agree with @CoquettishPoppy’s point of view. I suggest you create a native input with a similar style.
为情所困2017-05-19 10:48:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://cdn.bootcss.com/element-ui/1.2.7/theme-default/index.css" rel="stylesheet" />
</head>
<body>
<p id="app">
<el-input v-model="input" v-enter @enter.native="log" placeholder="请输入内容"></el-input>
</p>
<script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script>
<script src="http://cdn.bootcss.com/element-ui/1.2.7/index.js"></script>
<script>
Vue.directive('enter', {
bind: function (el, binding, vnode) {
const input = el.getElementsByTagName('input')[0];
input.addEventListener('keypress', function (e) {
var key = e.which || e.keyCode;
if (key === 13) { // 13 is enter
// code for enter
el.dispatchEvent(new Event('enter'))
}
})
},
unbind: function (el, binding, vnode) {
}
})
new Vue({
el: '#app',
data() {
return {
input: null
}
},
methods: {
log() {
console.log(this.input)
}
}
})
</script>
</body>
</html>