vue3-tunnel-lining-plugins

Vue3 Tunnel Lining Plugins

Vue3 隧道衬砌 UI 组件库，用于 MxCAD。

安装

npm install vue3-tunnel-lining-plugins

使用方式

方式一：UMD 直接引入（浏览器环境）

<!-- 1. 引入依赖库 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/mxcad/dist/mxcad.umd.js"></script>
<script src="https://unpkg.com/mxdraw@0.1.372/dist/mxdraw.umd.js"></script>

<!-- 2. 引入插件 UMD 文件 -->
<script src="node_modules/vue3-tunnel-lining-plugins/dl5plugin.umd.js"></script>

<script>
  // 3. 注册组件
  const app = Vue.createApp();

  // 获取 DL5 组件
  const DL5Component = window.Vue3TunnelLiningDL5.DL5;

  // 注册组件
  app.component('DL5', DL5Component);

  // 4. 在模板中使用
  // <DL5 :config="configData" :locate-file-path="/wasm/2d/" />
</script>

方式二：npm 模块引入（Vue3 项目）

// 1. 安装依赖
// npm install vue3-tunnel-lining-plugins vue mxcad mxcad-app mxdraw

// 2. 引入模块
import { DL5Plugin } from 'vue3-tunnel-lining-plugins';
// 或者单独引入某个插件
import DL5Plugin from 'vue3-tunnel-lining-plugins/dl5';

export default {
  components: {
    DL5: DL5Plugin
  }
}

方式三：UMD 模块引入（CDN）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue3 Tunnel Lining Demo</title>

  <!-- 引入依赖库 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/mxcad/dist/mxcad.umd.js"></script>
  <script src="https://unpkg.com/mxdraw@0.1.372/dist/mxdraw.umd.js"></script>

  <!-- 引入插件 UMD 文件 -->
  <script src="https://your-cdn.com/dl5plugin.umd.js"></script>
  <script src="https://your-cdn.com/dl200plugin.umd.js"></script>
  <script src="https://your-cdn.com/sl160plugin.umd.js"></script>
</head>
<body>
  <div id="app">
    <dl5 :config="configData" :locate-file-path="/wasm/2d/"></dl5>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          configData: {
            // 组件配置
          }
        }
      }
    });

    // 注册 DL5 组件
    app.component('DL5', window.Vue3TunnelLiningDL5.DL5);
    // 注册 DL200 组件
    app.component('DL200', window.Vue3TunnelLiningDL200.DL200);
    // 注册 SL160 组件
    app.component('SL160', window.Vue3TunnelLiningSL160.SL160);

    app.mount('#app');
  </script>
</body>
</html>

工具函数

clearMxCADView(mxcadview)

清空 MxCADView 中的图形内容，但保留视图实例。

参数：

• mxcadview (Object): MxCADView 实例

功能：

• 清空当前 CAD 视图的图形
• 重置缩放和平移到全部显示
• 清空选择集

示例：

import { clearMxCADView } from 'vue3-tunnel-lining-plugins';

clearMxCADView(mxcadview);

disposeMxCADView(mxcadview)

销毁 MxCADView 实例，释放资源。

参数：

• mxcadview (Object): MxCADView 实例

功能：

• 清空图形内容
• 调用 dispose 方法销毁视图
• 清空引用

示例：

import { disposeMxCADView } from 'vue3-tunnel-lining-plugins';

disposeMxCADView(mxcadview);

插件列表

• dl5plugin.umd.js - DL5 衬砌组件（中心水沟衬砌）
• dl200plugin.umd.js - DL200 衬砌组件（中心水沟衬砌）
• sl160plugin.umd.js - SL160 衬砌组件（侧水沟衬砌）

组件属性 (Props)

所有组件都支持以下 props：

注意事项

1. 使用 UMD 版本时，需要确保依赖库（Vue、MxCAD、MxDraw）已正确加载
2. MxCAD 需要 SharedArrayBuffer 支持，因此需要配置正确的 COOP/COEP 头
3. 如果使用本地 wasm 文件，请确保 locateFilePath 指向正确的路径

License

MIT