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

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

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

js

    handleSave(){
        this.isDisabled = true
        // 保存数据
    }
阅读 1.2k
评论 2019-06-26 提问
    3 个回答

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

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

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

    评论 赞赏 2019-06-27
      ntnyq
      • 1.2k

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

      评论 赞赏 2019-06-27
        Messi10God
        • 3
        • 新人请关照

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

        评论 赞赏 2019-06-27
          撰写回答

          登录后参与交流、获取后续更新提醒