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

弹窗组件效果

 ComModelR.vue组件

<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()
}