广西和住房城乡建设厅网站,如何在手机上开发软件,义乌网图科技有限公司怎么样,网站的术语一、BUG场景
ruoyi平台#xff0c;页面弹出窗有提交按钮#xff0c;在提交时连续多次点击会发生重复提交。
二、错误方案
给按钮增加 :loadingsubmitLoading 属性。
el-dialog :titletitle :v-ifopen :visible.syncopen页面弹出窗有提交按钮在提交时连续多次点击会发生重复提交。
二、错误方案
给按钮增加 :loadingsubmitLoading 属性。
el-dialog :titletitle :v-ifopen :visible.syncopen closecancel el-button typeprimary :loadingsubmitLoading clicksubmitForm提交/el-button
/el-dialogdata() {return{open: false,submitLoading: false,}
},methods: {cancel() {this.open false;this.submitLoading false;},/** 提交按钮 */submitForm() {......this.submitLoading true;this.api.add(formData).then(response {.....this.cancel();});}
}
验证后发现并没有解决重复提交问题。
查询资料发现el-dialog的关闭不是瞬间发生是关闭动画是动画真是活久见了。侧面证明自己菜。
三、正确方案
给按钮增加 :loadingsubmitLoading||!open 属性。
上面代码中只需要修改loading这一处就行了。
el-dialog :titletitle :v-ifopen :visible.syncopen closecancel el-button typeprimary :loadingsubmitLoading||!open clicksubmitForm提交/el-button
/el-dialogdata() {return{open: false,submitLoading: false,}
},methods: {cancel() {this.open false;this.submitLoading false;},/** 提交按钮 */submitForm() {......this.submitLoading true;this.api.add(formData).then(response {.....this.cancel();});}
}
按钮逻辑
行为按钮submitLoading弹窗open按钮状态打开弹窗前falsefalse禁用打开弹窗后falsetrue可用数据请求前truetrue禁用请求结束关闭弹窗falsefalse禁用
