解决使用elementUi的input组件时，vue案件修饰符不生效的问题

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量751 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oqqSan123456789000/article/details/124540734
版权 
 <el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>
  • 为什么这次绑定事件多一个.native修饰符，这个可能是因为element-ui封装了个div在input标签外面，把原来的事件隐藏了，所以如果不加.native的话，按键不会生效
  • 官方对.native修饰符的解释为：
    　　有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符
派蒙爱吃包菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-tags-input组件使用指南(推荐)
10-15
主要介绍了vue-tags-input组件使用指南,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once <div @click='doThis' style="widt
vue的监听键盘事件的快捷方法
weixin_33997389的博客
07-11 986
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符： <input v-on:keyup.13="submit"> 对于一些常用键，还提供了按键别名： <input @keyup.enter="submit"> <!-- 缩写形式 --> 全部的按键别名： ...
el-input 绑定按键修饰符
RightWaitHere的博客
07-10 419
在 element-ui 中，由于组件是封装好的，原生的绑定事件写法无法生效 <el-input @keyup.enter="XXX"></el-input> 需要搭配 .native 来进行绑定 <el-input @keyup.enter.native="XXX"></el-input>
el-input添加事件修饰符
imkaifan的博客
04-08 474
vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 现象： el-input采用如上两种写法时，是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
input 在vue中 双向绑定数据没有实时生效
KLW75
03-18 2067
在使用vue 的双向绑定数据到input 中 有可能会出现 绑定的数据变化了，但是页面中的数据没有变化。这个时候数据没有实时生效。 这个时候需要使用this.$set 的方式或绑定到data里边的一个字符串，就是在data中定义出这个字符串。 this.$set(target,key,value); 使用简介， this.$set(target,key,value); 解释一下各个参数。 target，要更改的数据源(对象啊数组啊); key：要更改的具体数据名称，数据源里面的哪个值。　
2.5.4版本以及之后el-input不支持修饰符
柑橘乌云_
12-30 214
【代码】2.5.4版本以及之后el-input不支持修饰符。
Vue表单修饰符.lazy对element的el-put不起作用
木木木华的博客
08-28 2878
Vue表单修饰符.lazy是懒加载的意思 都知道vue的v-model是双向绑定的，v-model数据加载和变化是同时的，但当用.lazy修饰的时候，数据变化不同步了，只有移除焦点后才会同步。 代码： 结果对比： 1.正常绑定，输入的同时显示： 2. 加上修饰符.lazy，输入的同时没有显示，移除焦点后显示 为什么表单修饰符.lazy对element的el-put不起作用呢？ 先看一下el-put的结构： 浏览器解析完，是用div包裹的结构，.lazy并没有绑定到in..
vue中的修饰符
田兴的博客
09-17 8457
一、事件修饰符 .stop 阻止事件继续传播 .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事
解决vue项目input输入框双向绑定数据不实时生效问题
10-15
主要介绍了解决vue项目input输入框双向绑定数据不实时生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue的router组件component在import时不能使用变量问题
10-15
主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
＜el-input /＞对v-model.trim 修饰符不能输入空格问题
jinfeng_yu的博客
04-11 1776
在element-ui的2.5.4及之前的版本是可以支持的，在后面的版本是不支持的，可以降低element-ui的版本来进行处理，或者用@blur="formData.name=$event.target.value.trim()来进行处理
el-input无法绑定键盘事件？浅析.native修饰符的作用与原理（绊脚石系列）
小安驾到的博客
09-21 1380
为什么el-input无法绑定键盘事件？为什么.native可以为组件标签绑定原生事件？
Vue项目里使用element ui || naive ui在input框上使用v-model.trim等修饰符失效
leyu_miss的博客
03-17 3598
//navite ui为例 <n-input v-model:value="query.keyword" @blur="query.keyword=$event.target.value.trim()" clearable type="text" placeholder="请输入名称" />
element组件库-el-switch组件 .stop修饰符不生效问题(阻止不了事件冒泡)
weixin_46391646的博客
05-10 2307
问题所在 点击第一个事件打开dialog，没问题，点击switch组件不希望打开dialog，但是现在点击switch组件也打开dialog了，肯定有问题，第一反应肯定是事件冒泡了，触发子的点击事件，事件向外冒泡，又触发了父的打开dalog的事件 给change加.stop修饰符 阻止时间冒泡 不生效 然后又换成click事件 还是不生效 其实el组件只提供了change事件 当时就想试试 还是不行 然后我把switch换成按钮 给按钮加了.stop修饰符 看看点击按钮会不会打开dialog .
Vue中键盘监听事件（解决element监听键盘不生效）
陈嗯嗯的博客
11-23 1642
Vue监听键盘，直接用@绑定就可以，而且Vue为几个常用的按键提供了别名，不用去查询按键的keyCode 全部的按键别名 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 一、input标签绑定esc键 中绑定事件 <input type="text" @keyup.esc="KeyUpE...
Vue-给element-ui的input输入框绑定键盘事件不生效
qq_45458749的博客
06-25 1577
因为直接 @事件 监听的是组件自定义事件 使用 .native 修饰符监听原生事件即可解决
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
el-input-number与el-input
11-08
el-input-number和el-input都是element-ui中的表单输入组件，但它们的使用场景和功能略有不同。el-input-number是一个数字输入框，可以设置最大值、最小值、步长等属性，适用于需要输入数字的场景。而el-input是一个文本输入框，可以设置输入框类型、最大长度、是否可清空等属性，适用于需要输入文本的场景。此外，el-input还可以设置前缀、后缀、图标等，增强了输入框的可定制性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值