①首先引入-组件跟自己的两个或者多个弹窗
import { useModal } from '@/components/Modal';
import AddJcsystemNameModel from './IntensiveConstruction5/AddJcsystemNameModel.vue';
import CollaboratingUnitModal from './IntensiveConstruction5/CollaboratingUnitModal.vue';
②HTML结构放在最底部的div里面
<AddJcsystemNameModel @register="registerJcsystemNameModel" @success="handleSuccess" />
<CollaboratingUnitModal
@register="registerCollaboratingUnitModal"
@success="handleCollaboraSuccess"
/>
</div>
</template>
③关键!!!!!!!!对应弹窗组件里面的@register跟@触发弹窗方法
const [registerJcsystemNameModel, { openModal: openJcsystemNameModel }] = useModal();
const [registerCollaboratingUnitModal, { openModal: openCollaboratingUnitModal }] = useModal();
④写弹窗方法跟成功的回调就OK了
// 打开基层系统名称弹窗
const selectJcsystemName = () => {
openJcsystemNameModel(true);
};
// 打开协同单位弹窗
const selectCollabora = () => {
openCollaboratingUnitModal(true);
};
// 成功之后添加协同单位名称
const handleCollaboraSuccess = (data) => {
console.log(data);
//进行操作对数据
};