admin-sjzx/src/components/formContainer/index.vue

<template>
    <el-dialog v-if="isModal" size="50%" v-model="visibles" @cancel="cancel" v-bind="$attrs" :append-to-body="true">
        <template v-for="slotKey in slotKeys" #[slotKey]>
            <slot :name="slotKey" />
        </template>
    </el-dialog>
    <el-drawer v-else size="50%"  v-model="visibles" v-bind="$attrs"  :append-to-body="true" :footer-style="{ textAlign: 'right' }">
        <template v-for="slotKey in slotKeys" #[slotKey]>
            <slot :name="slotKey" />
        </template>
    </el-drawer>
</template>

<script>
import { mapState } from 'pinia'
// import { globalStore } from '@/stores/indexs'

const FormContainerTypeEnum = {
    DRAWER: 'drawer',
    MODAL: 'modal'
}
export default {
    inheritAttrs: false,
    props: {
        visible: {
            type: Boolean,
            default: false,
            required: true
        }
    },
    computed: {
        // ...mapState(globalStore, ['formStyle']),
        slotKeys() {
            return Object.keys(this.$slots)
        },
        isModal() {
            return FormContainerTypeEnum.MODAL === this.formStyle
        }
    },
    data() {
        return {
            visibles: ''
        }
    },
    methods: {
        cancel() {
            this.$emit('close')
        }
    },
    mounted() {
        this.visibles = this.visible
    }
}
</script>