做审批流的时候,遇到一个前端可以添加审批步骤的功能,在按钮上连续点击两次会发生添加两个相同步骤的情况,
试过用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);
}