阻止element组件中的的粘贴功能（转）

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

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

代码实现:

<!-- handlePaste方法能够随意写 -->
<el-input v-model="input" 
  placeholder="请输入内容" 
  @paste.native.capture.prevent="handlePaste">
</el-input>

 

事件修饰符说明:

• native: 代表这个是dom的原生事件,若是不加native, vue会认为paste是一个自定义事件,必需要在组件内手动触发, 那么在粘贴的时候天然就不会触发了
• capture: 代表这个方法在捕获阶段执行,默认为冒泡执行,参考addEventListener方法中的useCapture参数
• prevent: 至关于event.preventDefault阻止默认行为, 同时也会阻止事件的向下传递和向上冒泡

转载于：https://www.jianshu.com/p/4d9d83fed298；

https://www.jianshu.com/p/4d9d83fed298