@das-fed/web-components 7.0.7-hot.17 → 7.0.7-hot.18

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.
Files changed (56) hide show
  1. package/README.md +75 -318
  2. package/das-web-app/index.js.gz +0 -0
  3. package/das-web-app/style.css.gz +0 -0
  4. package/{index-DDq2TQGQ.js → index--xD4LYki.js} +1 -1
  5. package/{index-Cd82FeFB.js → index-6UpwqTSO.js} +1 -1
  6. package/{index-elQ8g2VC.js → index-A2vnUGf2.js} +1 -1
  7. package/{index-Ca8-kVUM.js → index-B4mdrOkj.js} +1 -1
  8. package/{index-DhToUBq0.js → index-BB75eSNV.js} +1 -1
  9. package/{index-Bs29HTwe.js → index-BINaoa75.js} +1 -1
  10. package/{index-DGpGJaBQ.js → index-BPhFpbG2.js} +1 -1
  11. package/{index-BIytD1H6.js → index-Bd9L4Npy.js} +22968 -22919
  12. package/{index-CJsNfk9z.js → index-BiNguJQc.js} +1 -1
  13. package/{index-DfL_bFhr.js → index-Bj7tOhhE.js} +1 -1
  14. package/{index-KDg8Vyub.js → index-Bnuq7eEF.js} +1 -1
  15. package/{index-Dr_PAtNP.js → index-BoCUL3ON.js} +1 -1
  16. package/{index-Dq2_SpEe.js → index-BpdljSWC.js} +1 -1
  17. package/{index-C5giSYDJ.js → index-Bpw7F9qz.js} +1 -1
  18. package/{index-Dv06D0pY.js → index-Bu0m29FS.js} +1 -1
  19. package/{index-B5v70xaY.js → index-C30940kr.js} +1 -1
  20. package/{index-k-sX0sYf.js → index-CAGKLRJV.js} +1 -1
  21. package/{index-DQ_JG39X.js → index-CER3WAEf.js} +1 -1
  22. package/{index-WFNUumhI.js → index-CLkLdwSc.js} +48 -48
  23. package/{index-D0vnOma1.js → index-CPjotxWL.js} +1 -1
  24. package/{index-DuS6WKPs.js → index-CRJBlE4l.js} +1 -1
  25. package/{index-B6oVOEbz.js → index-CRrLaplK.js} +1 -1
  26. package/{index-DdHZYBAU.js → index-CViFBZJm.js} +1 -1
  27. package/{index-CIuU40hi.js → index-CY9DRcIM.js} +1 -1
  28. package/{index-CQU_1GXV.js → index-CbUj0Wq-.js} +1 -1
  29. package/{index-Dcyk2fb9.js → index-CjPGeW0p.js} +1 -1
  30. package/{index-C1VNkvAH.js → index-CmAefj0W.js} +1 -1
  31. package/{index-OliTZacX.js → index-CoWQHVQL.js} +1 -1
  32. package/{index-c32KIa6c.js → index-D5DhVX_6.js} +1 -1
  33. package/{index-B-NesDdb.js → index-D7EHHsiG.js} +1 -1
  34. package/{index-Cj8rvWAf.js → index-DIOyH4Sn.js} +1 -1
  35. package/{index-D74REI7H.js → index-DMt3opuG.js} +1 -1
  36. package/{index-C5pZMUM5.js → index-DPtTcXdQ.js} +1 -1
  37. package/{index-CokLXwTm.js → index-DR9xEawp.js} +1 -1
  38. package/{index-CDjvbFs8.js → index-DTpeC3Ta.js} +1 -1
  39. package/{index-DGkxAhpA.js → index-DeKKKK16.js} +1 -1
  40. package/{index-mtdO0y3F.js → index-DoA55seX.js} +1 -1
  41. package/{index-EMw3G0xV.js → index-DrPaA-zJ.js} +1 -1
  42. package/{index-D3fIGBzk.js → index-Dvojcwbh.js} +1 -1
  43. package/{index-FdanfKGY.js → index-DxnzOMJX.js} +1 -1
  44. package/{index-B1bWXQGC.js → index-EbDvciko.js} +1 -1
  45. package/{index-ZXIxzCBY.js → index-NysN8dhz.js} +1 -1
  46. package/{index-EJkBNXAj.js → index-TwotrWJm.js} +1 -1
  47. package/{index-BsPMuOEE.js → index-e06tPYKV.js} +1 -1
  48. package/{index-D-XmKayN.js → index-j1p5Zj3Z.js} +1 -1
  49. package/{index-g22rQIkf.js → index-kRC65knf.js} +1 -1
  50. package/{index-ZHCEz0oe.js → index-nhe8WW2O.js} +1 -1
  51. package/{index-DYwCPPn5.js → index-q3yiXAU4.js} +1 -1
  52. package/{index-Cclu1XUV.js → index-qkl-94xs.js} +1 -1
  53. package/{index-Dq5728Qy.js → index-r69EYlMi.js} +1 -1
  54. package/index.js +2 -2
  55. package/package.json +6 -6
  56. package/style.css +2 -2
package/README.md CHANGED
@@ -1,359 +1,104 @@
1
- ## das-ce-tabs 使用方法
1
+ # das-web-components 组件库说明文档
2
2
 
3
- 1. **引入 `das-ce-tabs` 组件并注册**。
3
+ ## 一、简介
4
4
 
5
- ```js
6
- import { createCeTabs } from '@das-fed/web-components'
7
- createCeTabs('das-ce-tabs')
8
- ```
9
-
10
- 2. **定义 `options` 和 `modelValue` 属性**。
5
+ das-web-components 是 DAS 前端体系的 Web 组件库,基于 Web Components 技术,支持 Vue、React、原生 JS 等多种框架集成,适用于企业级中后台系统的统一架构和快速开发。
11
6
 
12
- `das-ce-tabs` 接收 `options` 和 `modelValue` 属性,`options` 属性配置如下:
13
-
14
- ```js
15
- interface TabOption {
16
- /** 唯一标识 */
17
- key: string | number
18
- /** 选项卡头显示文字 */
19
- tab: string
20
- /** 是否禁用 */
21
- disabled?: boolean
22
- /** 是否隐藏 */
23
- hidden?: boolean
24
- /** 被隐藏时是否渲染 DOM 结构 */
25
- forceRender?: boolean
26
- /** tab显示文字插槽 */
27
- tabSlot?: string
28
- /** 关闭图标插槽 */
29
- closeIconSlot?: string
30
- /** 显示内容插槽 */
31
- contentSlot?: string
32
- }
33
- ```
7
+ ---
34
8
 
35
- 定义实例如下:
9
+ ## 二、核心组件与用法
36
10
 
37
- ```js
38
- const activeKey = ref(1)
39
-
40
- const options = ref([
41
- { key: 1, tab: 'Tab 1' },
42
- { key: 2, tab: 'Tab 2', disabled: true },
43
- { key: 3, tab: 'Tab 3' },
44
- ])
45
- ```
11
+ ### 1. das-ce-tabs 页签组件
46
12
 
47
- 3. **监听组件事件**
13
+ - 支持动态页签、右键菜单、刷新、全屏等功能。
14
+ - 通过 `createCeTabs('das-ce-tabs')` 注册。
15
+ - 主要属性:
16
+ - `options`:页签配置数组,支持禁用、隐藏、插槽等。
17
+ - `modelValue`:当前激活页签 key。
18
+ - 主要事件:
19
+ - `update:modelValue`:切换页签时触发,返回新激活 key。
20
+ - `tabClick`:点击页签时触发,返回 key。
21
+ - `tabDelete`:删除页签时触发,返回 key。
22
+ - `menuClick`:右键菜单操作,返回操作项和页签对象。
23
+ - `pageRefresh`:点击刷新按钮时触发。
24
+ - `toggleFullScreen`:切换全屏。
25
+ - 主要方法与类型定义见下方代码示例。
48
26
 
49
- 使用组件时,监听到的事件对象为 `customEvent` ,该对象中的 `detail` 属性是个数组,数组元素为组件事件的返回值。 `das-ce-tabs` 组件暴露了以下事件:
50
-
51
- 1. `update:modelValue`:当 `modelValue` 属性变化时触发,要实现切换页签时 `activeKey` 属性自动变化,需要监听该事件。
27
+ #### 用法示例
52
28
 
53
29
  ```js
54
30
  import { ref } from 'vue'
55
- import { createCeTabs } from '@das-fed/web-/components'
56
- createCeTabs('das-ce-tabs')
57
-
58
- const activeKey = ref(1)
59
-
60
- const options = ref([
61
- { key: 1, tab: 'Tab 1' },
62
- { key: 2, tab: 'Tab 2', disabled: true },
63
- { key: 3, tab: 'Tab 3' },
64
- ])
65
- ```
66
-
67
- ```html
68
- <das-ce-tabs
69
- :modelValue="activeKey"
70
- :options="options"
71
- @update:modelValue="(customEvent) => (activeKey = customEvent.detail[0])"
72
- ></das-ce-tabs>
73
- ```
74
-
75
- 2. `tabClick`:当 `tab` 被点击时触发。返回被点击页签的 `key` 值。
76
-
77
- ```js
78
- import { ref } from 'vue'
79
- import { createCeTabs } from '@das-fed/web-components/components'
80
- createCeTabs('das-ce-tabs')
81
-
82
- const activeKey = ref(1)
83
-
84
- const options = ref([
85
- { key: 1, tab: 'Tab 1' },
86
- { key: 2, tab: 'Tab 2', disabled: true },
87
- { key: 3, tab: 'Tab 3' },
88
- ])
89
-
90
- const tabClick = (customEvent) => {
91
- console.log('当前点击页签的key: ', customEvent.detail[0])
92
- }
93
- ```
94
-
95
- ```html
96
- <das-ce-tabs :modelValue="activeKey" :options="options" @tabClick="tabClick"></das-ce-tabs>
97
- ```
98
-
99
- 3. `tabDelete`:当 `tab` 被删除时触发。返回被删除页签的 `key` 值。
100
-
101
- ```js
102
- import { ref } from 'vue'
103
- import { createCeTabs } from '@das-fed/web-components/components'
104
- createCeTabs('das-ce-tabs')
105
-
106
- const activeKey = ref(1)
107
-
108
- const options = ref([
109
- { key: 1, tab: 'Tab 1' },
110
- { key: 2, tab: 'Tab 2', disabled: true },
111
- { key: 3, tab: 'Tab 3' },
112
- ])
113
-
114
- const tabDelete = (customEvent) => {
115
- console.log('当前删除页签的key:', customEvent.detail[0])
116
- }
117
- ```
118
-
119
- ```html
120
- <das-ce-tabs :modelValue="activeKey" :options="options" @tabDelete="tabDelete"></das-ce-tabs>
121
- ```
122
-
123
- 4. `menuClick`:当右键呼出的操作项选中时触发。返回被选中的操作项和当前右键操作的页签对象。
124
-
125
- ```js
126
- import { ref } from 'vue'
127
- import { createCeTabs } from '@das-fed/web-components/components'
31
+ import { createCeTabs } from '@das-fed/web-components'
128
32
  createCeTabs('das-ce-tabs')
129
33
 
130
34
  const activeKey = ref(1)
131
-
132
35
  const options = ref([
133
36
  { key: 1, tab: 'Tab 1' },
134
37
  { key: 2, tab: 'Tab 2', disabled: true },
135
38
  { key: 3, tab: 'Tab 3' },
136
39
  ])
137
-
138
- const menuClick = (customEvent) => {
139
- console.log('当前选中操作项:', customEvent.detail[0], '当前页签对象:', customEvent.detail[1])
140
- }
141
40
  ```
142
41
 
143
42
  ```html
144
43
  <das-ce-tabs :modelValue="activeKey" :options="options" @menuClick="menuClick"></das-ce-tabs>
145
44
  ```
146
45
 
147
- 操作项定义如下:
46
+ #### 事件与类型
148
47
 
149
48
  ```js
150
49
  interface MenuListType {
151
- /** 唯一标识 */
152
50
  key: string | number
153
- /** 操作项名称 */
154
51
  name: string
155
- /** 是否隐藏 */
156
52
  hidden?: boolean | Function
157
- /** 是否禁用 */
158
53
  disabled?: boolean | Function
159
54
  }
160
55
  ```
161
56
 
162
- 5. `pageRefresh`: 当点击右侧刷新按钮时触发。无返回值。
163
-
164
- ```js
165
- import { ref } from 'vue'
166
- import { createCeTabs } from '@das-fed/web-components/components'
167
- createCeTabs('das-ce-tabs')
168
-
169
- const activeKey = ref(1)
170
-
171
- const options = ref([
172
- { key: 1, tab: 'Tab 1' },
173
- { key: 2, tab: 'Tab 2', disabled: true },
174
- { key: 3, tab: 'Tab 3' },
175
- ])
176
-
177
- const pageRefresh = () => {
178
- console.log('刷新')
179
- }
180
- ```
181
-
182
- ```html
183
- <das-ce-tabs :modelValue="activeKey" :options="options" @pageRefresh="pageRefresh"></das-ce-tabs>
184
- ```
185
-
186
- 6. `toggleFullScreen`: 切换全屏状态。无返回值。
187
-
188
- ```js
189
- import { ref } from 'vue'
190
- import { createCeTabs } from '@das-fed/web-components/components'
191
- createCeTabs('das-ce-tabs')
192
-
193
- const activeKey = ref(1)
194
-
195
- const options = ref([
196
- { key: 1, tab: 'Tab 1' },
197
- { key: 2, tab: 'Tab 2', disabled: true },
198
- { key: 3, tab: 'Tab 3' },
199
- ])
200
-
201
- const toggleFullScreen = () => {
202
- console.log('全屏')
203
- }
204
- ```
57
+ ---
205
58
 
206
- ```html
207
- <das-ce-tabs :modelValue="activeKey" :options="options" @toggleFullScreen="toggleFullScreen"></das-ce-tabs>
208
- ```
59
+ ### 2. das-ce-nav 顶部导航栏组件
209
60
 
210
- ## das-ce-nav 使用方法
61
+ - 支持菜单、logo、搜索、用户信息、项目树、内置页面等多种功能。
62
+ - 通过 `createCeNav('das-ce-nav')` 注册。
63
+ - 主要属性:
64
+ - `modelValue`:当前选中菜单 key。
65
+ - `config`:导航栏配置。
66
+ - `logoUrl`、`searchConfig`、`userInfoConfig`、`projectTreeConfig`、`innerPagesConfig` 等。
67
+ - 主要事件:
68
+ - `handleTabClick`、`handleTabDelete`、`changeInnerPage`、`searchToPage`、`clearSearchList`、`deleteSearchItem`、`userCommandHandle`、`changeTreeHandle`。
69
+ - 详细属性与事件见下方表格。
211
70
 
212
- ### 1. **引入 `das-ce-nav` 组件并注册**。
71
+ #### 用法示例
213
72
 
214
73
  ```js
215
74
  import { createCeNav } from '@das-fed/web-components'
216
75
  createCeNav('das-ce-nav')
217
76
  ```
218
77
 
219
- #### ① 在 vue 文件中使用
220
-
221
78
  ```html
222
79
  <das-ce-nav
223
80
  @update:modelValue="(event) => (activeKey = event.detail[0])"
224
81
  :modelValue="activeKey"
225
- @handleTabClick="handleTabClick"
226
- @handleTabDelete="handleTabDelete"
227
82
  :config="config"
228
83
  :logoUrl="logoUrl"
229
84
  :searchConfig="searchConfig"
230
- @searchToPage="searchToPage"
231
- @clearSearchList="clearSearchList"
232
- @deleteSearchItem="deleteSearchItem"
233
85
  :userInfoConfig="userInfoConfig"
234
- @userCommandHandle="userCommandHandle"
235
86
  :projectTreeConfig="projectTreeConfig"
236
- @changeTreeHandle="changeTreeHandle"
237
87
  :innerPagesConfig="innerPagesConfig"
238
- @changeInnerPage="changeInnerPage"
239
88
  ></das-ce-nav>
240
89
  ```
241
90
 
242
- #### ① 在 html 文件中使用
243
-
244
- ```html
245
- <head>
246
- <script type="module">
247
- import { createCeNav } from '@das-fed/web-components'
248
- createCeNav('das-ce-nav')
249
- const handleTabClick = (event) => {
250
- console.log(event)
251
- }
252
- const dasceNavEle = document.getElementsByTagName('das-ce-nav')[0]
253
- dasceNavEle.addEventListener('handleTabClick', handleTabClick)
254
- </script>
255
- </head>
256
- <body>
257
- <das-ce-nav
258
- @update:modelValue="(event) => (activeKey = event.detail[0])"
259
- :modelValue="activeKey"
260
- :config="config"
261
- :logoUrl="logoUrl"
262
- :searchConfig="searchConfig"
263
- :userInfoConfig="userInfoConfig"
264
- :projectTreeConfig="projectTreeConfig"
265
- :innerPagesConfig="innerPagesConfig"
266
- ></das-ce-nav>
267
- </body>
268
- ```
269
-
270
- ### 2. **属性**
271
-
272
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
273
- | ----------------- | ------------- | ----------------------------------------- | ----------------------------------------- | -------- |
274
- | modelValue | 当前选中菜单 | string/number | - | 是 |
275
- | config | 导航栏配置 | [config](###config) | [config](###config) | 是 |
276
- | logoUrl | logo 图片链接 | string | - | 否 |
277
- | innerPagesConfig | 内置页面配置 | [innerPagesConfig](###innerPagesConfig) | [innerPagesConfig](###innerPagesConfig) | 否 |
278
- | searchConfig | 搜索配置 | [searchConfig](###searchConfig) | [searchConfig](###searchConfig) | 否 |
279
- | userInfoConfig | 用户信息配置 | [userInfoConfig](###userInfoConfig) | [userInfoConfig](###userInfoConfig) | 否 |
280
- | projectTreeConfig | 项目树配置 | [projectTreeConfig](###projectTreeConfig) | [projectTreeConfig](###projectTreeConfig) | 否 |
281
-
282
- ### config
283
-
284
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
285
- | --------------- | ------------------ | ---------------------------------- | ------ | -------- |
286
- | showSearch | 是否显示搜索 | bool | false | 否 |
287
- | showProjectTree | 是否显示项目下拉树 | bool | false | 否 |
288
- | subAppList | 导航栏菜单数据 | {name:string,code:string/number}[] | - | 否 |
289
-
290
- ### innerPagesConfig
291
-
292
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
293
- | ------------------- | ------------------ | ------------------------------- | ------ | -------- |
294
- | activeInnerPagePath | 内置菜单当前选中值 | string/number | false | 否 |
295
- | innerPages | 内置菜单数据 | {title: string, path: string}[] | false | 否 |
296
-
297
- ### searchConfig
298
-
299
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
300
- | -------------- | ---------------- | ----------------------------- | --------------------------- | -------- |
301
- | defaultProps | - | {value: string,label: string} | {value: 'id',label: 'name'} | 否 |
302
- | getHistoryList | 获取历史搜索记录 | () => Promise<any> | - | 否 |
303
- | getSearchList | 获取菜单 | () => Promise<any> | - | 否 |
304
- | addHistory | 添加历史记录 | (data:any) => void | - | 否 |
305
-
306
- ### userInfoConfig
307
-
308
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
309
- | ------------- | -------------- | -------------------------------------------------- | ------ | -------- |
310
- | headPicture | 用户头像 | 默认头像 | 否 |
311
- | commandList | 用户信息操作项 | () => Promise<any> | - | 否 |
312
- | getSearchList | 获取菜单 | {value?: string /number,label?: string / number}[] | - | 否 |
313
-
314
- ### projectTreeConfig
315
-
316
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
317
- | ------------------- | ---------------------------------- | ------------------------------------------------------------------ | --------------------------- | -------- |
318
- | projectStore | 项目数据 | - | 否 |
319
- | defaultProps | - | {value: string,label: string} | {value: 'id',label: 'name'} | 否 |
320
- | treeProps | 树组件配置 | [TreeOptionProps](###TreeOptionProps) | - | 否 |
321
- | filterNode | 搜索过滤 | (value: any, data: any) => [projectTreeType](###projectTreeType)[] | - | 否 |
322
- | filterFlatCondition | 树切换平铺,符合条件的加入平铺列表 | (data: any) => boolean[] | - | 否 |
323
-
324
- ### TreeOptionProps
325
-
326
- ```js
327
- interface TreeOptionProps {
328
- label?: string // 默认name
329
- pathName?: string // 默认pathName
330
- children?: string // 默认children
331
- parentId?: string // 默认parentId
332
- disabled?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认disabled
333
- isLeaf?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认leaf;懒加载不支持方法
334
- // 允许取消选中(keepSelected为true时生效)
335
- allowUnSelect?: string | ((data: TreeNodeData) => boolean) // 默认allowUnSelect
336
- class?: (
337
- data: TreeNodeData,
338
- node: Node,
339
- ) =>
340
- | string
341
- | {
342
- [key: string]: boolean
343
- }
344
- | string
345
- }
346
- ```
347
-
348
- ### projectTreeType
349
-
350
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
351
- | -------- | ------------------------------------------ | ------------------------------------- | ------ | -------- |
352
- | - | 唯一标识(可使用 defaultProps.value 配置) | id | 是 |
353
- | - | 项目名称(可使用 defaultProps.label 配置) | name | 是 |
354
- | children | 树组件配置 | [projectTreeType](###projectTreeType) | - | 否 |
91
+ #### 主要属性与事件
355
92
 
356
- ### 3. **事件**
93
+ | 属性名 | 描述 | 类型 | 是否必填 |
94
+ | ----------------- | ------------- | ------------- | -------- |
95
+ | modelValue | 当前选中菜单 | string/number | 是 |
96
+ | config | 导航栏配置 | object | 是 |
97
+ | logoUrl | logo 图片链接 | string | 否 |
98
+ | innerPagesConfig | 内置页面配置 | object | 否 |
99
+ | searchConfig | 搜索配置 | object | 否 |
100
+ | userInfoConfig | 用户信息配置 | object | 否 |
101
+ | projectTreeConfig | 项目树配置 | object | 否 |
357
102
 
358
103
  | 事件 | 说明 | 回调参数 |
359
104
  | ----------------- | --------------------------- | ------------------------------- |
@@ -366,17 +111,29 @@ interface TreeOptionProps {
366
111
  | userCommandHandle | 用户信息-操作项 | function(value:any) |
367
112
  | changeTreeHandle | 项目树-是否确定切换选中项目 | function(status:bool,value:any) |
368
113
 
369
- ## das-ce-menu 使用方法
114
+ ---
115
+
116
+ ### 3. das-ce-menu 侧边菜单栏组件
117
+
118
+ - 支持菜单折叠、选中、动态数据等功能。
119
+ - 通过 `createCeMenu('das-ce-menu')` 注册。
120
+ - 主要属性:
121
+ - `modelValue`:当前选中菜单 key。
122
+ - `data`:菜单数据数组。
123
+ - `collapse`:菜单栏初始折叠状态。
124
+ - 主要事件:
125
+ - `change`:选中项改变时触发。
126
+ - `collapse-change`:菜单折叠状态改变时触发。
127
+ - 主要方法:
128
+ - `changeCollapse`:切换菜单折叠状态。
370
129
 
371
- 1. **引入 `das-ce-menu` 组件并注册**。
130
+ #### 用法示例
372
131
 
373
132
  ```js
374
133
  import { createCeMenu } from '@das-fed/web-components'
375
134
  createCeMenu('das-ce-menu')
376
135
  ```
377
136
 
378
- 2. **使用**。
379
-
380
137
  ```html
381
138
  <das-ce-menu
382
139
  :data="menuData"
@@ -388,23 +145,23 @@ createCeMenu('das-ce-menu')
388
145
  ></das-ce-menu>
389
146
  ```
390
147
 
391
- 3. **属性**
148
+ ---
149
+
150
+ ## 三、组件属性与类型定义
151
+
152
+ 详细属性、类型定义和事件请参考源码及注释。
153
+
154
+ ---
392
155
 
393
- | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
394
- | ---------- | ------------------ | ------------- | ------ | -------- |
395
- | modelValue | 当前选中菜单 | string/number | - | 是 |
396
- | data | 导航栏配置 | array | [] | 是 |
397
- | collapse | 菜单栏初始折叠状态 | boolean | false | 否 |
156
+ ## 四、常见问题与扩展
398
157
 
399
- 4. **事件**
158
+ - 支持在 Vue、React、原生 JS 项目中直接注册和使用。
159
+ - 组件事件均通过 `customEvent.detail` 获取返回值。
160
+ - 支持自定义插槽、动态数据、复杂交互。
161
+ - 推荐结合 DAS Web 主应用统一布局和微前端架构使用。
400
162
 
401
- | 事件 | 描述 | 回调参数 |
402
- | --------------- | ---------------- | ------------------------------------------- |
403
- | change | 选中项改变触发 | function(value: string/number, option: any) |
404
- | collapse-change | 折叠状态改变触发 | function(value:boolean) |
163
+ ---
405
164
 
406
- 5. **方法**
165
+ ## 五、贡献与维护
407
166
 
408
- | 方法 | 描述 | 参数 |
409
- | -------------- | ------------ | ------------------------------ |
410
- | changeCollapse | 切换折叠状态 | 接收一个布尔类型参数:折叠状态 |
167
+ 如需详细 API 说明、组件开发指南,请参考源码及注释。
Binary file
Binary file
@@ -1,4 +1,4 @@
1
- import { d as t, c as n, o, w as e, m as l, n as c, u as s, p as i } from "./index-BIytD1H6.js";
1
+ import { d as t, c as n, o, w as e, m as l, n as c, u as s, p as i } from "./index-Bd9L4Npy.js";
2
2
  const r = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679312376113" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9128" xmlns:xlink="http://www.w3.org/1999/xlink" width="233.203125" height="200"><path d="M696.064 144.981333v729.941334L367.786667 689.322667a69.888 69.888 0 0 0-34.645334-9.130667h-199.68a18.602667 18.602667 0 0 1-18.090666-18.944V358.485333c0-10.410667 8.106667-18.944 18.090666-18.944h199.68c12.032 0 23.893333-3.157333 34.645334-9.130666L696.064 145.066667m-381.44 118.869333H115.370667c-40.106667 0-72.618667 33.962667-72.618667 75.690667v340.650666c0 41.813333 32.597333 75.690667 72.533333 75.690667h199.509334c11.946667 0 23.893333 3.242667 34.56 9.130667l365.824 206.592c24.234667 13.653333 53.589333-4.608 53.589333-33.28V81.408c0-28.586667-29.354667-46.933333-53.589333-33.28L349.269333 254.805333a71.509333 71.509333 0 0 1-34.56 9.130667z m738.901333 256.426667l88.746667 145.493333a38.826667 38.826667 0 0 1-11.093333 52.309333 35.498667 35.498667 0 0 1-50.176-11.605333l-69.034667-113.237333a8.96 8.96 0 0 0-15.36 0l-68.864 113.237333a35.498667 35.498667 0 0 1-50.176 11.605333 38.826667 38.826667 0 0 1-11.093333-52.309333l88.746666-145.493333a19.797333 19.797333 0 0 0 0-20.309334l-88.746666-145.493333a38.826667 38.826667 0 0 1 11.093333-52.309333 35.498667 35.498667 0 0 1 50.176 11.605333l68.949333 113.322667a8.96 8.96 0 0 0 15.36 0l68.949334-113.237334a35.498667 35.498667 0 0 1 50.090666-11.605333 38.826667 38.826667 0 0 1 11.093334 52.309333l-88.746667 145.493334a19.626667 19.626667 0 0 0 0 20.224z" fill="#ffffff" p-id="9129"></path></svg>', f = /* @__PURE__ */ t({
3
3
  __name: "index",
4
4
  setup(p) {
@@ -1,4 +1,4 @@
1
- import { d as c, c as e, o as n, w as t, m as o, n as l, u as s, p as r } from "./index-BIytD1H6.js";
1
+ import { d as c, c as e, o as n, w as t, m as o, n as l, u as s, p as r } from "./index-Bd9L4Npy.js";
2
2
  const i = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671003457871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25529" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M633.636571 0c0 96.256 80.018286 174.226286 178.761143 174.226286a181.394286 181.394286 0 0 0 88.722286-22.966857L1024 360.740571A173.494857 173.494857 0 0 0 934.034286 512c0 64.731429 36.205714 121.197714 89.965714 151.259429l-122.88 209.481142a181.394286 181.394286 0 0 0-88.722286-22.966857c-98.742857 0-178.761143 77.970286-178.761143 174.226286H390.363429c0-96.256-80.018286-174.226286-178.761143-174.226286-32.256 0-62.610286 8.338286-88.722286 22.966857L0 663.259429A173.494857 173.494857 0 0 0 89.965714 512c0-64.731429-36.205714-121.197714-89.965714-151.259429l122.88-209.481142c26.112 14.628571 56.466286 22.966857 88.722286 22.966857 98.742857 0 178.761143-77.970286 178.761143-174.226286h243.273142z m-61.952 73.142857H452.315429l-0.219429 0.585143a251.392 251.392 0 0 1-231.862857 173.494857l-8.630857 0.146286c-16.091429 0-31.890286-1.462857-47.396572-4.388572l-9.216-1.974857-59.830857 101.961143 6.144 6.729143c37.010286 41.691429 59.392 95.158857 61.586286 152.649143L163.108571 512c0 61.147429-22.747429 118.272-61.805714 162.377143l-6.144 6.582857 59.904 101.961143 9.142857-1.901714c11.702857-2.194286 23.405714-3.584 35.401143-4.096l11.995429-0.292572c109.421714 0 202.898286 68.608 237.494857 164.790857l3.218286 9.435429h119.369142l0.219429-0.585143a251.392 251.392 0 0 1 231.862857-173.494857l8.630857-0.146286c16.018286 0 31.890286 1.462857 47.323429 4.388572l9.289143 1.901714 59.757714-101.961143-6.070857-6.582857a244.443429 244.443429 0 0 1-61.659429-152.722286L860.891429 512c0-61.147429 22.747429-118.272 61.805714-162.377143l6.070857-6.582857-59.830857-102.034286-9.216 1.974857c-11.556571 2.194286-23.405714 3.584-35.328 4.096l-11.995429 0.292572A251.757714 251.757714 0 0 1 574.829714 82.651429L571.684571 73.142857zM329.142857 457.142857a54.857143 54.857143 0 1 1 0 109.714286 54.857143 54.857143 0 0 1 0-109.714286z m182.857143 0a54.857143 54.857143 0 1 1 0 109.714286 54.857143 54.857143 0 0 1 0-109.714286z m182.857143 0a54.857143 54.857143 0 1 1 0 109.714286 54.857143 54.857143 0 0 1 0-109.714286z" p-id="25530"></path></svg>', h = /* @__PURE__ */ c({
3
3
  __name: "index",
4
4
  setup(p) {
@@ -1,4 +1,4 @@
1
- import { d as o, c as t, o as n, w as e, m as l, n as r, u as s, p as i } from "./index-BIytD1H6.js";
1
+ import { d as o, c as t, o as n, w as e, m as l, n as r, u as s, p as i } from "./index-Bd9L4Npy.js";
2
2
  const p = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1669606138295" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2824" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M483.584 138.496a35.84 35.84 0 0 1 2.976 47.296l-2.976 3.392L150.56 522.24l333.024 333.056a35.84 35.84 0 0 1 2.976 47.296l-2.976 3.392a35.84 35.84 0 0 1-47.296 2.976l-3.392-2.976-358.4-358.4a35.84 35.84 0 0 1-2.976-47.296l2.976-3.392 358.4-358.4a35.84 35.84 0 0 1 50.688 0z m465.92 0a35.84 35.84 0 0 1 2.976 47.296l-2.976 3.392L616.48 522.24l333.024 333.056a35.84 35.84 0 0 1 2.976 47.296l-2.976 3.392a35.84 35.84 0 0 1-47.296 2.976l-3.392-2.976-358.4-358.4a35.84 35.84 0 0 1-2.976-47.296l2.976-3.392 358.4-358.4a35.84 35.84 0 0 1 50.688 0z" p-id="2825"></path></svg>', m = /* @__PURE__ */ o({
3
3
  __name: "index",
4
4
  setup(w) {
@@ -1,4 +1,4 @@
1
- import { d as n, c as t, o, w as e, m as i, n as r, u as a, p as c } from "./index-BIytD1H6.js";
1
+ import { d as n, c as t, o, w as e, m as i, n as r, u as a, p as c } from "./index-Bd9L4Npy.js";
2
2
  const p = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686978063490" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10548" data-spm-anchor-id="a313x.7781069.0.i6" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 160c181.344 0 352 117.344 512 352-160 234.656-330.656 352-512 352S160 746.656 0 512C160 277.344 330.656 160 512 160z m0 64c-144.256 0-285.28 88.96-423.04 273.44L78.272 512l1.504 2.112c137.696 188.8 278.624 281.888 422.816 285.76L512 800c144.256 0 285.28-88.96 423.04-273.44l10.656-14.592-1.472-2.08c-137.696-188.8-278.624-281.888-422.816-285.76L512 224z m0 96a192 192 0 1 1 0 384 192 192 0 0 1 0-384z m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256z" p-id="10549" data-spm-anchor-id="a313x.7781069.0.i5"></path></svg>', l = /* @__PURE__ */ n({
3
3
  __name: "index",
4
4
  setup(d) {
@@ -1,4 +1,4 @@
1
- import { d as g, r as s, c as v, o as D, w as x, a as n, b as y, t as c, u as r, e as C, D as V } from "./index-BIytD1H6.js";
1
+ import { d as g, r as s, c as v, o as D, w as x, a as n, b as y, t as c, u as r, e as C, D as V } from "./index-Bd9L4Npy.js";
2
2
  const b = {
3
3
  name: "deleteDialog"
4
4
  }, B = /* @__PURE__ */ g({
@@ -1,4 +1,4 @@
1
- import { d as t, c as o, o as a, w as e, m as r, n as i, u as n, p as l } from "./index-BIytD1H6.js";
1
+ import { d as t, c as o, o as a, w as e, m as r, n as i, u as n, p as l } from "./index-Bd9L4Npy.js";
2
2
  const p = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683342113706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16592" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M938.666667 150.954667V938.666667l-295.381334-59.093334-262.570666 52.522667L85.333333 873.045333V85.333333l295.381334 59.093334 262.570666-52.522667L938.666667 150.954667z m-787.712 14.378666V819.2l196.949333 39.381333V204.714667l-196.949333-39.381334z m459.52 0l-196.949334 39.381334v653.866666l196.949334-39.381333V165.333333z m65.621333 0V819.2l196.949333 39.381333V204.714667l-196.949333-39.381334z" p-id="16593"></path></svg>', d = /* @__PURE__ */ t({
3
3
  __name: "index",
4
4
  setup(w) {
@@ -1,4 +1,4 @@
1
- import { d as e, c as o, o as c, w as t, m as n, n as r, u as s, p as i } from "./index-BIytD1H6.js";
1
+ import { d as e, c as o, o as c, w as t, m as n, n as r, u as s, p as i } from "./index-Bd9L4Npy.js";
2
2
  const p = '<svg t="1686635384647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10145" width="200" height="200"><path d="M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448S64 759.424 64 512 264.576 64 512 64z m6.208 192C373.44 256 256.224 370.304 256 511.68 255.84 653.184 373.28 768 518.208 768c113.216 0 209.696-70.08 246.4-168.32a4.864 4.864 0 0 0-3.104-6.272l-35.392-11.84a5.184 5.184 0 0 0-3.808 0.192 4.8 4.8 0 0 0-2.528 2.688c-1.312 3.52-2.752 7.04-4.256 10.464-21.632 49.12-62.24 88.64-113.664 110.272a216.8 216.8 0 0 1-83.52 16.48 216.352 216.352 0 0 1-83.52-16.48c-51.776-21.76-92.736-61.792-114.24-111.68A204.288 204.288 0 0 1 303.584 512c0-28.352 5.696-55.776 16.864-81.6 21.536-49.856 62.464-89.856 114.24-111.648a216.992 216.992 0 0 1 83.52-16.448c29.12 0 57.152 5.472 83.52 16.448a212.864 212.864 0 0 1 85.632 64.064l-37.568 28.704a4.8 4.8 0 0 0 1.92 8.544l109.6 26.24c1.504 0.32 3.072 0 4.288-0.928a4.736 4.736 0 0 0 1.92-3.744L768 331.36c0-4.064-4.832-6.304-8.064-3.84l-35.2 26.88C675.872 292.64 599.456 256.192 518.208 256z" p-id="10146"></path></svg>', _ = /* @__PURE__ */ e({
3
3
  __name: "index",
4
4
  setup(l) {