VUE：防止按钮重复点击触发接口

Posted 2022-12-02 长不大的大灰狼

VUE：防止按钮重复点击触发接口

在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)
      );
    ,

参考文章：
Vue中防止按钮重复点击提交的方法