需求: 阻止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>