vue @click 多次触发解决

场景：

提示：同事写了个普通的点击事件：

例如：@click="xxx" xxx是点击事件要执行的 结果每次点击就会触发两次

解决方案1：

提示：e.preventDefault：

例如：

@click="xxx($event)"

xxx(e){

e.preventDefault();

}

当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法

解决方案2：disabled

提示：设置不可见执行成功之后再放开：

 html：

<el-button type="primary" :disabled="disabled"  :size="GLOBAL.topButtonSize" @click="saveArea"
          ><i class="iconfont icon_save"></i><font>保存</font>
          </el-button>

 js：

//保存信息
		saveArea(){
			this.isLoading=true;
			this.disabled =true
			  saveUserAareWithFlag({"userAreaList":userAreaList,userId:this.userInfo.userId,flag:this.flag}).then((res)=>{
			    if (res.data.code == 0) {
			      this.$notify({
			        title: '成功',
			        message: '保存成功',
			        type: 'success'
			      });
				  this.isLoading=false;
				  this.disabled =false
			      this.$emit('setNodeClick');
			      this.$emit('closeEditBox');
			    } else {
					this.isLoading=false;
					this.disabled =false
			      this.$notify({
			        title: '失败',
			        message: res.data.message,
			        type: 'error'
			      })
			    }
			  })
		},

export default {
  install(Vue) {
    // 防止重复点击
    Vue.directive('preventReClick', {
      inserted(el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 1000)
          }
        })
      }
    })
  }
}
// 防抖
export const Debounce = (fn, t) => {
  let delay = t || 500;
  let timer;
  console.log(fn)
  console.log(typeof fn)
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, delay);
  }
};


// 节流
export const Throttle = (fn, t) => {
  let last;
  let timer;
  let interval = t || 500;
  return function () {
    let args = arguments;
    let now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(this, args);
      }, interval);
    } else {
      last = now;
      fn.apply(this, args);
    }
  }
};

当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法。另外也可以在点击时起一个变量 用来锁定 当你需要再次操作时在放开例如方案2里js部分。