vue3-tunnel-lining-plugins 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +130 -0
- package/dl200plugin.common.js +49 -0
- package/dl200plugin.common.js.map +1 -0
- package/dl200plugin.js +10766 -0
- package/dl200plugin.js.map +1 -0
- package/dl200plugin.umd.js +50 -0
- package/dl200plugin.umd.js.map +1 -0
- package/dl5plugin.common.js +49 -0
- package/dl5plugin.common.js.map +1 -0
- package/dl5plugin.js +10769 -0
- package/dl5plugin.js.map +1 -0
- package/dl5plugin.umd.js +50 -0
- package/dl5plugin.umd.js.map +1 -0
- package/index-dl200.css +1 -0
- package/index-dl5.css +1 -0
- package/index-sl160.css +1 -0
- package/index.js +13 -0
- package/package.json +58 -0
- package/sl160plugin.common.js +49 -0
- package/sl160plugin.common.js.map +1 -0
- package/sl160plugin.js +10766 -0
- package/sl160plugin.js.map +1 -0
- package/sl160plugin.umd.js +50 -0
- package/sl160plugin.umd.js.map +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# Vue3 Tunnel Lining Plugins
|
|
2
|
+
|
|
3
|
+
Vue3 隧道衬砌 UI 组件库，用于 MxCAD。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install vue3-tunnel-lining-plugins
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用方式
|
|
12
|
+
|
|
13
|
+
### 方式一：UMD 直接引入（浏览器环境）
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<!-- 1. 引入依赖库 -->
|
|
17
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
18
|
+
<script src="https://unpkg.com/mxcad/dist/mxcad.umd.js"></script>
|
|
19
|
+
<script src="https://unpkg.com/mxdraw@0.1.371/dist/mxdraw.umd.js"></script>
|
|
20
|
+
|
|
21
|
+
<!-- 2. 引入插件 UMD 文件 -->
|
|
22
|
+
<script src="node_modules/vue3-tunnel-lining-plugins/dl5plugin.umd.js"></script>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
// 3. 注册组件
|
|
26
|
+
const app = Vue.createApp();
|
|
27
|
+
|
|
28
|
+
// 获取 DL5 组件
|
|
29
|
+
const DL5Component = window.Vue3TunnelLiningDL5.DL5;
|
|
30
|
+
|
|
31
|
+
// 注册组件
|
|
32
|
+
app.component('DL5', DL5Component);
|
|
33
|
+
|
|
34
|
+
// 4. 在模板中使用
|
|
35
|
+
// <DL5 :config="configData" :locate-file-path="/wasm/2d/" />
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 方式二：npm 模块引入（Vue3 项目）
|
|
40
|
+
|
|
41
|
+
```javascript
|
|
42
|
+
// 1. 安装依赖
|
|
43
|
+
// npm install vue3-tunnel-lining-plugins vue mxcad mxdraw
|
|
44
|
+
|
|
45
|
+
// 2. 引入模块
|
|
46
|
+
import { DL5Plugin } from 'vue3-tunnel-lining-plugins';
|
|
47
|
+
// 或者单独引入某个插件
|
|
48
|
+
import DL5Plugin from 'vue3-tunnel-lining-plugins/dl5';
|
|
49
|
+
|
|
50
|
+
export default {
|
|
51
|
+
components: {
|
|
52
|
+
DL5: DL5Plugin
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 方式三：UMD 模块引入（CDN）
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<!DOCTYPE html>
|
|
61
|
+
<html>
|
|
62
|
+
<head>
|
|
63
|
+
<meta charset="utf-8">
|
|
64
|
+
<title>Vue3 Tunnel Lining Demo</title>
|
|
65
|
+
|
|
66
|
+
<!-- 引入依赖库 -->
|
|
67
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
68
|
+
<script src="https://unpkg.com/mxcad/dist/mxcad.umd.js"></script>
|
|
69
|
+
<script src="https://unpkg.com/mxdraw@0.1.371/dist/mxdraw.umd.js"></script>
|
|
70
|
+
|
|
71
|
+
<!-- 引入插件 UMD 文件 -->
|
|
72
|
+
<script src="https://your-cdn.com/dl5plugin.umd.js"></script>
|
|
73
|
+
<script src="https://your-cdn.com/dl200plugin.umd.js"></script>
|
|
74
|
+
<script src="https://your-cdn.com/sl160plugin.umd.js"></script>
|
|
75
|
+
</head>
|
|
76
|
+
<body>
|
|
77
|
+
<div id="app">
|
|
78
|
+
<dl5 :config="configData" :locate-file-path="/wasm/2d/"></dl5>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<script>
|
|
82
|
+
const app = Vue.createApp({
|
|
83
|
+
data() {
|
|
84
|
+
return {
|
|
85
|
+
configData: {
|
|
86
|
+
// 组件配置
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// 注册 DL5 组件
|
|
93
|
+
app.component('DL5', window.Vue3TunnelLiningDL5.DL5);
|
|
94
|
+
// 注册 DL200 组件
|
|
95
|
+
app.component('DL200', window.Vue3TunnelLiningDL200.DL200);
|
|
96
|
+
// 注册 SL160 组件
|
|
97
|
+
app.component('SL160', window.Vue3TunnelLiningSL160.SL160);
|
|
98
|
+
|
|
99
|
+
app.mount('#app');
|
|
100
|
+
</script>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 插件列表
|
|
106
|
+
|
|
107
|
+
- **dl5plugin.umd.js** - DL5 衬砌组件（中心水沟衬砌）
|
|
108
|
+
- **dl200plugin.umd.js** - DL200 衬砌组件（中心水沟衬砌）
|
|
109
|
+
- **sl160plugin.umd.js** - SL160 衬砌组件（侧水沟衬砌）
|
|
110
|
+
|
|
111
|
+
## 组件属性 (Props)
|
|
112
|
+
|
|
113
|
+
所有组件都支持以下 props：
|
|
114
|
+
|
|
115
|
+
| 属性名 | 类型 | 说明 |
|
|
116
|
+
|--------|------|------|
|
|
117
|
+
| config | Object | 组件配置数据 |
|
|
118
|
+
| locateFilePath | String | wasm 文件路径，默认为 "/wasm/2d/" |
|
|
119
|
+
| param1 | String | 参数1（可选） |
|
|
120
|
+
| param2 | String | 参数2（可选） |
|
|
121
|
+
|
|
122
|
+
## 注意事项
|
|
123
|
+
|
|
124
|
+
1. 使用 UMD 版本时，需要确保依赖库（Vue、MxCAD、MxDraw）已正确加载
|
|
125
|
+
2. MxCAD 需要 SharedArrayBuffer 支持，因此需要配置正确的 COOP/COEP 头
|
|
126
|
+
3. 如果使用本地 wasm 文件，请确保 `locateFilePath` 指向正确的路径
|
|
127
|
+
|
|
128
|
+
## License
|
|
129
|
+
|
|
130
|
+
MIT
|