vue 给el-button添加加载效果

需求：给子组件对话框“确定”按钮添加加载效果：

（1）给按钮绑定：

:loading="ConfirmLoading"

（2）在data中初始化 ConfirmLoading：

data() {
    return {
      ConfirmLoading: false
    }
  }

（3）提交表单时设置：

this.ConfirmLoading = true

（4）对话框绑定closed事件，关闭对话框，关闭加载效果：

<el-dialog class="uiot-dialog"
             width="400px"
             @closed="closed">
</el-dialog>

（5）定义closed事件，关闭对话框，关闭加载效果：

closed() {
      this.ConfirmLoading = false
}

点击“确定”之后，会产生加载效果，效果如下：

完整代码如下：

<template>
  <el-dialog class="uiot-dialog"
             width="400px"
             destroy-on-close="true"
             :visible.sync="isShow"
             :before-close="beforeClose"
             :close-on-click-modal="false"
             :title="dialogType==='edit'?$t('sysManage.role.editTitle'):$t('sysManage.role.newTitle')"
             @open="open"
             @closed="closed">
    <el-form class="uiot-dialog-form"
             size="mini"
             label-width="80px"
             label-position="right"
             :model="formData"
             :ref="FormName"
             :rules="rules">
      <el-form-item prop="name"
                    :label="$t('sysManage.role.table.name')+':'">
        <el-input v-model="formData.name"
                  :placeholder="$t('sysManage.role.nameInput')" />
      </el-form-item>
      <el-form-item :label="$t('sysManage.role.table.desc')+':'">
        <el-input v-model="formData.desc"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  :placeholder="$t('sysManage.role.roleDesc')" />
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="uiot-dialog-footer">
      <el-button @click="cancel"
                 class="cancel"
                 size="mini">{{ $t('common.cancel') }}</el-button>
      <el-button @click="confirm"
                 :loading="ConfirmLoading"
                 class="confirm"
                 size="mini"
                 type="primary">{{ $t('common.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
const defaultData = {
  name: '',
  desc: ''
}

export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'new'
    },
    oneRow: {
      type: Object,
      default: function() {
        return defaultData
      }
    }
  },
  data() {
    return {
      FormName: 'roleForm',
      ConfirmLoading: false,
      rules: {
        name: [
          {
            required: true,
            message: this.$t('sysManage.role.formErr.name'),
            trigger: 'blur'
          }
        ]
      },
      formData: {}
    }
  },
  methods: {
    open() {
      this.formData = Object.assign({}, this.oneRow)
    },
    cancel() {
      this.$emit('cancel')
      this.clean()
    },
    closed() {
      this.ConfirmLoading = false
    },
    confirm() {
      this.$refs[this.FormName].validate(valid => {
        if (valid) {
          this.ConfirmLoading = true
          this.$emit('confirm', Object.assign({}, this.formData))
          this.clean()
        } else {
          return false
        }
      })
    },
    beforeClose() {
      this.cancel()
    },
    clean() {
      this.$refs[this.FormName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>