dialog.vue
<template>
    <el-dialog
        class="com_dialog"
        :visible.sync="visible"
        v-bind="$attrs"
        :close-on-click-modal="closeOnClickModal"
        :close-on-press-escape="closeOnPressEscape"
        @open="open"
        @opened="opened"
        @close="Cancel"
        @closed="closed"
    >
        <slot></slot>

        <span v-if="!$slots.footer" slot="footer" class="dialog-footer" v-show="footShow">
            <el-button @click="Cancel" v-if="cancelShow">{{ cancelText }}</el-button>
            <el-button type="primary" @click="Submit" v-if="submitShow">{{ submitText }}</el-button>
        </span>

        <div v-else class="com_footer" v-show="footShow">
            <slot name="footer" />
        </div>
    </el-dialog>
</template>
<script>
export default {
    inheritAttrs: true,
    props: {
        footShow: {
            type: Boolean,
            default: true
        },
        cancelShow: {
            type: Boolean,
            default: true
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        submitShow: {
            type: Boolean,
            default: true
        },
        submitText: {
            type: String,
            default: '確定'
        },
        closeOnClickModal: {
            type: Boolean,
            default: false
        },
        closeOnPressEscape: {
            type: Boolean,
            default: false
        },
        show: {
            type: Boolean,
            default: false
        },
    },
    computed: {
        visible: {
            get() {
                return this.show;
            },
            set(val) {
                this.$emit("update:show", val);
            }
        }
    },
    methods: {
        Cancel() {
            this.$emit("Cancel");
        },
        Submit() {
            this.$emit("Submit");
        },
        closed() {
            this.$emit("closed");
        },
        open() {
            this.$emit("open");
        },
        opened() {
            this.$emit("opened");
        },
    }
};
</script>
 

<template>
    <div class="test">
        <el-button @click="handleClick" type="danger">點選顯示</el-button>
        <!-- 自定義footer,無須繫結submitPopupData方法 -->
        <Dialog
            title="規則克隆"
            :show.sync="visible"
            v-if="visible"
            :before-close="handleClose"
            width="60%"
            @Cancel="resetCopyPopup"
            @Submit="zz"
        >
            <div>內容</div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="visible = false">儲存</el-button>
            </span>-->
        </Dialog>
    </div>
</template>

<script>
import Dialog from './dialog.vue'
export default {
    components: {
        Dialog
    },
    data() {
        return {
            visible: true
        };
    },
    methods: {
        zz() { },
        resetCopyPopup() {
            // 可在此做一些重置操作，如清除表單資料以及關閉彈框等
            // this.visible = false;
        },
        handleClick() {
            this.visible = true;
        },
        handleClose(done) {
            this.$confirm('確認關閉？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }

    }
}
</script>

<style lang="scss" >
.dialog-footer {
    padding: 10 px 20 px 20 px;
    text-align: right;
    box-sizing: border-box;
}
</style>