@das-fed/web-components 7.0.2-beta.7 → 7.0.2-beta.8

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 (54) hide show
  1. package/README.md +318 -75
  2. package/{index-4w8mVWU3.js → index-29m5VbEs.js} +1 -1
  3. package/{index-BnHkSFL5.js → index-2SOlpxUf.js} +1 -1
  4. package/{index-DEpP7Tpa.js → index-7u1F-v41.js} +1 -1
  5. package/{index-DVg_t4TN.js → index-BCwz9nZo.js} +1 -1
  6. package/{index-BkAQKFFw.js → index-BMrjNDST.js} +1 -1
  7. package/{index-CVYUdZZD.js → index-BT6Ra3Df.js} +1 -1
  8. package/{index-DlxCjuMX.js → index-BUSQq2r9.js} +1 -1
  9. package/{index-BHSe0UW2.js → index-BUY01IE8.js} +1 -1
  10. package/{index-DvAZypBt.js → index-BUiqpiAF.js} +1 -1
  11. package/{index-BZoslzj5.js → index-B_C3ZCSZ.js} +1 -1
  12. package/{index-CjljLd68.js → index-BhlUePkq.js} +1 -1
  13. package/{index-B3WGxMyh.js → index-BlUhA9_M.js} +48 -48
  14. package/{index-C9YzODcw.js → index-BrOQEipe.js} +1 -1
  15. package/{index-BvdzuL3A.js → index-BsfCWTDn.js} +1 -1
  16. package/{index-BebIp2A9.js → index-Bv2g8OzH.js} +1 -1
  17. package/{index-BNanjjQw.js → index-BwodL19G.js} +1 -1
  18. package/{index-eb-0a5_I.js → index-BykOc-4n.js} +1 -1
  19. package/{index-DfJPGAPm.js → index-C4tXEuOH.js} +1 -1
  20. package/{index-DiIWBbGX.js → index-CBIb-PPR.js} +4830 -4819
  21. package/{index-BMhuvK1s.js → index-CLC8N62W.js} +1 -1
  22. package/{index-CWSOErkO.js → index-CQNVaboh.js} +1 -1
  23. package/{index-Dchn6caQ.js → index-CVyc4Q1w.js} +1 -1
  24. package/{index-C928Ma6y.js → index-CaSF5km7.js} +1 -1
  25. package/{index-D0fghyzP.js → index-CbYHT9o_.js} +1 -1
  26. package/{index-RngNSOFU.js → index-CezSu2nL.js} +1 -1
  27. package/{index-C1PnKzO9.js → index-Cln2AX7S.js} +1 -1
  28. package/{index-CctFz-GP.js → index-CoHaIAUp.js} +1 -1
  29. package/{index-ChlWewql.js → index-CuFs8dB7.js} +1 -1
  30. package/{index-CMJI-EX5.js → index-CyCyZKbw.js} +1 -1
  31. package/{index-BgSsLMah.js → index-DB2ytevP.js} +1 -1
  32. package/{index-Clzbk-Db.js → index-DCsdvhxP.js} +1 -1
  33. package/{index-Bm-uubY9.js → index-DVlBFoUA.js} +1 -1
  34. package/{index-UGFMiimH.js → index-DfLu0d76.js} +1 -1
  35. package/{index-CqIJ07WA.js → index-DlaN1eHF.js} +1 -1
  36. package/{index-D2OsFj-L.js → index-DmkCYUxr.js} +1 -1
  37. package/{index-CzuRKZxA.js → index-Dql-ab38.js} +1 -1
  38. package/{index-CzNh5Z5x.js → index-DuS-5c7Z.js} +1 -1
  39. package/{index-D4xsiLA3.js → index-DvYgYwvo.js} +1 -1
  40. package/{index-DPLzVPg8.js → index-DwRYxq9-.js} +1 -1
  41. package/{index-CYZ7ILlC.js → index-KoXyr69g.js} +1 -1
  42. package/{index-DzyIOrZm.js → index-Mr6PEkVY.js} +1 -1
  43. package/{index-C_DXEjvE.js → index-R5X5FcGR.js} +1 -1
  44. package/{index-CB8e1gEy.js → index-XyMxOj1j.js} +1 -1
  45. package/{index-pImsU-kf.js → index-lCmtpxcT.js} +1 -1
  46. package/{index-hEsxmVUK.js → index-motmsDM-.js} +1 -1
  47. package/{index-CV7zhJ8x.js → index-nBtFeahS.js} +1 -1
  48. package/{index-CCEDPLnc.js → index-nFbx4XnK.js} +1 -1
  49. package/{index-ChSXmBTv.js → index-o5zFyuRb.js} +1 -1
  50. package/{index-Z46yugXh.js → index-qRU7lH6h.js} +1 -1
  51. package/{index-oIKryPlJ.js → index-zIdLTouO.js} +1 -1
  52. package/index.js +2 -2
  53. package/package.json +6 -6
  54. package/style.css +1 -1
package/README.md CHANGED
@@ -1,37 +1,62 @@
1
- # das-web-components 组件库说明文档
1
+ ## das-ce-tabs 使用方法
2
2
 
3
- ## 一、简介
3
+ 1. **引入 `das-ce-tabs` 组件并注册**。
4
4
 
5
- das-web-components 是 DAS 前端体系的 Web 组件库，基于 Web Components 技术，支持 Vue、React、原生 JS 等多种框架集成，适用于企业级中后台系统的统一架构和快速开发。
5
+ ```js
6
+ import { createCeTabs } from '@das-fed/web-components'
7
+ createCeTabs('das-ce-tabs')
8
+ ```
9
+
10
+ 2. **定义 `options` 和 `modelValue` 属性**。
6
11
 
7
- ---
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
+ ```
8
34
 
9
- ## 二、核心组件与用法
35
+ 定义实例如下：
10
36
 
11
- ### 1. das-ce-tabs 页签组件
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
+ ```
12
46
 
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
- - 主要方法与类型定义见下方代码示例。
47
+ 3. **监听组件事件**
26
48
 
27
- #### 用法示例
49
+ 使用组件时，监听到的事件对象为 `customEvent` ，该对象中的 `detail` 属性是个数组，数组元素为组件事件的返回值。 `das-ce-tabs` 组件暴露了以下事件：
50
+
51
+ 1. `update:modelValue`：当 `modelValue` 属性变化时触发，要实现切换页签时 `activeKey` 属性自动变化，需要监听该事件。
28
52
 
29
53
  ```js
30
54
  import { ref } from 'vue'
31
- import { createCeTabs } from '@das-fed/web-components'
55
+ import { createCeTabs } from '@das-fed/web-/components'
32
56
  createCeTabs('das-ce-tabs')
33
57
 
34
58
  const activeKey = ref(1)
59
+
35
60
  const options = ref([
36
61
  { key: 1, tab: 'Tab 1' },
37
62
  { key: 2, tab: 'Tab 2', disabled: true },
@@ -39,66 +64,296 @@ const options = ref([
39
64
  ])
40
65
  ```
41
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'
128
+ createCeTabs('das-ce-tabs')
129
+
130
+ const activeKey = ref(1)
131
+
132
+ const options = ref([
133
+ { key: 1, tab: 'Tab 1' },
134
+ { key: 2, tab: 'Tab 2', disabled: true },
135
+ { key: 3, tab: 'Tab 3' },
136
+ ])
137
+
138
+ const menuClick = (customEvent) => {
139
+ console.log('当前选中操作项：', customEvent.detail[0], '当前页签对象：', customEvent.detail[1])
140
+ }
141
+ ```
142
+
42
143
  ```html
43
144
  <das-ce-tabs :modelValue="activeKey" :options="options" @menuClick="menuClick"></das-ce-tabs>
44
145
  ```
45
146
 
46
- #### 事件与类型
147
+ 操作项定义如下：
47
148
 
48
149
  ```js
49
150
  interface MenuListType {
151
+ /** 唯一标识 */
50
152
  key: string | number
153
+ /** 操作项名称 */
51
154
  name: string
155
+ /** 是否隐藏 */
52
156
  hidden?: boolean | Function
157
+ /** 是否禁用 */
53
158
  disabled?: boolean | Function
54
159
  }
55
160
  ```
56
161
 
57
- ---
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
+ ```
58
205
 
59
- ### 2. das-ce-nav 顶部导航栏组件
206
+ ```html
207
+ <das-ce-tabs :modelValue="activeKey" :options="options" @toggleFullScreen="toggleFullScreen"></das-ce-tabs>
208
+ ```
60
209
 
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
- - 详细属性与事件见下方表格。
210
+ ## das-ce-nav 使用方法
70
211
 
71
- #### 用法示例
212
+ ### 1. **引入 `das-ce-nav` 组件并注册**。
72
213
 
73
214
  ```js
74
215
  import { createCeNav } from '@das-fed/web-components'
75
216
  createCeNav('das-ce-nav')
76
217
  ```
77
218
 
219
+ #### ① 在 vue 文件中使用
220
+
78
221
  ```html
79
222
  <das-ce-nav
80
223
  @update:modelValue="(event) => (activeKey = event.detail[0])"
81
224
  :modelValue="activeKey"
225
+ @handleTabClick="handleTabClick"
226
+ @handleTabDelete="handleTabDelete"
82
227
  :config="config"
83
228
  :logoUrl="logoUrl"
84
229
  :searchConfig="searchConfig"
230
+ @searchToPage="searchToPage"
231
+ @clearSearchList="clearSearchList"
232
+ @deleteSearchItem="deleteSearchItem"
85
233
  :userInfoConfig="userInfoConfig"
234
+ @userCommandHandle="userCommandHandle"
86
235
  :projectTreeConfig="projectTreeConfig"
236
+ @changeTreeHandle="changeTreeHandle"
87
237
  :innerPagesConfig="innerPagesConfig"
238
+ @changeInnerPage="changeInnerPage"
88
239
  ></das-ce-nav>
89
240
  ```
90
241
 
91
- #### 主要属性与事件
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) | - | 否 |
92
355
 
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 | 否 |
356
+ ### 3. **事件**
102
357
 
103
358
  | 事件 | 说明 | 回调参数 |
104
359
  | ----------------- | --------------------------- | ------------------------------- |
@@ -111,29 +366,17 @@ createCeNav('das-ce-nav')
111
366
  | userCommandHandle | 用户信息-操作项 | function(value:any) |
112
367
  | changeTreeHandle | 项目树-是否确定切换选中项目 | function(status:bool,value:any) |
113
368
 
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`：切换菜单折叠状态。
369
+ ## das-ce-menu 使用方法
129
370
 
130
- #### 用法示例
371
+ 1. **引入 `das-ce-menu` 组件并注册**。
131
372
 
132
373
  ```js
133
374
  import { createCeMenu } from '@das-fed/web-components'
134
375
  createCeMenu('das-ce-menu')
135
376
  ```
136
377
 
378
+ 2. **使用**。
379
+
137
380
  ```html
138
381
  <das-ce-menu
139
382
  :data="menuData"
@@ -145,23 +388,23 @@ createCeMenu('das-ce-menu')
145
388
  ></das-ce-menu>
146
389
  ```
147
390
 
148
- ---
149
-
150
- ## 三、组件属性与类型定义
151
-
152
- 详细属性、类型定义和事件请参考源码及注释。
153
-
154
- ---
391
+ 3. **属性**
155
392
 
156
- ## 四、常见问题与扩展
393
+ | 属性名 | 描述 | 类型 | 默认值 | 是否必填 |
394
+ | ---------- | ------------------ | ------------- | ------ | -------- |
395
+ | modelValue | 当前选中菜单 | string/number | - | 是 |
396
+ | data | 导航栏配置 | array | [] | 是 |
397
+ | collapse | 菜单栏初始折叠状态 | boolean | false | 否 |
157
398
 
158
- - 支持在 Vue、React、原生 JS 项目中直接注册和使用。
159
- - 组件事件均通过 `customEvent.detail` 获取返回值。
160
- - 支持自定义插槽、动态数据、复杂交互。
161
- - 推荐结合 DAS Web 主应用统一布局和微前端架构使用。
399
+ 4. **事件**
162
400
 
163
- ---
401
+ | 事件 | 描述 | 回调参数 |
402
+ | --------------- | ---------------- | ------------------------------------------- |
403
+ | change | 选中项改变触发 | function(value: string/number, option: any) |
404
+ | collapse-change | 折叠状态改变触发 | function(value:boolean) |
164
405
 
165
- ## 五、贡献与维护
406
+ 5. **方法**
166
407
 
167
- 如需详细 API 说明、组件开发指南，请参考源码及注释。
408
+ | 方法 | 描述 | 参数 |
409
+ | -------------- | ------------ | ------------------------------ |
410
+ | changeCollapse | 切换折叠状态 | 接收一个布尔类型参数：折叠状态 |
package/{index-4w8mVWU3.js → index-29m5VbEs.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as n, c as t, o, w as e, m as i, n as r, u as s, p as h } from "./index-DiIWBbGX.js";
1
+ import { d as n, c as t, o, w as e, m as i, n as r, u as s, p as h } from "./index-CBIb-PPR.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="1677654702624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8626" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M256 192v64H128v192h768V256h-128V192h128a64 64 0 0 1 63.84 59.2L960 256v576a64 64 0 0 1-59.2 63.84L896 896H128a64 64 0 0 1-63.84-59.2L64 832V256a64 64 0 0 1 59.2-63.84L128 192h128z m640 320H128v320h768V512zM352 128a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0V160a32 32 0 0 1 32-32z m320 0a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0V160a32 32 0 0 1 32-32z m-96 64v64h-128V192h128z" p-id="8627"></path></svg>', m = /* @__PURE__ */ n({
3
3
  __name: "index",
4
4
  setup(c) {
package/{index-BnHkSFL5.js → index-2SOlpxUf.js} RENAMED
@@ -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-DiIWBbGX.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-CBIb-PPR.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) {
package/{index-DEpP7Tpa.js → index-7u1F-v41.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as n, c as t, o, w as e, m as a, n as h, u as c, p as r } from "./index-DiIWBbGX.js";
1
+ import { d as n, c as t, o, w as e, m as a, n as h, u as c, p as r } from "./index-CBIb-PPR.js";
2
2
  const v = '<?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="1683342360836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17324" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M429.44 85.333333H145.578667C112.341333 85.333333 85.333333 112.384 85.333333 145.664v284.16c0 33.28 27.008 60.373333 60.245334 60.373333h283.861333c33.28 0 60.245333-27.050667 60.245333-60.373333v-284.16c0-33.28-27.008-60.330667-60.245333-60.330667z m0 344.490667H145.578667V145.749333s0.128-0.085333 0-0.085333h283.733333s0.128 0.085333 0.128 0v284.16c0.085333 0 0 0 0 0zM878.421333 85.333333h-283.861333c-33.28 0-60.245333 27.050667-60.245333 60.330667v284.16c0 33.28 27.008 60.373333 60.245333 60.373333h283.861333c33.237333 0 60.245333-27.050667 60.245334-60.373333v-284.16C938.666667 112.384 911.658667 85.333333 878.421333 85.333333z m0 344.490667h-283.861333V145.749333s0.085333-0.085333 0-0.085333h283.733333s0.128 0.085333 0.128 0v284.16s-0.128 0 0 0z m-448.981333 103.978667H145.578667c-33.237333 0-60.245333 27.050667-60.245334 60.373333v284.16C85.333333 911.616 112.341333 938.666667 145.578667 938.666667h283.861333c33.28 0 60.245333-27.050667 60.245333-60.330667v-284.16c0-33.28-27.008-60.373333-60.245333-60.373333z m0 344.533333H145.578667v-284.074667s0.128-0.085333 0-0.085333h283.733333s0.128 0.085333 0.128 0v284.16c0.085333-0.085333 0 0 0 0z m448.981333-344.533333h-283.861333c-33.28 0-60.245333 27.050667-60.245333 60.373333v284.16c0 33.28 27.008 60.330667 60.245333 60.330667h283.861333c33.237333 0 60.245333-27.050667 60.245334-60.330667v-284.16c0-33.28-27.008-60.373333-60.245334-60.373333z m0 344.533333h-283.861333v-284.074667s0.085333-0.085333 0-0.085333h283.733333s0.128 0.085333 0.128 0v284.16c0-0.085333-0.128 0 0 0z" p-id="17325"></path></svg>', w = /* @__PURE__ */ n({
3
3
  __name: "index",
4
4
  setup(i) {
package/{index-DVg_t4TN.js → index-BCwz9nZo.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { r as s, s as z, f as C, e as c, d as U, g as A, h as O, i as R, o as $, j as m, w as v, b as x, u as n, k as j, l as V, a as k, t as T, D as M, _ as P } from "./index-DiIWBbGX.js";
1
+ import { r as s, s as z, f as C, e as c, d as U, g as A, h as O, i as R, o as $, j as m, w as v, b as x, u as n, k as j, l as V, a as k, t as T, D as M, _ as P } from "./index-CBIb-PPR.js";
2
2
  const q = (p) => (s(null), { saveKnow: async (o) => {
3
3
  var i;
4
4
  console.log("saveKnow", o);
package/{index-BkAQKFFw.js → index-BMrjNDST.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as t, c as n, o, w as e, m as r, n as i, u as a, p } from "./index-DiIWBbGX.js";
1
+ import { d as t, c as n, o, w as e, m as r, n as i, u as a, p } from "./index-CBIb-PPR.js";
2
2
  const w = '<?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="1671693368854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8996" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 128a32 32 0 0 1 32 32v704a32 32 0 0 1-64 0V160a32 32 0 0 1 32-32z m553.376 9.376a32 32 0 0 1 45.248 45.248L461.248 512l329.376 329.376a32 32 0 0 1-45.248 45.248l-352-352a32 32 0 0 1 0-45.248z" p-id="8997"></path></svg>', m = /* @__PURE__ */ t({
3
3
  __name: "index",
4
4
  setup(c) {
package/{index-CVYUdZZD.js → index-BT6Ra3Df.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as t, c as e, o, w as s, m as i, n as a, u as r, p as l } from "./index-DiIWBbGX.js";
1
+ import { d as t, c as e, o, w as s, m as i, n as a, u as r, p as l } from "./index-CBIb-PPR.js";
2
2
  const d = `<?xml version="1.0" encoding="UTF-8"?>\r
3
3
  <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\r
4
4
  <title>锁住</title>\r
package/{index-DlxCjuMX.js → index-BUSQq2r9.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as n, c as t, o, w as e, m as r, n as i, u as a, p as l } from "./index-DiIWBbGX.js";
1
+ import { d as n, c as t, o, w as e, m as r, n as i, u as a, p as l } from "./index-CBIb-PPR.js";
2
2
  const c = '<?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="1678428062298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9854" xmlns:xlink="http://www.w3.org/1999/xlink" 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 m0 64C299.936 128 128 299.936 128 512s171.936 384 384 384 384-171.936 384-384S724.064 128 512 128z m224.064 448a32 32 0 0 1 3.744 63.776l-3.744 0.224H365.696l73.792 73.28a32 32 0 0 1 2.816 42.24l-2.656 3.04a32 32 0 0 1-42.24 2.784l-3.008-2.624-128.896-128c-19.36-19.264-7.168-51.744 18.912-54.528L288.064 576h448z m-109.44-313.344l3.04 2.624 128.896 128c19.36 19.264 7.168 51.744-18.912 54.528L736 448H288a32 32 0 0 1-3.744-63.776L288 384h370.368l-73.792-73.28a32 32 0 0 1-2.816-42.24l2.656-3.04a32 32 0 0 1 42.24-2.784z" p-id="9855"></path></svg>', m = /* @__PURE__ */ n({
3
3
  __name: "index",
4
4
  setup(p) {
package/{index-BHSe0UW2.js → index-BUY01IE8.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as t, c as n, o, w as e, m as c, n as r, u as a, p as h } from "./index-DiIWBbGX.js";
1
+ import { d as t, c as n, o, w as e, m as c, n as r, u as a, p as h } from "./index-CBIb-PPR.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="1672130081972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="881" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M886.912 432.768c22.72 0 41.088 18.368 41.088 41.088v410.88a41.088 41.088 0 0 1-41.088 41.088h-410.88a41.088 41.088 0 0 1-41.088-41.088v-410.88c0-22.72 18.432-41.088 41.088-41.088z m-20.544 61.632H496.576v369.792h369.792V494.4z m-92.416-400.64c31.552 0 57.6 23.808 61.184 54.464l0.448 7.232-0.064 215.68h-61.632v-215.68H157.696v616.32l215.68-0.064v61.632h-215.68a61.632 61.632 0 0 1-61.248-54.4l-0.384-7.232v-616.32c0-31.552 23.808-57.6 54.4-61.184l7.232-0.384h616.32z m-92.48 462.272c17.024 0 30.848 13.76 30.848 30.784l-0.064 61.632h61.696a30.784 30.784 0 1 1 0 61.632h-61.696v61.632a30.784 30.784 0 1 1-61.568 0l-0.064-61.632h-61.568a30.784 30.784 0 0 1 0-61.632h61.568v-61.632c0-17.024 13.824-30.784 30.848-30.784z" p-id="882"></path></svg>', w = /* @__PURE__ */ t({
3
3
  __name: "index",
4
4
  setup(l) {
package/{index-DvAZypBt.js → index-BUiqpiAF.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as o, c as n, o as e, w as t, m as r, n as c, u as a, p as i } from "./index-DiIWBbGX.js";
1
+ import { d as o, c as n, o as e, w as t, m as r, n as c, u as a, p as i } from "./index-CBIb-PPR.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 class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 32A352 352 0 0 0 160 384c0 130.112 62.976 262.336 167.168 390.848a1256.768 1256.768 0 0 0 138.496 144.96l23.872 20.48 2.496 2.048a32 32 0 0 0 39.936 0l14.72-12.288a1256.768 1256.768 0 0 0 150.208-155.2C800.96 646.336 864 514.112 864 384A352 352 0 0 0 512 32z m0 64A288 288 0 0 1 800 384c0 112.576-57.024 232.32-152.832 350.528a1193.408 1193.408 0 0 1-107.136 115.2l-17.408 16.192-10.624 9.408-19.008-17.152a1193.408 1193.408 0 0 1-116.16-123.712C281.024 616.32 224 496.64 224 384A288 288 0 0 1 512 96zM512 224a160 160 0 1 0 0 320 160 160 0 0 0 0-320z m0 64a96 96 0 1 1 0 192 96 96 0 0 1 0-192z" /></svg>', d = /* @__PURE__ */ o({
3
3
  __name: "index",
4
4
  setup(l) {
package/{index-BZoslzj5.js → index-B_C3ZCSZ.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as e, c as n, o as a, w as t, m as c, n as r, u as o, p } from "./index-DiIWBbGX.js";
1
+ import { d as e, c as n, o as a, w as t, m as c, n as r, u as o, p } from "./index-CBIb-PPR.js";
2
2
  const i = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M527.36 230.4c-36.7616 0-66.56-29.7984-66.56-66.56s29.7984-66.56 66.56-66.56 66.56 29.7984 66.56 66.56-29.7984 66.56-66.56 66.56z m0 348.16c-36.7616 0-66.56-29.7984-66.56-66.56s29.7984-66.56 66.56-66.56 66.56 29.7984 66.56 66.56-29.7984 66.56-66.56 66.56z m0 348.16c-36.7616 0-66.56-29.7984-66.56-66.56s29.7984-66.56 66.56-66.56 66.56 29.7984 66.56 66.56-29.7984 66.56-66.56 66.56z" p-id="12510"></path></svg>', _ = /* @__PURE__ */ e({
3
3
  __name: "index",
4
4
  setup(m) {
package/{index-CjljLd68.js → index-BhlUePkq.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { d as n, c as t, o, w as e, m as r, n as i, u as s, p as l } from "./index-DiIWBbGX.js";
1
+ import { d as n, c as t, o, w as e, m as r, n as i, u as s, p as l } from "./index-CBIb-PPR.js";
2
2
  const c = '<?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="1672726479138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8805" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M928 398.4a32 32 0 0 1 31.776 28.256l0.224 3.744v384a96 96 0 0 1-90.368 95.84L864 910.4H160a96 96 0 0 1-95.84-90.368L64 814.4v-384a32 32 0 0 1 63.776-3.744L128 430.4v384a32 32 0 0 0 28.256 31.776L160 846.4h704a32 32 0 0 0 31.776-28.288L896 814.4v-384a32 32 0 0 1 32-32zM531.84 134.88l2.784 2.496 158.4 158.4a32 32 0 0 1-42.464 47.744l-2.784-2.496L544 237.216V718.4a32 32 0 0 1-64 0V237.216l-103.776 103.808a32 32 0 0 1-42.464 2.496l-2.784-2.496a32 32 0 0 1-2.496-42.464l2.496-2.784 158.4-158.4a32 32 0 0 1 42.464-2.496z" p-id="8806"></path></svg>', d = /* @__PURE__ */ n({
3
3
  __name: "index",
4
4
  setup(p) {