vue element-ui el-input输入框绑定@keyup.enter回车事件无效

746 阅读1分钟

element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 所以对于el-input,使用 @keyup.enter是无效的,需要加上.native限制符 .native修饰符的作用: 当想要在一个组件的根元素上直接监听一个原生事件,这时,就可以使用 v-on 的 .native 修饰符。

<el-input
    v-model="serverTimer"
    @blur="addTimer"
    @keyup.enter.native="addTimer"
    placeholder="新增时间服务器"
></el-input>

或者原生input标签


<input
	v-model="serverTimer"
    @blur="addTimer"
    @keyup.enter="addTimer"
    placeholder="新增时间服务器"
></input>