

<template>
    <el-dialog :append-to-body="isAppendBody" :title="title" :close-on-press-escape="escape" :close-on-click-modal="isModel" :visible.sync="dialogVisible" :width="width" :before-close="cancel">
        <slot></slot>
        <span v-if="!!footer" slot="footer" class="dialog-footer">
          <el-button @click="cancel">{{footer.cancel ? footer.cancel : "取 消"}}</el-button>
          <el-button type="primary" @click="confirm">{{footer.confirm ? footer.confirm : "确 定"}}</el-button>
        </span>
    </el-dialog>
</template>
<script>
    export default {
        /**
         * props //#endregion
         * @param width  宽度，选填。默认40%，非必填
         * @param dialogVisible  dialog是否显示，必填，默认false
         * @param footer   dialog的下级footer的文案{cancel:'',confirm: ''}默认undefind，非必填
         * @param isModel  model层点击隐藏dialog，非必填，默认true
         * @param escape  键盘点击esc隐藏dialog,非必填，默认true
         * @param title  表头文案，默认‘必填’
         * @param isAppendBody 是否嵌入到body
         * 
         * @event cancel 取消事件，父组件必填
         * @event confirm 确定事件，非必填
         */
        name: "ownDialog",
        props: {
            width: {
                type: String,
                default: "40%"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
            footer: {
                type: [Object, undefined],
                default: undefined
            },
            isModel: {
                type: Boolean,
                default: true
            },
            escape: {
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: "提示"
            },
            isAppendBody: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {}
        },
        created() {},
        mounted() {
        },
        methods: {
            cancel() {
                this.$emit("cancel")
            },
            confirm() {
                this.$emit("confirm")
            }
        }
    }
</script>
<style lang="scss" scoped>
</style>
