vue 点击按钮防止按钮再次点击,按钮出现加载中和不可再次点击手势,达到动态更改disabled属性效果
button中的disabled属性只能通过js来动态修改,在vue中不能根据绑定数据模型来动态改变button的disabled属性,但能根据绑定数据模型动态改变button的类名达到这一效果。HTML代码:<el-form><el-button type="primary" @click.stop="handleLogin()" :loading="loading" :cla
·
button中的disabled属性只能通过js来动态修改,在vue中不能根据绑定数据模型来动态改变button的disabled属性,但能根据绑定数据模型动态改变button的类名达到这一效果。
HTML代码:
<el-form>
<el-button type="primary" @click.stop="handleLogin()" :loading="loading" :class="{disabled: loading}">登录</el-button>
</el-form>
JS代码:
export default {
data(){
rerutn {
loading: false
}
},
methods: {
handleLogin() {
// 防止接口再次调用
if (this.loading) {
return false;
}
this.loading = true;
// 调用接口,接口完成后,把loading值改为false
this.loading = false;
}
}
}
CSS代码:
尽量放在resize.css中,可能会有多个页面需要这种样式。
.disabled{
cursor: no-drop!important;
}
.el-button{
// 覆盖elementUI中的 .loading 样式
pointer-events: auto!important;
}
更多推荐
已为社区贡献1条内容
所有评论(0)