vue禁止用户在输入框或文本域中复制粘贴剪切

需求: 阻止element组件中的复制粘贴功能

实现思路: 组件是由外层

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

代码实现:

<el-input
          v-model="answer"
          @paste.native.capture.prevent="handleFalse"
          @copy.native.capture.prevent="handleFalse"
          @cut.native.capture.prevent="handleFalse"
          @keyup.native="compute"
          :autosize="{ minRows: 4, maxRows: 100 }"
          placeholder="请在此输入上面一段文字，测试打字"
          type="textarea"
          ref="input"
        ></el-input>
    
       //方法
 		handleFalse() {
 			//终止
    		return false;
 	 	}
 	 	
 	 	compute() {
 	 	// to do something
 	 	}

事件修饰符说明:

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