博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
阻止element组件中的<el-input/>的粘贴功能
阅读量:5013 次
发布时间:2019-06-12

本文共 564 字,大约阅读时间需要 1 分钟。

需求: 阻止element组件中的<el-input/>的粘贴功能

      实现思路: <el-input/>组件是由外层<div>和内层的<input>组成的, 根据浏览器的事件传递机制(先捕获,后冒泡): 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可

代码实现:

 

 

事件修饰符说明:

  • native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了
  • capture: 表明这个方法在捕获阶段执行,默认为冒泡执行,参考addEventListener方法中的useCapture参数
  • prevent: 相当于event.preventDefault阻止默认行为, 同时也会阻止事件的向下传递和向上冒泡
 
嗯,就酱~~
链接:https://www.jianshu.com/p/4d9d83fed298

转载于:https://www.cnblogs.com/jin-zhe/p/10060511.html

你可能感兴趣的文章
regsvr32注册COM组件失败
查看>>
jmeter,CSV数据加载、数据库连接、正则
查看>>
(独孤九剑)--正则表达式
查看>>
MySQL学习点滴 --分区表
查看>>
4.6.1 测试基础
查看>>
洛谷 P2486 [SDOI2011]染色
查看>>
oo第三单元总结
查看>>
leetcode : Count and Say [基本功]
查看>>
洛谷 P2485 [SDOI2011]计算器 解题报告
查看>>
c#访问存储过程
查看>>
Slickflow.NET 开源工作流引擎基础介绍(三) -- 基于HTML5/Bootstrap的Web流程设计器
查看>>
Node教程
查看>>
java将字段映射成另一个字段,关于 接口传参 字段不对应转换
查看>>
Redis
查看>>
字段和属性的区别
查看>>
HTTP(一)工作机制
查看>>
条形码扫描枪数据读取的问题
查看>>
$this->autoRender = false
查看>>
健壮的 Java 基准测试
查看>>
phpstorm查看类的继承关系
查看>>