Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 2000)

接着在el-button中添加v-preventReClick，就可实现效果，在点击之后按钮变为禁用状态，持续禁用两秒,两秒之后便可再一次提交

	// 添加新属性
	<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>
二、自定义局部指令
在export default {} 中写入下面这段代码，进行局部注册指令
	// 防止el-button重复点击
	directives: {
 	 preventReClick: {
   	 // 指令的定义
    	inserted(el, binding) {
     	 el.addEventListener('click', () => {
      	  if (!el.disabled) {
       	   el.disabled = true
       	   setTimeout(() => {
       	     el.disabled = false
       	   }, binding.value || 2000)
接着也是在el-button中添加v-preventReClick，就可实现效果
   // 添加新属性
   <el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>
三、动态控制disabled属性
在el-button中添加disabled属性，进行动态控制
   // 添加属性
   <el-button type="primary" @click="handleSave" :disabled="disabled">保存</el-button>
在需要调用的事件中，控制按钮启用禁用，实现的效果是在点击按钮后禁用两秒，两秒之后，按钮恢复启用状态
    // 调用事件动态控制disabled属性
    handleSave() {
      this.disabled = true;
      let params = {
        data: this.data,
      this.$requestFn("POST", this.$url.export.test, params)
      .then((res) => {
        this.$toast.success("保存成功");
      .finally(() => {
        setTimeout(() => {
	    	this.disabled = false;
        }, 2000)
以上是三种不同的方法，都能实现防止按钮重复点击导致提交多次的问题。