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

发布于 2022-09-11 20:43:22 字数 319 浏览 18 评论 0

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

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

js

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

若言繁花未落 2022-09-18 20:43:23

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

梦在夏天 2022-09-18 20:43:23

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

桃酥萝莉 2022-09-18 20:43:22

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

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文