Skip to content

Commit 2c27fb0

Browse files
kagolkagol
committed
docs: optimize features of action-menu/alert/anchor and so on
1 parent f231b59 commit 2c27fb0

File tree

10 files changed

+1235
-0
lines changed

10 files changed

+1235
-0
lines changed

‎examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,5 +148,150 @@ export default {
148148
},
149149
codeFiles: ['events.vue']
150150
}
151+
],
152+
features: [
153+
{
154+
id: 'options',
155+
name: '菜单配置',
156+
support: {
157+
value: true
158+
},
159+
description: '通过 options 属性配置菜单内容，label 定义节点的显示文本。',
160+
cloud: {
161+
value: true
162+
},
163+
apis: ['options', 'label'],
164+
demos: ['basic-usage']
165+
},
166+
{
167+
id: 'disabled',
168+
name: '禁用状态',
169+
support: {
170+
value: true
171+
},
172+
description: '通过 disabled 字段设置当前下拉选项是否为禁用状态。',
173+
cloud: {
174+
value: true
175+
},
176+
apis: ['disabled'],
177+
demos: ['disabled']
178+
},
179+
{
180+
id: 'icon',
181+
name: '图标配置',
182+
support: {
183+
value: true
184+
},
185+
description: '支持设置菜单项图标、下拉触发源图标，以及控制图标显示。',
186+
cloud: {
187+
value: true
188+
},
189+
apis: ['icon', 'suffix-icon', 'show-icon'],
190+
demos: ['icon']
191+
},
192+
{
193+
id: 'text-field',
194+
name: '文本映射',
195+
support: {
196+
value: true
197+
},
198+
description: '通过 text-field 属性设置菜单项文本的键值，默认为 label。',
199+
cloud: {
200+
value: true
201+
},
202+
apis: ['text-field'],
203+
demos: ['text-field']
204+
},
205+
{
206+
id: 'more-text',
207+
name: '下拉按钮文本',
208+
support: {
209+
value: true
210+
},
211+
description: '通过 more-text 属性设置下拉按钮文本，默认为"更多"。',
212+
cloud: {
213+
value: true
214+
},
215+
apis: ['more-text'],
216+
demos: ['more-text']
217+
},
218+
{
219+
id: 'spacing',
220+
name: '间距设置',
221+
support: {
222+
value: true
223+
},
224+
description: '通过 spacing 属性设置菜单按钮之间的间距，默认为 5px。',
225+
cloud: {
226+
value: true
227+
},
228+
apis: ['spacing'],
229+
demos: ['spacing']
230+
},
231+
{
232+
id: 'mode',
233+
name: '菜单模式',
234+
support: {
235+
value: true
236+
},
237+
description: '支持设置菜单模式以适配不同场景，如卡片模式等。',
238+
cloud: {
239+
value: true
240+
},
241+
apis: ['mode'],
242+
demos: ['card-mode']
243+
},
244+
{
245+
id: 'popper-class',
246+
name: '弹框样式',
247+
support: {
248+
value: true
249+
},
250+
description: '通过 popper-class 属性设置下拉面板的类名，支持自定义样式。',
251+
cloud: {
252+
value: true
253+
},
254+
apis: ['popper-class'],
255+
demos: ['popper-class']
256+
},
257+
{
258+
id: 'max-show-num',
259+
name: '显示个数限制',
260+
support: {
261+
value: true
262+
},
263+
description: '通过 max-show-num 属性设置最多显示菜单按钮的个数，默认为 2。',
264+
cloud: {
265+
value: true
266+
},
267+
apis: ['max-show-num'],
268+
demos: ['max-show-num']
269+
},
270+
{
271+
id: 'slot',
272+
name: '插槽功能',
273+
support: {
274+
value: true
275+
},
276+
description: '支持通过 item 插槽自定义下拉选项的 HTML 模板。',
277+
cloud: {
278+
value: true
279+
},
280+
apis: ['slot-item'],
281+
demos: ['slot-item']
282+
},
283+
{
284+
id: 'events',
285+
name: '事件处理',
286+
support: {
287+
value: true
288+
},
289+
description: '支持监听菜单项点击、下拉按钮点击、弹框显示状态变化等事件。',
290+
cloud: {
291+
value: true
292+
},
293+
apis: ['item-click', 'more-click', 'visible-change'],
294+
demos: ['events']
295+
}
151296
]
152297
}

‎examples/sites/demos/pc/app/alert/webdoc/alert.js

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,5 +154,138 @@ export default {
154154
},
155155
codeFiles: ['custom-class.vue']
156156
}
157+
],
158+
features: [
159+
{
160+
id: 'type',
161+
name: '类型',
162+
support: {
163+
value: true
164+
},
165+
description: '通过 type 属性设置不同的提示类型。',
166+
cloud: {
167+
value: true
168+
},
169+
apis: ['type'],
170+
demos: ['basic-usage']
171+
},
172+
{
173+
id: 'size',
174+
name: '尺寸模式',
175+
support: {
176+
value: true
177+
},
178+
description: '通过 size 设置不同的尺寸模式，可选值：normal（简单模式）、large（完整模式）。',
179+
cloud: {
180+
value: true
181+
},
182+
apis: ['size'],
183+
demos: ['size']
184+
},
185+
{
186+
id: 'title',
187+
name: '标题设置',
188+
support: {
189+
value: true
190+
},
191+
description: '当 size 为 large 时，通过 title 属性或 title 插槽自定义组件标题，通过 show-title 控制标题显示。',
192+
cloud: {
193+
value: true
194+
},
195+
apis: ['title', 'show-title'],
196+
demos: ['title']
197+
},
198+
{
199+
id: 'description',
200+
name: '内容设置',
201+
support: {
202+
value: true
203+
},
204+
description: '通过 description 属性或 description 插槽设置提示内容。',
205+
cloud: {
206+
value: true
207+
},
208+
apis: ['description'],
209+
demos: ['basic-usage']
210+
},
211+
{
212+
id: 'center',
213+
name: '内容居中',
214+
support: {
215+
value: true
216+
},
217+
description: '通过 center 属性设置内容显示居中。',
218+
cloud: {
219+
value: true
220+
},
221+
apis: ['center'],
222+
demos: ['center']
223+
},
224+
{
225+
id: 'icon',
226+
name: '图标设置',
227+
support: {
228+
value: true
229+
},
230+
description: '通过 icon 属性设置自定义图标，未设置时根据 type 自动使用对应图标。',
231+
cloud: {
232+
value: true
233+
},
234+
apis: ['icon'],
235+
demos: ['icon']
236+
},
237+
{
238+
id: 'show-icon',
239+
name: '图标显示控制',
240+
support: {
241+
value: true
242+
},
243+
description: '通过 show-icon 属性控制左侧图标是否显示。',
244+
cloud: {
245+
value: true
246+
},
247+
apis: ['show-icon'],
248+
demos: ['show-icon']
249+
},
250+
{
251+
id: 'closable',
252+
name: '关闭功能',
253+
support: {
254+
value: true
255+
},
256+
description:
257+
'通过 closable 属性启用内置关闭图标，通过 close-text 设置关闭按钮文本，支持通过 close 插槽自定义关闭按钮。',
258+
cloud: {
259+
value: true
260+
},
261+
apis: ['closable', 'close-text'],
262+
demos: ['custom-close']
263+
},
264+
{
265+
id: 'custom-class',
266+
name: '自定义类名',
267+
support: {
268+
value: true
269+
},
270+
description: '通过 custom-class 设置自定义类名。',
271+
cloud: {
272+
value: true
273+
},
274+
apis: ['custom-class'],
275+
demos: ['custom-class']
276+
},
277+
{
278+
id: 'slot',
279+
name: '插槽功能',
280+
support: {
281+
value: true
282+
},
283+
description: '支持通过默认插槽自定义交互操作区域，通过 title 插槽自定义标题，通过 close 插槽自定义关闭按钮。',
284+
cloud: {
285+
value: true
286+
},
287+
apis: ['slot-default', 'slot-title', 'slot-close'],
288+
demos: ['slot-default', 'custom-close']
289+
}
157290
]
158291
}

‎examples/sites/demos/pc/app/anchor/webdoc/anchor.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,85 @@ export default {
5454
},
5555
codeFiles: ['change.vue']
5656
}
57+
],
58+
features: [
59+
{
60+
id: 'links',
61+
name: '导航数据',
62+
support: {
63+
value: true
64+
},
65+
description: '通过 links 属性设置导航数据。',
66+
cloud: {
67+
value: true
68+
},
69+
apis: ['links'],
70+
demos: ['basic-usage']
71+
},
72+
{
73+
id: 'type',
74+
name: '类型设置',
75+
support: {
76+
value: true
77+
},
78+
description: '通过 type 属性设置导航类型。',
79+
cloud: {
80+
value: true
81+
},
82+
apis: ['type'],
83+
demos: ['basic-usage']
84+
},
85+
{
86+
id: 'is-affix',
87+
name: '固定模式',
88+
support: {
89+
value: true
90+
},
91+
description: '通过 is-affix 属性设置固定定位，使导航不随页面滚动。',
92+
cloud: {
93+
value: true
94+
},
95+
apis: ['is-affix'],
96+
demos: ['is-affix']
97+
},
98+
{
99+
id: 'container',
100+
name: '滚动容器',
101+
support: {
102+
value: true
103+
},
104+
description: '通过 container-id 设置滚动容器，实现指定容器内的滚动效果。',
105+
cloud: {
106+
value: true
107+
},
108+
apis: ['container-id'],
109+
demos: ['set-container']
110+
},
111+
{
112+
id: 'mark-class',
113+
name: '高亮样式',
114+
support: {
115+
value: true
116+
},
117+
description: '通过 mark-class 设置自定义类名，用于高亮显示导航的目标元素。',
118+
cloud: {
119+
value: true
120+
},
121+
apis: ['mark-class'],
122+
demos: ['set-container']
123+
},
124+
{
125+
id: 'events',
126+
name: '事件处理',
127+
support: {
128+
value: true
129+
},
130+
description: '支持监听锚点点击事件（link-click）和锚点改变事件（change）。',
131+
cloud: {
132+
value: true
133+
},
134+
apis: ['link-click', 'change'],
135+
demos: ['set-container', 'change']
136+
}
57137
]
58138
}

0 commit comments

Comments
 (0)