HarmonyOS鸿蒙Next中CAPP集成CAD在线CAD APP调用内部弹框的方法

HarmonyOS鸿蒙Next中CAPP集成CAD在线CAD APP调用内部弹框的方法

前言

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

1. 在文件夹下创建 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>

1. 在文件夹下创建 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);

1. 最终在MxCAD项目中的src/index.ts文件中引入test_dialog/index.ts文件，代码如下：

import './test_dialog/index'

1. 启动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
>();

1. 在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>

1. 在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);

1. 同上述基础用法一样，在MxCAD项目中的src/index.ts文件中引入test_dialog/index.ts文件。

2. 最后在自己的方法中调用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);

扩展

1. 直接调用 dialog.reveal() 方法调用弹框，代码如下：

import { dialog } from "./dialog";
dialog.reveal({ title: "reveal" }).then(({ data, isCanceled }) => {
  console.log('确认参数', data);
  console.log('是否取消', isCanceled)
});

1. 通过监听确认或者取消事件得到数据，代码如下：

// 监听确认事件
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. 重启项目后恢复正常