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>