参考文档Modal
比如Table的列表在打开一个弹窗的时候用方法useModal
import { useModal } from '@/components/Modal';
const [register1, { openModal: openModal1 }] = useModal();
register1用于注册useModal, 绑定到template里面test1Modal 的 组件
<test1Modal @register="register1" @success="handleSuccess" />
所以在TS里面要先引入组件,
再定义一个打开弹窗的方法openModal1 ,并且可以通过该方式传递值data到弹窗的子组件
import test1Modal from './test1Modal.vue';
openModal1(true, {
record,
isUpdate: true,
});
弹窗的定义就结束了
我理解的要在父类里控制弹窗Modal, 需要用到setModalProps
const [register1, { openModal: openModal1, setModalProps }] = useModal();
//下面这个方法得在弹窗打开的时候才会生效,不然会报错的
setModalProps({ confirmLoading: true });
在子组件中控制本弹窗Modal需要用到useModalInner(用于独立的 Modal 内部调用)的方法
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setFieldsValue({ ...data.record }); //传入的值快速赋值
});
setModalProps({ confirmLoading: true });
test1Modal.vue文件里的简单语法引用
<template>
<BasicModal title="Modal" v-bind="$attrs" :helpMessage="['提示1', '提示2']"> Test 2</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal } from '@/components/Modal';
</script>