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

最新推荐文章于 2023-12-22 16:16:58 发布

转载最新推荐文章于 2023-12-22 16:16:58 发布 · 655 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jin-zhe/p/10060511.html

文章标签：

#javascript #ViewUI

本文介绍如何在Element UI的<el-input>组件中阻止粘贴操作，通过使用Vue事件修饰符native、capture和prevent，实现在粘贴时执行自定义事件处理函数，有效避免数据意外粘贴。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

代码实现:

<template>
  <section class="p-10">
    <div class="app">
      <el-input v-model="val" placeholder="请输入内容" @paste.native.capture.prevent="handlePaste"/>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        val: ''
      };
    }
  };
</script>

事件修饰符说明:

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