vue3后台管理系统封装的弹窗组件

弹窗组件效果

 ComModelR.vue组件

<template>
    <div>
        <a-modal v-model:visible="visible" :title="title" @ok="handleOk" :bodyStyle="bodyStyle" :width="width" :maskClosable="false"
            :destroyOnClose="true" :footer="null" @cancel="handleCancel" :wrapClassName='wrapClassName'>
            <template #closeIcon> <span style="border:1px solid #d9d9d9;font-size: 12px;padding:1px 5px;width: 79px;display: inline-block;height: 26px;line-height: 23px;">
                    <!-- 返回上级 -->
                    {
   
   { props.buttntitle }}
                </span></template>
            <slot></slot>
        </a-modal>
    </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount } from 'vue';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
const props = defineProps({
    span: {
        type: Number,
        default: 8
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: Number,
        default: 800
    },
    wrapClassName: {
        type: String,
        default: ''
    },
    formList: {
        type: Array,
        default: () => ([]),
    },
    rulesRef: {
        type: Function,
        default: () => [],
    },
    bodyStyle: {
        type: Object,
        default: null
    },
    formItemLayout: {
        type: Object,
        default:
        {
            labelCol: { xs: { span: 24 }, sm: { span: 9 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 15 } }
        }
    },
    buttntitle: {
        type: String,
        default: '返回'
    },

})
const bodyStyle = {
    background: '#f0f2f5',
    padding: '10px 10px 1px',
    minHeight: `431px`
}
const { formItemLayout } = props
const visible = ref(false);
// const formRef = ref();
let formState = ref({});
const showModal = (param, param2) => {
    visible.value = param;

    formState.value = param2 ? param2 : {}
    // console.log(param, '5555555dddddddddd')
};
const emits = defineEmits(['addoredittable','handleCancelModal'])
const handleOk = (values) => {
    // values = { ...values, ...formState.value }
    // visible.value = false;
    // switch (props.title) {
    //     case '修改':
    //         formRef.value.resetFields()
    //         emits('addoredittable', 'edit', values)
    //         break;
    //     case '添加':
    //         // props.addapi('dddd')
    //         emits('addoredittable', 'add', values)
    //         formRef.value.resetFields()
    // }
};

const handleCancel = () => {
    visible.value = false;
    // formRef.value.resetFields()
    emits("handleCancelModal");
};


defineExpose({
    showModal, handleOk, handleCancel, formState
});


</script>

使用：

<ComModelR ref="modalRef" :title="modalTitle" :width="1200">
                <div class="modalBox">
                    <SearchItem :searchitemList="SearchitemList" @handleSearch="handleSearchModal"></SearchItem>
                    <ComtableListR ref="tableModalRef" :hasImport="false" :hasExport="false"
                        :dividerbutton="modalDividerbutton" :operatingButton="modalOperatingButton" @getData="getModalData"
                        :columns="modalColumns" :loading="modalLoading" />
                </div>
            </ComModelR>

其中两个组件前面文章都提到了。

//点击事件，弹窗出现
const openModal = (param, param2) => {
    MonitorItemId.value = param
    modalTitle.value = param2.title
    modalRef.value.showModal(true)
    getModalData()
}