vue 按钮防止重复点击的方法


做审批流的时候,遇到一个前端可以添加审批步骤的功能,在按钮上连续点击两次会发生添加两个相同步骤的情况,
试过用element的Loading 与 disabled 都不行,遂从网上找解决方案,发现有的需要在vue 添加公共方法绑定到按钮上,但我的项目可能用到的地方很少,所以在单个组件里面使用就可以了,
废话不多说,直接贴解决方案
还是使用disabled,之前不生效的原因是
我在方法头写了 disabled = ture 方法尾写了 disabled = false ,中间没有任何等待,所以,按钮还是可以直接点击两次。
加个settimeout方法即可

<el-button :disabled="stepLoading" type="primary" @click="addFlowNode()">确 定</el-button>
addFlowNode(){
      this.stepLoading = true;
      this.$message({
        message: '添加步骤成功',
        type: 'success',
      });
      this.dialogAddShenpi = false;
      setTimeout(() => {
        this.stepLoading = false;
      }, 1000);
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM