vue,elementUI按钮如何方式快速重复点击

Question

点击按钮保存数据，当点击后设置按钮的disabled,但是发现以极快的速度点击还是会请求两次。
请问是否有处理方案？

    <el-button
          @click="handleSave"
          :disabled="isDisabled"
          type="primary"
        >

js

    handleSave(){
        this.isDisabled = true
        // 保存数据
    }

Answer 1

老铁, 是什么让你对 DOM 的渲染速度那么自信, 就算是虚拟 DOM, vue 刷新页面不要时间的吗? 如果你页面比较复杂的情况下, 这种重复提交不是显而易见的吗...

handleSave(){
    var that = this;
    if(!this.isDisabled){
        this.isDisabled = true;//锁定
        this.saveData(()=>{//回调以避免同步
            that.isDisabled = false;//解除锁定
        });   
    }
}

我在工程中这样写, 是没毛病的.

Answer 2

函数去抖 一般项目别的地方也能用到 直接从lodash导入

Answer 3

饿了么的按钮有loading属性，为true它就是loading中不可点的状态了，你点击的时候赋值true，接口请求完赋值false就行了。我现在用着没问题