由于element-ui把input进行了封装,input外面是多一层div的。
在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。
所以对于el-input,使用 @keyup.enter是无效的,需要加上.native
限制符
.native修饰符的作用:
当想要在一个组件的根元素上直接监听一个原生事件,这时,就可以使用 v-on 的 .native 修饰符。文章来源:https://www.toymoban.com/news/detail-594389.html
<el-input
v-model="serverTimer"
@blur="addTimer"
@keyup.enter.native="addTimer"
placeholder="新增时间服务器"
></el-input>
或者也可以直接原生input标签文章来源地址https://www.toymoban.com/news/detail-594389.html
<input
v-model="serverTimer"
@blur="addTimer"
@keyup.enter="addTimer"
placeholder="新增时间服务器"
></input>
到了这里,关于vue element-ui el-input输入框绑定@keyup.enter回车事件无效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!