vue 解决点击按钮重复操作问题(以element-ui;el-button为例)
html代码如下:<el-buttonsize="small"type="success"@click="submitUpload":disabled="btnDisabled">上传到服务器</el-button>JS代码如下:<script>export default {data() {return {
·
html代码如下:
<el-button
size="small"
type="success"
@click="submitUpload"
:disabled="btnDisabled"
>上传到服务器</el-button>
JS代码如下:
<script>
export default {
data() {
return {
//初始值为false
btnDisabled: false,
};
},
methods: {
//点击事件
submitUpload1() {
this.btnDisabled = true;
//调用接口
接口名(参数).then((res) => {
//如果code码为200 接口连通
if (res.code == 200) {
//操作内容
} else if (res.code != 200) {
//接口不通。弹出错误提示
this.$message({
message: res.data.message,
type: "warning",
});
}
this.btnDisabled = false;
});
},
};
</script>
这样这个按钮就无法重复点击了,调用一次接口以后会被禁用掉,除非第二次正常操作
解决连续点击按钮重复操作的问题
更多推荐
已为社区贡献6条内容
所有评论(0)