MxCAD APP调用内部弹框

前言

在 MxCpp 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);
               }
           });
   }

   // 注册上面的方法
   MxFun.addCommand("Mx_testFun", test);

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内部样式即可，具体操作如下所示：

   • 引入vuetify/components 内部组件，MxCAD APP发生样式错乱

     

     

   • 配置vite.config.ts

     

   • 重启项目后恢复正常