vue el-dialog 对话框的实现

今天在项目中用到了Element UI的组件：Dialog 对话框，所以就总结一下~

布局是酱紫的：

<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
        <el-form :model="oneRole" label-width="80px" label-position="left">
            <el-form-item label="Name">
                <el-input v-model="oneRole.name" placeholder="Please Input Role Name" />
            </el-form-item>
            <el-form-item label="Desc">
                <el-input v-model="oneRole.desc" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please Input Role Description"/>
                </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{ $t('permission.cancel') }}</el-button>
           <el-button type="primary" @click="confirmRoleHandle">{{ $t('permission.confirm') }}</el-button>
        </span>
</el-dialog>

页面两个按钮“新增”和“编辑”都会打开这个对话框，所以 :title=“dialogType===‘edit’?‘Edit Role’:‘New Role’” 用来判断是新增还是编辑，从而改变对话框的标题。

visible 表示是否显示 Dialog，支持 .sync 修饰符。

所以，打开对话框：

this.dialogVisible = true

关闭对话框：

this.dialogVisible = false

点击“新增”或“修改”按钮触发事件：

export default{
    data() {
     return {                     
         dialogType: 'new',
         dialogVisible: false
     }
 }
methods: {
     // 新增
     addRoleHandle() {
         this.dialogType = 'new'
         this.dialogVisible = true
     },
     // 修改
     editRoleHandle(scope) {
         this.dialogType = 'edit'
         this.dialogVisible = true
     }
 }

点击“新增”时：

点击“修改”时：