基于Vue3框架的Vben的Modal弹窗

最新推荐文章于 2024-09-24 08:24:40 发布

隐于宁乡的码农

最新推荐文章于 2024-09-24 08:24:40 发布

阅读量264

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_38874955/article/details/141635921

版权

参考文档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>