Element 對話框簡單使用

官方文檔介紹的是頁內對話框，但沒有基於組件的對話框，這里記錄一下，原理就是父子傳值是否顯示

父頁導入組件

<template>
    <div class="home">
        <el-button @click="btnAdd">添加用戶</el-button>
        <Dialog :visible.sync="visible" title="添加用戶"></Dialog>
    </div>
</template>

<script>
    import Dialog from "../components/dialog";

    export default {
        name: 'Home',
        components: {
            Dialog
        },
        data() {
            return {
                visible: false
            }
        },
        methods: {
            btnAdd() {
                this.visible = true
            }
        }
    }
</script>

對話框

<template>
    <div>
        <el-dialog
                v-bind="$attrs"
                v-on="$listeners"
                @open="onOpen"
                @close="onClose"
                :title="title"
                對話框打開后是否可以點擊后邊灰色區域關閉對話框
                :close-on-click-modal='false'>
            <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-col :span="23">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="formData.userName" placeholder="請輸入姓名" :maxlength="50" clearable
                                      prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="性別" prop="sex">
                            <el-radio-group v-model="formData.sex" size="medium">
                                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                          :disabled="item.disabled">{{item.label}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="生日" prop="birthday">
                            <el-date-picker v-model="formData.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                            :style="{width: '100%'}" placeholder="請選擇生日" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="handelConfirm">確定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        inheritAttrs: false,
        props: {
            title: String
        },
        data() {
            return {
                formData: {
                    userName: undefined,
                    sex: 3,
                    birthday: null,
                },
                rules: {
                    userName: [{
                        required: true,
                        message: '請輸入姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性別不能為空',
                        trigger: 'change'
                    }],
                    birthday: [{
                        required: true,
                        message: '請選擇生日',
                        trigger: 'change'
                    }],
                },
                sexOptions: [{
                    "label": "男",
                    "value": 1
                }, {
                    "label": "女",
                    "value": 2
                }, {
                    "label": "保密",
                    "value": 3
                }],
            }
        },
        methods: {
            onOpen() {
                //打開對話框執行
            },
            onClose() {
                //關閉對話框執行清除以上字段內容
                this.$refs['elForm'].resetFields()
            },
            close() {
                //手工調用關閉，顯示狀態為隱藏
                this.$emit('update:visible', false)
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        //點擊確定后執行驗證並執行方法,執行完畢后調用close()方法
                        this.$message.success({
                            message: "成功了"
                        })
                        this.close()
                    }
                })
            }
        }
    }

</script>

執行效果