前言
在 MxCAD APP 二次开发的过程中，为了沿用项目内部的样式保持项目的统一性，我们提供了调用项目内部弹框的接口。用户可根据自己的具体需求按照下面文档介绍的步骤来操作调用项目内部的弹框。
基础调用
1.首先创建一个 test_dialog 文件夹用于存储弹框相关的文件，如下图：
2.在文件夹下创建 dialog.ts 文件用于注册弹框，代码如下：
// dialog.isShow.value 默认是false// 如果没有传入命令，则只能通过修改dialog.isShow.value或者调用showDialog来显示弹框// 如果传入了命令，则调用命令会自动显示或关闭弹框// 如果传入了第三个参数，则会自定义这个命令的实现export const dialog = MxPluginContext.useDialogIsShow( false, "Mx_test_dialog", () => { dialog.showDialog(!dialog.isShow.value); });
复制代码
3.在文件夹下创建 dialog.vue 文件用于构建弹框 ui 界面，代码如下：
<script setup lang="ts">import { ref } from "vue";import { VBtn } from "vuetify/components";import { dialog } from "./dialog";const { MxDialog } = MxPluginContext.components;const footerBtnList = [ { name: "取消", fun: () => { // 弹框点击了取消按钮，传入数据 dialog.cancel({ data: 1 }); // 需要先发送数据再关闭弹框 dialog.showDialog(false); }, }, { name: "确定", fun: () => { // 弹框点击了确认按钮，传入数据 dialog.confirm({ data: 2 }); dialog.showDialog(false); }, primary: true, },];const { isShow, onReveal } = dialog;const title = ref("测试标题");onReveal((data) => { // 接收到显示的消息 if (data.title) title.value = data.title;});</script><template> <MxDialog :title="title" v-model="isShow" max-width="300" :footerBtnList="footerBtnList" > <h4>这是一个测试弹框！</h4> <VBtn>测试按钮</VBtn> </MxDialog></template>
复制代码
4.在文件夹下创建 index.ts 文件在界面创建弹框，代码如下：
import { createVNode, render } from "vue";import dialog from "./dialog.vue";const el = document.createElement("div");document.body.appendChild(el);const vnode = createVNode(dialog);const app = MxPluginContext.getApp();vnode.appContext = app._context;render(vnode, el);
复制代码
5.最终在 MxCAD 项目中的 src/index.ts 文件中引入 test_dialog/index.ts 文件，代码如下：
import './test_dialog/index'
复制代码
如下图：
6.启动 MxCAD 项目，执行上面注册的'Mx_test_dialog'命令就能显示弹框了，运行效果如下：
高级调用
按照上述步骤操作，用户可直接通过命令行调用来控制项目弹框的显隐，但由于在实际开发过程中会遇到不能直接通过调用命令来控制弹框显隐藏，而是通过直接调用代码。因此，我们提供了 useDialogIsShow 属性，用户可通过直接控制 useDialogIsShow 来控制弹框。操作步骤如下：
1.在 dialog.ts 文件下调用 useDialogIsShow 钩子函数通过类型参数化的方式定义对话框显示、确认和取消时需要处理的数据类型，代码如下：
// 弹框要显示的数据 type RevealData = { title: string }; // 弹框确认要传入的数据 type ConfirmData = { data: number }; // 弹框取消要传入的数据 type CancelData = { data: number }; export const dialog = MxPluginContext.useDialogIsShow< RevealData, ConfirmData, CancelData >();
复制代码
2.在 dialog.vue 文件下正常编写弹框的 vue 组件，代码如下：
<script setup lang="ts"> import { ref } from "vue"; import { VBtn } from "vuetify/components"; import { dialog } from "./dialog"; const { MxDialog } = MxPluginContext.components; const footerBtnList = [ { name: "取消", fun: () => { // 弹框点击了取消按钮，传入数据 dialog.cancel({ data: 1 }); // 需要先发送数据再关闭弹框 dialog.showDialog(false); }, }, { name: "确定", fun: () => { // 弹框点击了确认按钮，传入数据 dialog.confirm({ data: 2 }); dialog.showDialog(false); }, primary: true, }, ]; const { isShow, onReveal } = dialog; const title = ref("测试标题"); onReveal((data) => { // 接收到显示的消息 if (data.title) title.value = data.title; }); </script> <template> <MxDialog :title="title" v-model="isShow" max-width="300" :footerBtnList="footerBtnList" > <h4>这是一个测试弹框！</h4> <VBtn>这是一个测试按钮！</VBtn> </MxDialog> </template>
复制代码
3.在 index.ts 文件下注册渲染弹框，代码如下：
import DialogComponent from "./dialog.vue"; import { createVNode, render } from "vue"; const el = document.createElement("div"); document.body.appendChild(el); const vnode = createVNode(DialogComponent); const app = MxPluginContext.getApp(); vnode.appContext = app._context; render(vnode, el);
复制代码
4.同上述基础用法一样，在 MxCAD 项目中的 src/index.ts 文件中引入 test_dialog/index.ts 文件。
5.最后在自己的方法中调用 dialog 就可以直接控制弹框了，代码如下：
function test() { /** * 这里是弹出弹框前需要执行的代码 */ dialog .showDialog(true, { title: "测试标题显示" }) .then(({ data, isCanceled }) => { // 需要等待cancel或者confirm调用才会触发 if (isCanceled) { // 调用dialog.cancel({ data: 1 })取消 console.log("弹框取消的数据", data.data === 1); } else { // 调用dialog.confirm({ data: 2 })取消 console.log("弹框确认的数据", data.data === 2); } }); }
复制代码
6.运行效果如下：
扩展
1.直接调用 dialog.reveal()方法调用弹框，代码如下：
import { dialog } from "./dialog"; dialog.reveal({ title: "reveal" }).then(({ data, isCanceled }) => { console.log('确认参数', data); console.log('是否取消', isCanceled) });
复制代码
运行效果如下：
2.通过监听确认或者取消事件得到数据，代码如下：
// 监听确认事件 dialog.onConfirm((data) => { console.log('确定', data) }); // 监听取消事件 dialog.onCancel((data) => { console.log('取消', data) });
复制代码
样式调整
用户在调用 MxCAD APP 内部弹框的时候，在弹框内引入`vuetify/components`内部组件的时候，可能会出现样式错乱或层叠的情况，这是由于`vuetify`自带的组件样式，与 MxCAD APP 内部封装好的样式发生了冲突。我们只需要在 vite 的配置文件中，设置调用 MxCAD APP 内部样式即可，具体操作如下所示：
1，引入`vuetify/components`内部组件，MxCAD APP 发生样式错乱
2，配置`vite.config.ts`
3，重启项目后恢复正常
评论