Skip to content

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

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

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