关于element-ui中input框的禁止复制粘贴

需求

之前因为有用户喜欢在网站刷评论，而且还是没意义的长评，所以就想了个法子，不让复制粘贴了，然后记录一下。

代码

<el-input
	 v-cp-loading="loading"
	 type="textarea"
	 rows="5"
	 resize="none"
	 placeholder="请输入内容"
	 v-model="commentForm.content"
	 maxlength="3000"
	 @paste.native.capture.prevent="handleFalse"
	 @copy.native.capture.prevent="handleFalse"
	 @cut.native.capture.prevent="handleFalse"
	 show-word-limit
	 ></el-input>
<script>
	methods: {
		return false;
	}
</script>

首先要说一下，方法可以直接在input组件里面写，上面是vue2的写法，涉及到粘贴复制和剪切三种事件。

说一下vue2的设计思路：组件是由外层和内层组成的，根据浏览器的事件传递机制（先捕获，后冒泡）：粘贴的时候会先执行绑定在外层的div上的paste事件捕获方法，然后再到内层的input，因此可以在组件上捕获监听paste事件，并阻止向下传播即可。

事件修饰符说明：

native，表明这个是dom的原生事件，如果不加native，vue会认为paste是一个自定义事件，必须要在组件内手动触发，那么在粘贴的时候自然就不会触发了。

Capture，表明这个方法在捕获阶段执行，默认为冒泡执行，参考addEventListener方法中的useCapture参数。

Prevent，相当于event.preventDefault阻止默认行为，同时也会阻止事件的向下传递和向上冒泡。

但是上述的只是vue2的写法，在vue3中被抛弃了，如果你要这样写的话，可能会出现下划红线，并且报出这样的提示：

'.native' modifier on 'v-on' directive is deprecated.不赞成使用“v-on”指令上的“.nature”修饰符。

所以在vue3中可以这样写：

<el-input
	v-cp-loading="loading"
	type="textarea"
	rows="5"
	resize="none"
	placeholder="请输入内容"
	v-model="commentForm.content"
	maxlength="3000"
	@paste.prevent="handleFalse"
	show-word-limit
	></el-input>
<script>
	methods: {
		return false;
	}
</script>

这样就无法复制粘贴和剪切了。