Skip to content

Commit ae5066a

Browse files
kagolkagol
authored
docs: optimize features of dialog-select/divider/drawer and so on (#3145)
1 parent 3b7c40c commit ae5066a

File tree

10 files changed

+845
-0
lines changed

10 files changed

+845
-0
lines changed

‎examples/sites/demos/pc/app/dialog-select/webdoc/dialog-select.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,85 @@ export default {
7474
},
7575
codeFiles: ['set-selection.vue']
7676
}
77+
],
78+
features: [
79+
{
80+
id: 'auto-lookup',
81+
name: '数据反查回显',
82+
support: {
83+
value: true
84+
},
85+
description: '通过 auto-lookup、lookup-method 属性和 change 事件设置初始化时数据的反查回显功能。',
86+
cloud: {
87+
value: true
88+
},
89+
apis: ['auto-lookup', 'lookup-method'],
90+
demos: ['nest-grid-multi', 'nest-grid-single', 'nest-tree-multi', 'nest-tree-single']
91+
},
92+
{
93+
id: 'grid-multi',
94+
name: '表格多选',
95+
support: {
96+
value: true
97+
},
98+
description: '表格多选场景需要设置 popselector 为 grid，multi 为 true，checkRowKeys 设置默认选中数据。',
99+
cloud: {
100+
value: true
101+
},
102+
apis: ['popselector', 'multi', 'checkRowKeys'],
103+
demos: ['nest-grid-multi']
104+
},
105+
{
106+
id: 'grid-single',
107+
name: '表格单选',
108+
support: {
109+
value: true
110+
},
111+
description: '表格单选场景需要设置 popselector 为 grid，multi 为 false，checkRowKey 设置默认选中数据。',
112+
cloud: {
113+
value: true
114+
},
115+
apis: ['popselector', 'multi', 'checkRowKey'],
116+
demos: ['nest-grid-single']
117+
},
118+
{
119+
id: 'tree-multi',
120+
name: '树多选',
121+
support: {
122+
value: true
123+
},
124+
description: '树多选场景需要设置 popselector 为 tree，multi 为 true，defaultCheckedKeys 设置默认选中数据。',
125+
cloud: {
126+
value: true
127+
},
128+
apis: ['popselector', 'multi', 'defaultCheckedKeys'],
129+
demos: ['nest-tree-multi']
130+
},
131+
{
132+
id: 'tree-single',
133+
name: '树单选',
134+
support: {
135+
value: true
136+
},
137+
description: '树单选场景需要设置 popselector 为 tree，multi 为 false，defaultCheckedKeys 设置默认选中数据。',
138+
cloud: {
139+
value: true
140+
},
141+
apis: ['popselector', 'multi', 'defaultCheckedKeys'],
142+
demos: ['nest-tree-single']
143+
},
144+
{
145+
id: 'set-selection',
146+
name: '设置多选状态',
147+
support: {
148+
value: true
149+
},
150+
description: '通过 setSelection 方法设置多选状态。',
151+
cloud: {
152+
value: true
153+
},
154+
apis: ['setSelection'],
155+
demos: ['set-selection']
156+
}
77157
]
78158
}

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,5 +82,72 @@ export default {
8282
},
8383
codeFiles: ['status.vue']
8484
}
85+
],
86+
features: [
87+
{
88+
id: 'vertical',
89+
name: '垂直分隔线',
90+
support: {
91+
value: true
92+
},
93+
description: '通过设置 vertical 属性为 true 可以设置分隔线的方向。',
94+
cloud: {
95+
value: true
96+
},
97+
apis: ['vertical'],
98+
demos: ['direction']
99+
},
100+
{
101+
id: 'text-position',
102+
name: '分隔线文案位置',
103+
support: {
104+
value: true
105+
},
106+
description: '通过 text-position 属性设置分隔线文案的位置，offset 属性设置左右偏移量。',
107+
cloud: {
108+
value: true
109+
},
110+
apis: ['text-position', 'offset'],
111+
demos: ['content-position']
112+
},
113+
{
114+
id: 'custom-style',
115+
name: '自定义样式',
116+
support: {
117+
value: true
118+
},
119+
description: '通过 line-color、content-background-color、content-color、height、margin 等属性自定义分隔线样式。',
120+
cloud: {
121+
value: true
122+
},
123+
apis: ['line-color', 'content-background-color', 'content-color', 'height', 'margin'],
124+
demos: ['custom-style']
125+
},
126+
{
127+
id: 'type',
128+
name: '分隔线类型',
129+
support: {
130+
value: true
131+
},
132+
description: '通过 type 设置分割线显示类型，可选值为 solid、dashed、dotted。',
133+
cloud: {
134+
value: true
135+
},
136+
apis: ['type'],
137+
demos: ['divider-type']
138+
},
139+
{
140+
id: 'status',
141+
name: '分隔线状态',
142+
support: {
143+
value: true
144+
},
145+
description: '通过 status 属性设置分割线显示状态颜色。',
146+
cloud: {
147+
value: true
148+
},
149+
apis: ['status'],
150+
demos: ['status']
151+
}
85152
]
86153
}

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

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,5 +225,190 @@ export default {
225225
},
226226
codeFiles: ['events.vue']
227227
}
228+
],
229+
features: [
230+
{
231+
id: 'service',
232+
name: '方法调用',
233+
support: {
234+
value: true
235+
},
236+
description: '通过 Drawer.service 方法可配置并打开抽屉，方法返回组件实例，可调用其 close 方法关闭组件。',
237+
cloud: {
238+
value: true
239+
},
240+
apis: ['Drawer.service'],
241+
demos: ['use-through-method']
242+
},
243+
{
244+
id: 'placement',
245+
name: '抽屉方向',
246+
support: {
247+
value: true
248+
},
249+
description: '通过 placement 属性设置抽屉的方向，可选值有 left、right、top、bottom，默认值为 right。',
250+
cloud: {
251+
value: true
252+
},
253+
apis: ['placement'],
254+
demos: ['placement']
255+
},
256+
{
257+
id: 'tips-props',
258+
name: '帮助提示',
259+
support: {
260+
value: true
261+
},
262+
description: '通过 tips-props 属性可自定义标题帮助提示信息。',
263+
cloud: {
264+
value: true
265+
},
266+
apis: ['tips-props'],
267+
demos: ['tips-props']
268+
},
269+
{
270+
id: 'width',
271+
name: '抽屉宽度',
272+
support: {
273+
value: true
274+
},
275+
description: '通过 width 属性设置抽屉的宽度，默认值为 500px。',
276+
cloud: {
277+
value: true
278+
},
279+
apis: ['width'],
280+
demos: ['width']
281+
},
282+
{
283+
id: 'dragable',
284+
name: '宽高可拖拽',
285+
support: {
286+
value: true
287+
},
288+
description: '通过 dragable 属性开启抽屉宽度/高度拖拽功能。当抽屉位于左右两侧时可拖拽宽度，上下两侧可拖拽高度。',
289+
cloud: {
290+
value: true
291+
},
292+
apis: ['dragable'],
293+
demos: ['dragable']
294+
},
295+
{
296+
id: 'mask',
297+
name: '遮罩层显示隐藏',
298+
support: {
299+
value: true
300+
},
301+
description: '通过 mask 属性可以控制遮罩层显示隐藏，默认值为 true。',
302+
cloud: {
303+
value: true
304+
},
305+
apis: ['mask'],
306+
demos: ['mask']
307+
},
308+
{
309+
id: 'before-close',
310+
name: '拦截抽屉关闭',
311+
support: {
312+
value: true
313+
},
314+
description:
315+
'通过 before-close 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值，则拦截弹窗关闭；否则不拦截。',
316+
cloud: {
317+
value: true
318+
},
319+
apis: ['before-close'],
320+
demos: ['before-close']
321+
},
322+
{
323+
id: 'mask-closable',
324+
name: '点击遮罩层关闭',
325+
support: {
326+
value: true
327+
},
328+
description: '通过 mask-closable 属性控制是否可以通过点击遮罩层关闭抽屉，默认值为 true。',
329+
cloud: {
330+
value: true
331+
},
332+
apis: ['mask-closable'],
333+
demos: ['mask-closable']
334+
},
335+
{
336+
id: 'show-close',
337+
name: '关闭图标显示',
338+
support: {
339+
value: true
340+
},
341+
description: '通过 show-close 控制是否显示关闭图标，默认值为 true。',
342+
cloud: {
343+
value: true
344+
},
345+
apis: ['show-close'],
346+
demos: ['show-close']
347+
},
348+
{
349+
id: 'show-header',
350+
name: '头部显示',
351+
support: {
352+
value: true
353+
},
354+
description: '通过 show-header 控制是否显示头部，默认值为 true。',
355+
cloud: {
356+
value: true
357+
},
358+
apis: ['show-header'],
359+
demos: ['show-header']
360+
},
361+
{
362+
id: 'show-footer',
363+
name: '底部显示',
364+
support: {
365+
value: true
366+
},
367+
description: '通过 show-footer 控制是否显示底部，默认值为 false。',
368+
cloud: {
369+
value: true
370+
},
371+
apis: ['show-footer'],
372+
demos: ['show-footer']
373+
},
374+
{
375+
id: 'z-index',
376+
name: '自定义堆叠顺序',
377+
support: {
378+
value: true
379+
},
380+
description: '通过 z-index 属性设置自定义堆叠顺序。',
381+
cloud: {
382+
value: true
383+
},
384+
apis: ['z-index'],
385+
demos: ['z-index']
386+
},
387+
{
388+
id: 'slots',
389+
name: '插槽',
390+
support: {
391+
value: true
392+
},
393+
description: '支持 header、header-right、footer 等插槽自定义内容。',
394+
cloud: {
395+
value: true
396+
},
397+
apis: ['header-slot', 'header-right-slot', 'footer-slot'],
398+
demos: ['header-slot', 'header-right-slot', 'footer-slot']
399+
},
400+
{
401+
id: 'events',
402+
name: '事件',
403+
support: {
404+
value: true
405+
},
406+
description: '支持 open、confirm、close 等事件。',
407+
cloud: {
408+
value: true
409+
},
410+
apis: ['open', 'confirm', 'close'],
411+
demos: ['events']
412+
}
228413
]
229414
}

‎examples/sites/demos/pc/app/drop-times/webdoc/drop-times.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,46 @@ export default {
4242
},
4343
codeFiles: ['size.vue']
4444
}
45+
],
46+
features: [
47+
{
48+
id: 'time-range',
49+
name: '时间区间',
50+
support: {
51+
value: true
52+
},
53+
description: '通过 start 设置区间的起始时间，默认为 0，end 设置区间的结束时间，默认为 24 * 60。',
54+
cloud: {
55+
value: true
56+
},
57+
apis: ['start', 'end'],
58+
demos: ['start-end-step']
59+
},
60+
{
61+
id: 'step',
62+
name: '步长设置',
63+
support: {
64+
value: true
65+
},
66+
description: '通过 step 设置间隔的步长，默认为 15。',
67+
cloud: {
68+
value: true
69+
},
70+
apis: ['step'],
71+
demos: ['start-end-step']
72+
},
73+
{
74+
id: 'size',
75+
name: '尺寸',
76+
support: {
77+
value: true
78+
},
79+
description: '可设置为 medium、small、mini。',
80+
cloud: {
81+
value: true
82+
},
83+
apis: ['size'],
84+
demos: ['size']
85+
}
4586
]
4687
}

0 commit comments

Comments
 (0)