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;
}

 

Logo

前往低代码交流专区

更多推荐