yelaixiang/src/components/ZModalView/index.vue

<template>
    <component 
		:is="cname"
		v-bind="nestedProps"
	>
		<!-- <slot></slot>
        <template v-slot:footer>
            <slot name="footer"></slot>
        </template> -->
        <template v-for="(_, slotName) in $slots" :slot="slotName">
			<slot :name="slotName"></slot>
		</template>
	</component>
</template>

<script>
export default {
    name: "",
    props: {
        width: {
            type: [String, Number],
		    default: '70%'
        },
        // 组件名ElDialog或ElDrawer
        cname: {
            type: String,
            default: 'ElDrawer'
        },
        // 组件的props
        viewProps: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            title: '',
            visible: false
        }
    },
    computed: {
        nestedProps() {
            switch(this.cname) {
                case 'ElDialog':
                    return {
                        width: this.width,
                        title: this.title,
                        beforeClose: (done) => this.onClose(done),
                        visible: this.visible,
                        destroyOnClose: true,
                        closeOnClickModal: true,
                        ...this.viewProps
                    }
                default:
                    return {
                        size: this.width,
                        title: this.title,
                        beforeClose: (done) => this.onClose(done),
                        visible: this.visible,
                        appendToBody: true,
                        destroyOnClose: true,
                        closeOnClickModal: true,
                        ...this.viewProps
                    }
            }
        },
    },
    methods: {
        onClose(done)  {
            this.$emit('onClose');
            this.close();
            done();
        },
        open(t) {
            if (t) this.title = t;
            this.visible = true;
        },
        // 关闭弹窗
        close() {
            this.visible = false;
        },
    }
};
</script>

<style lang="scss" scoped>

</style>