vue 点击按钮防止按钮再次点击，按钮出现加载中和不可再次点击手势，达到动态更改disabled属性效果

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