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

12 篇文章 0 订阅
10 篇文章 0 订阅

由于element-ui把input进行了封装,input外面是多一层div的。
在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>
  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值