king-design-analyzer 2.2.1 → 2.2.2
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/components/dropdown.json +9 -0
- package/components/popover.json +23 -0
- package/components/select.json +9 -0
- package/components/spinner.json +5 -1
- package/components/tour.json +16 -0
- package/components/upload.json +16 -0
- package/components/virtuallist.json +9 -0
- package/dist/ast/index.js +3 -3
- package/dist/ast/index.mjs +1 -1
- package/dist/{chunk-LRTDTFFQ.mjs → chunk-BSCASJTV.mjs} +1 -1
- package/dist/{chunk-4WXOYU2N.js → chunk-HARQRI4F.js} +2 -2
- package/dist/{chunk-JNRGUR3O.js → chunk-XPHDD6XR.js} +0 -16
- package/dist/{chunk-IPJJMPOO.mjs → chunk-YRGYDK2I.mjs} +0 -16
- package/dist/full/index.js +4 -4
- package/dist/full/index.mjs +2 -2
- package/dist/index.js +6 -6
- package/dist/index.mjs +2 -2
- package/docs_for_llm/dropdown.doc.md +17 -0
- package/docs_for_llm/popover.doc.md +34 -0
- package/docs_for_llm/select.doc.md +15 -0
- package/docs_for_llm/tour.doc.md +24 -0
- package/docs_for_llm/upload.doc.md +21 -0
- package/docs_for_llm/virtuallist.doc.md +14 -0
- package/package.json +1 -1
package/components/dropdown.json
CHANGED
|
@@ -173,6 +173,15 @@
|
|
|
173
173
|
"handlerExample": "const handlePositioned = (feedback: Feedback) => {\n console.log('最终位置', feedback.placement);\n};"
|
|
174
174
|
}
|
|
175
175
|
],
|
|
176
|
+
"slots": [
|
|
177
|
+
{
|
|
178
|
+
"name": "menu",
|
|
179
|
+
"description": "自定义下拉菜单内容,通常放置 DropdownMenu 和 DropdownItem。",
|
|
180
|
+
"bindingType": "none",
|
|
181
|
+
"vueTemplate": "<template #menu>...</template>",
|
|
182
|
+
"usageExample": "<Dropdown>\n <Button>更多操作</Button>\n <template #menu>\n <DropdownMenu>\n <DropdownItem>查看详情</DropdownItem>\n </DropdownMenu>\n </template>\n</Dropdown>"
|
|
183
|
+
}
|
|
184
|
+
],
|
|
176
185
|
"methods": [
|
|
177
186
|
{
|
|
178
187
|
"name": "show",
|
package/components/popover.json
CHANGED
|
@@ -274,6 +274,29 @@
|
|
|
274
274
|
"handlerExample": "const handleCancel = () => {\n console.log('已取消');\n};"
|
|
275
275
|
}
|
|
276
276
|
],
|
|
277
|
+
"slots": [
|
|
278
|
+
{
|
|
279
|
+
"name": "title",
|
|
280
|
+
"description": "自定义确认提示标题区域内容。",
|
|
281
|
+
"bindingType": "none",
|
|
282
|
+
"vueTemplate": "<template #title>...</template>",
|
|
283
|
+
"usageExample": "<Popover>\n <template #title>删除实例</template>\n <Button>删除</Button>\n</Popover>"
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"name": "content",
|
|
287
|
+
"description": "自定义确认提示主体内容。",
|
|
288
|
+
"bindingType": "none",
|
|
289
|
+
"vueTemplate": "<template #content>...</template>",
|
|
290
|
+
"usageExample": "<Popover>\n <template #content>\n 删除后将无法恢复,请确认操作。\n </template>\n <Button>删除</Button>\n</Popover>"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"name": "footer",
|
|
294
|
+
"description": "自定义底部操作区内容,可覆盖默认的确认/取消按钮。",
|
|
295
|
+
"bindingType": "none",
|
|
296
|
+
"vueTemplate": "<template #footer>...</template>",
|
|
297
|
+
"usageExample": "<Popover>\n <template #footer>\n <Button size=\"small\">稍后处理</Button>\n <Button type=\"danger\" size=\"small\">立即删除</Button>\n </template>\n <Button>删除</Button>\n</Popover>"
|
|
298
|
+
}
|
|
299
|
+
],
|
|
277
300
|
"methods": [],
|
|
278
301
|
"typeDefinitions": [
|
|
279
302
|
{
|
package/components/select.json
CHANGED
|
@@ -495,6 +495,15 @@
|
|
|
495
495
|
"default": "undefined",
|
|
496
496
|
"usageExample": "<OptionGroup label=\"水果\">\n <Option value=\"apple\" label=\"苹果\" />\n</OptionGroup>"
|
|
497
497
|
}
|
|
498
|
+
],
|
|
499
|
+
"slots": [
|
|
500
|
+
{
|
|
501
|
+
"name": "label",
|
|
502
|
+
"description": "自定义选项分组标题内容。",
|
|
503
|
+
"bindingType": "none",
|
|
504
|
+
"vueTemplate": "#label",
|
|
505
|
+
"usageExample": "<OptionGroup>\n <template #label>\n <span>水果分组</span>\n </template>\n <Option value=\"apple\" label=\"苹果\" />\n</OptionGroup>"
|
|
506
|
+
}
|
|
498
507
|
]
|
|
499
508
|
}
|
|
500
509
|
],
|
package/components/spinner.json
CHANGED
|
@@ -76,6 +76,10 @@
|
|
|
76
76
|
"required": false,
|
|
77
77
|
"default": "\"default\"",
|
|
78
78
|
"allowedValues": [{
|
|
79
|
+
"value": "large",
|
|
80
|
+
"label": "大尺寸"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
79
83
|
"value": "default",
|
|
80
84
|
"label": "默认尺寸",
|
|
81
85
|
"isDefault": true
|
|
@@ -428,4 +432,4 @@
|
|
|
428
432
|
"Input",
|
|
429
433
|
"Slider"
|
|
430
434
|
]
|
|
431
|
-
}
|
|
435
|
+
}
|
package/components/tour.json
CHANGED
|
@@ -265,6 +265,22 @@
|
|
|
265
265
|
"default": "\"上一步\"",
|
|
266
266
|
"usageExample": "<TourStep prevText=\"返回\">"
|
|
267
267
|
}
|
|
268
|
+
],
|
|
269
|
+
"slots": [
|
|
270
|
+
{
|
|
271
|
+
"name": "header",
|
|
272
|
+
"description": "自定义步骤头部内容,可覆盖标题区域。",
|
|
273
|
+
"bindingType": "none",
|
|
274
|
+
"vueTemplate": "#header",
|
|
275
|
+
"usageExample": "<TourStep>\n <template #header>\n <strong>欢迎使用控制台</strong>\n </template>\n</TourStep>"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"name": "footer",
|
|
279
|
+
"description": "自定义步骤底部操作区,可覆盖默认的步骤指示和按钮。",
|
|
280
|
+
"bindingType": "none",
|
|
281
|
+
"vueTemplate": "#footer",
|
|
282
|
+
"usageExample": "<TourStep>\n <template #footer>\n <Button size=\"small\">跳过引导</Button>\n <Button type=\"primary\" size=\"small\">继续</Button>\n </template>\n</TourStep>"
|
|
283
|
+
}
|
|
268
284
|
]
|
|
269
285
|
}
|
|
270
286
|
],
|
package/components/upload.json
CHANGED
|
@@ -299,6 +299,22 @@
|
|
|
299
299
|
"handlerExample": "const handleError = (err, file, files) => {\n Message.error(err.message);\n};"
|
|
300
300
|
}
|
|
301
301
|
],
|
|
302
|
+
"slots": [
|
|
303
|
+
{
|
|
304
|
+
"name": "content",
|
|
305
|
+
"description": "自定义上传触发区域内容,例如按钮、拖拽提示文案等。",
|
|
306
|
+
"bindingType": "none",
|
|
307
|
+
"vueTemplate": "<template #content>...</template>",
|
|
308
|
+
"usageExample": "<Upload action=\"/api/upload\">\n <template #content>\n <Button type=\"primary\">选择文件</Button>\n </template>\n</Upload>"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "tip",
|
|
312
|
+
"description": "自定义底部提示内容,通常用于说明支持的文件类型、大小或数量限制。",
|
|
313
|
+
"bindingType": "none",
|
|
314
|
+
"vueTemplate": "<template #tip>...</template>",
|
|
315
|
+
"usageExample": "<Upload action=\"/api/upload\">\n <template #tip>只能上传 JPG/PNG 文件,且不超过 500KB</template>\n</Upload>"
|
|
316
|
+
}
|
|
317
|
+
],
|
|
302
318
|
"methods": [
|
|
303
319
|
{
|
|
304
320
|
"name": "submit",
|
|
@@ -19,6 +19,15 @@
|
|
|
19
19
|
}
|
|
20
20
|
],
|
|
21
21
|
"events": [],
|
|
22
|
+
"slots": [
|
|
23
|
+
{
|
|
24
|
+
"name": "default",
|
|
25
|
+
"description": "列表项渲染内容,通常配合 v-for 渲染大量行。",
|
|
26
|
+
"bindingType": "none",
|
|
27
|
+
"vueTemplate": "#default",
|
|
28
|
+
"usageExample": "<VirtualList style=\"height: 400px;\">\n <template #default>\n <div v-for=\"item in data\" :key=\"item.value\">{{ item.label }}</div>\n </template>\n</VirtualList>"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
22
31
|
"methods": [],
|
|
23
32
|
"subComponents": [
|
|
24
33
|
{
|
package/dist/ast/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
require('../chunk-YTEYDSDW.js');
|
|
4
|
-
var
|
|
4
|
+
var chunkXPHDD6XR_js = require('../chunk-XPHDD6XR.js');
|
|
5
5
|
require('../chunk-KF5YBEM5.js');
|
|
6
6
|
require('../chunk-JSBRDJBE.js');
|
|
7
7
|
|
|
@@ -9,9 +9,9 @@ require('../chunk-JSBRDJBE.js');
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, "analyzeCodeWithAST", {
|
|
11
11
|
enumerable: true,
|
|
12
|
-
get: function () { return
|
|
12
|
+
get: function () { return chunkXPHDD6XR_js.analyzeCodeWithAST; }
|
|
13
13
|
});
|
|
14
14
|
Object.defineProperty(exports, "componentRegistry", {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () { return
|
|
16
|
+
get: function () { return chunkXPHDD6XR_js.componentRegistry; }
|
|
17
17
|
});
|
package/dist/ast/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkXPHDD6XR_js = require('./chunk-XPHDD6XR.js');
|
|
4
4
|
var chunkV5N65MRP_js = require('./chunk-V5N65MRP.js');
|
|
5
5
|
var chunkDHLWNT53_js = require('./chunk-DHLWNT53.js');
|
|
6
6
|
|
|
@@ -64,7 +64,7 @@ function validateCompilation(code) {
|
|
|
64
64
|
}
|
|
65
65
|
async function validateAST(code) {
|
|
66
66
|
try {
|
|
67
|
-
const violations = await
|
|
67
|
+
const violations = await chunkXPHDD6XR_js.analyzeCodeWithAST(code);
|
|
68
68
|
if (violations.length > 0) {
|
|
69
69
|
return {
|
|
70
70
|
name: "AST\u89C4\u5219\u68C0\u67E5",
|
|
@@ -33093,22 +33093,6 @@ function checkNestingRules(tagName, metadata, ancestors, violations) {
|
|
|
33093
33093
|
}
|
|
33094
33094
|
}
|
|
33095
33095
|
function checkComponentSpecificRules(tagName, node, metadata, violations) {
|
|
33096
|
-
if (tagName === "Dropdown") {
|
|
33097
|
-
node.children?.forEach((child) => {
|
|
33098
|
-
if (child.type === 1 && child.tag === "template") {
|
|
33099
|
-
const slotProp = child.props?.find(
|
|
33100
|
-
(p) => p.type === 7 && p.name === "slot" && p.arg?.content === "menu"
|
|
33101
|
-
);
|
|
33102
|
-
if (slotProp) {
|
|
33103
|
-
violations.push({
|
|
33104
|
-
rule: "DropdownMenu \u4E0D\u80FD\u653E\u5728 #menu \u63D2\u69FD\u4E2D",
|
|
33105
|
-
match: "<template #menu>",
|
|
33106
|
-
suggestion: "\u8BF7\u79FB\u9664 <template #menu>\uFF0C\u5C06 DropdownMenu \u76F4\u63A5\u4F5C\u4E3A Dropdown \u7684\u7B2C\u4E8C\u4E2A\u5B50\u5143\u7D20"
|
|
33107
|
-
});
|
|
33108
|
-
}
|
|
33109
|
-
}
|
|
33110
|
-
});
|
|
33111
|
-
}
|
|
33112
33096
|
if (tagName === "Table") {
|
|
33113
33097
|
node.props.forEach((prop) => {
|
|
33114
33098
|
if (prop.type === 6 && (prop.name === "rowKey" || prop.name === "row-key")) {
|
|
@@ -33068,22 +33068,6 @@ function checkNestingRules(tagName, metadata, ancestors, violations) {
|
|
|
33068
33068
|
}
|
|
33069
33069
|
}
|
|
33070
33070
|
function checkComponentSpecificRules(tagName, node, metadata, violations) {
|
|
33071
|
-
if (tagName === "Dropdown") {
|
|
33072
|
-
node.children?.forEach((child) => {
|
|
33073
|
-
if (child.type === 1 && child.tag === "template") {
|
|
33074
|
-
const slotProp = child.props?.find(
|
|
33075
|
-
(p) => p.type === 7 && p.name === "slot" && p.arg?.content === "menu"
|
|
33076
|
-
);
|
|
33077
|
-
if (slotProp) {
|
|
33078
|
-
violations.push({
|
|
33079
|
-
rule: "DropdownMenu \u4E0D\u80FD\u653E\u5728 #menu \u63D2\u69FD\u4E2D",
|
|
33080
|
-
match: "<template #menu>",
|
|
33081
|
-
suggestion: "\u8BF7\u79FB\u9664 <template #menu>\uFF0C\u5C06 DropdownMenu \u76F4\u63A5\u4F5C\u4E3A Dropdown \u7684\u7B2C\u4E8C\u4E2A\u5B50\u5143\u7D20"
|
|
33082
|
-
});
|
|
33083
|
-
}
|
|
33084
|
-
}
|
|
33085
|
-
});
|
|
33086
|
-
}
|
|
33087
33071
|
if (tagName === "Table") {
|
|
33088
33072
|
node.props.forEach((prop) => {
|
|
33089
33073
|
if (prop.type === 6 && (prop.name === "rowKey" || prop.name === "row-key")) {
|
package/dist/full/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('../chunk-
|
|
3
|
+
var chunkHARQRI4F_js = require('../chunk-HARQRI4F.js');
|
|
4
|
+
require('../chunk-XPHDD6XR.js');
|
|
5
5
|
require('../chunk-V5N65MRP.js');
|
|
6
6
|
require('../chunk-DHLWNT53.js');
|
|
7
7
|
require('../chunk-KF5YBEM5.js');
|
|
@@ -11,9 +11,9 @@ require('../chunk-JSBRDJBE.js');
|
|
|
11
11
|
|
|
12
12
|
Object.defineProperty(exports, "validateCode", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function () { return
|
|
14
|
+
get: function () { return chunkHARQRI4F_js.validateCode; }
|
|
15
15
|
});
|
|
16
16
|
Object.defineProperty(exports, "validateCodeSync", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function () { return
|
|
18
|
+
get: function () { return chunkHARQRI4F_js.validateCodeSync; }
|
|
19
19
|
});
|
package/dist/full/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { validateCode, validateCodeSync } from '../chunk-
|
|
2
|
-
import '../chunk-
|
|
1
|
+
export { validateCode, validateCodeSync } from '../chunk-BSCASJTV.mjs';
|
|
2
|
+
import '../chunk-YRGYDK2I.mjs';
|
|
3
3
|
import '../chunk-6HOIRUQB.mjs';
|
|
4
4
|
import '../chunk-4OTQAQ6J.mjs';
|
|
5
5
|
import '../chunk-QC6VTSA3.mjs';
|
package/dist/index.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var chunkJJ6AB4ZH_js = require('./chunk-JJ6AB4ZH.js');
|
|
4
4
|
require('./chunk-YTEYDSDW.js');
|
|
5
|
-
var
|
|
6
|
-
var
|
|
5
|
+
var chunkHARQRI4F_js = require('./chunk-HARQRI4F.js');
|
|
6
|
+
var chunkXPHDD6XR_js = require('./chunk-XPHDD6XR.js');
|
|
7
7
|
var chunkV5N65MRP_js = require('./chunk-V5N65MRP.js');
|
|
8
8
|
var chunkDHLWNT53_js = require('./chunk-DHLWNT53.js');
|
|
9
9
|
require('./chunk-KF5YBEM5.js');
|
|
@@ -17,19 +17,19 @@ Object.defineProperty(exports, "validateCompilation", {
|
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "validateCode", {
|
|
19
19
|
enumerable: true,
|
|
20
|
-
get: function () { return
|
|
20
|
+
get: function () { return chunkHARQRI4F_js.validateCode; }
|
|
21
21
|
});
|
|
22
22
|
Object.defineProperty(exports, "validateCodeSync", {
|
|
23
23
|
enumerable: true,
|
|
24
|
-
get: function () { return
|
|
24
|
+
get: function () { return chunkHARQRI4F_js.validateCodeSync; }
|
|
25
25
|
});
|
|
26
26
|
Object.defineProperty(exports, "analyzeCodeWithAST", {
|
|
27
27
|
enumerable: true,
|
|
28
|
-
get: function () { return
|
|
28
|
+
get: function () { return chunkXPHDD6XR_js.analyzeCodeWithAST; }
|
|
29
29
|
});
|
|
30
30
|
Object.defineProperty(exports, "componentRegistry", {
|
|
31
31
|
enumerable: true,
|
|
32
|
-
get: function () { return
|
|
32
|
+
get: function () { return chunkXPHDD6XR_js.componentRegistry; }
|
|
33
33
|
});
|
|
34
34
|
Object.defineProperty(exports, "validateRuntimePrecheck", {
|
|
35
35
|
enumerable: true,
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { validateCompilation } from './chunk-NZL6T22V.mjs';
|
|
2
2
|
import './chunk-5H7N2A5X.mjs';
|
|
3
|
-
export { validateCode, validateCodeSync } from './chunk-
|
|
4
|
-
export { analyzeCodeWithAST, componentRegistry } from './chunk-
|
|
3
|
+
export { validateCode, validateCodeSync } from './chunk-BSCASJTV.mjs';
|
|
4
|
+
export { analyzeCodeWithAST, componentRegistry } from './chunk-YRGYDK2I.mjs';
|
|
5
5
|
export { validateRuntimePrecheck } from './chunk-6HOIRUQB.mjs';
|
|
6
6
|
export { compileSFC, scopeStyles } from './chunk-4OTQAQ6J.mjs';
|
|
7
7
|
import './chunk-QC6VTSA3.mjs';
|
|
@@ -44,6 +44,23 @@ const handlePositioned = (feedback: Feedback) => {
|
|
|
44
44
|
};
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
+
## 插槽 (Slots)
|
|
48
|
+
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
49
|
+
| --- | --- | --- | --- |
|
|
50
|
+
| menu | 自定义下拉菜单内容,通常放置 DropdownMenu 和 DropdownItem。 | `<template #menu>...</template>` | `<Dropdown>
|
|
51
|
+
<Button>更多操作</Button>
|
|
52
|
+
<template #menu>
|
|
53
|
+
<DropdownMenu>
|
|
54
|
+
<DropdownItem>查看详情</DropdownItem>
|
|
55
|
+
</DropdownMenu>
|
|
56
|
+
</template>
|
|
57
|
+
</Dropdown>` |
|
|
58
|
+
|
|
59
|
+
### 插槽参数说明
|
|
60
|
+
**menu**
|
|
61
|
+
|
|
62
|
+
- 参数结构: 无参数
|
|
63
|
+
|
|
47
64
|
## 方法 (Methods)
|
|
48
65
|
| 方法名 | 说明 | 参数 | 返回值 |
|
|
49
66
|
| --- | --- | --- | --- |
|
|
@@ -38,6 +38,40 @@ import { Popover } from '@king-design/vue';
|
|
|
38
38
|
| ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk">` |
|
|
39
39
|
| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel">` |
|
|
40
40
|
|
|
41
|
+
## 插槽 (Slots)
|
|
42
|
+
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
43
|
+
| --- | --- | --- | --- |
|
|
44
|
+
| title | 自定义确认提示标题区域内容。 | `<template #title>...</template>` | `<Popover>
|
|
45
|
+
<template #title>删除实例</template>
|
|
46
|
+
<Button>删除</Button>
|
|
47
|
+
</Popover>` |
|
|
48
|
+
| content | 自定义确认提示主体内容。 | `<template #content>...</template>` | `<Popover>
|
|
49
|
+
<template #content>
|
|
50
|
+
删除后将无法恢复,请确认操作。
|
|
51
|
+
</template>
|
|
52
|
+
<Button>删除</Button>
|
|
53
|
+
</Popover>` |
|
|
54
|
+
| footer | 自定义底部操作区内容,可覆盖默认的确认/取消按钮。 | `<template #footer>...</template>` | `<Popover>
|
|
55
|
+
<template #footer>
|
|
56
|
+
<Button size="small">稍后处理</Button>
|
|
57
|
+
<Button type="danger" size="small">立即删除</Button>
|
|
58
|
+
</template>
|
|
59
|
+
<Button>删除</Button>
|
|
60
|
+
</Popover>` |
|
|
61
|
+
|
|
62
|
+
### 插槽参数说明
|
|
63
|
+
**title**
|
|
64
|
+
|
|
65
|
+
- 参数结构: 无参数
|
|
66
|
+
|
|
67
|
+
**content**
|
|
68
|
+
|
|
69
|
+
- 参数结构: 无参数
|
|
70
|
+
|
|
71
|
+
**footer**
|
|
72
|
+
|
|
73
|
+
- 参数结构: 无参数
|
|
74
|
+
|
|
41
75
|
## 常见错误与正确用法 (Anti-Hallucination)
|
|
42
76
|
### 未提供触发元素
|
|
43
77
|
> **错误用法**: `<Popover title="确认" content="内容" />`
|
|
@@ -219,6 +219,21 @@ const selected = ref('');
|
|
|
219
219
|
<Option value="apple" label="苹果" />
|
|
220
220
|
</OptionGroup>` |
|
|
221
221
|
|
|
222
|
+
#### 插槽 (Slots)
|
|
223
|
+
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
224
|
+
| --- | --- | --- | --- |
|
|
225
|
+
| label | 自定义选项分组标题内容。 | `#label` | `<OptionGroup>
|
|
226
|
+
<template #label>
|
|
227
|
+
<span>水果分组</span>
|
|
228
|
+
</template>
|
|
229
|
+
<Option value="apple" label="苹果" />
|
|
230
|
+
</OptionGroup>` |
|
|
231
|
+
|
|
232
|
+
##### 插槽参数说明
|
|
233
|
+
**label**
|
|
234
|
+
|
|
235
|
+
- 参数结构: 无参数
|
|
236
|
+
|
|
222
237
|
#### 组合示例
|
|
223
238
|
##### 分组选项
|
|
224
239
|
**场景**: 创建带有分组的下拉选择框
|
package/docs_for_llm/tour.doc.md
CHANGED
|
@@ -86,6 +86,30 @@ const handlePositioned = (feedback: Feedback) => {
|
|
|
86
86
|
| nextText | `string` | 下一步按钮文本 | `<TourStep nextText="继续">` |
|
|
87
87
|
| prevText | `string` | 上一步按钮文本 | `<TourStep prevText="返回">` |
|
|
88
88
|
|
|
89
|
+
#### 插槽 (Slots)
|
|
90
|
+
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
91
|
+
| --- | --- | --- | --- |
|
|
92
|
+
| header | 自定义步骤头部内容,可覆盖标题区域。 | `#header` | `<TourStep>
|
|
93
|
+
<template #header>
|
|
94
|
+
<strong>欢迎使用控制台</strong>
|
|
95
|
+
</template>
|
|
96
|
+
</TourStep>` |
|
|
97
|
+
| footer | 自定义步骤底部操作区,可覆盖默认的步骤指示和按钮。 | `#footer` | `<TourStep>
|
|
98
|
+
<template #footer>
|
|
99
|
+
<Button size="small">跳过引导</Button>
|
|
100
|
+
<Button type="primary" size="small">继续</Button>
|
|
101
|
+
</template>
|
|
102
|
+
</TourStep>` |
|
|
103
|
+
|
|
104
|
+
##### 插槽参数说明
|
|
105
|
+
**header**
|
|
106
|
+
|
|
107
|
+
- 参数结构: 无参数
|
|
108
|
+
|
|
109
|
+
**footer**
|
|
110
|
+
|
|
111
|
+
- 参数结构: 无参数
|
|
112
|
+
|
|
89
113
|
#### 组合示例
|
|
90
114
|
##### 声明式步骤
|
|
91
115
|
**场景**: 使用声明式方式定义引导步骤
|
|
@@ -87,6 +87,27 @@ const handleError = (err, file, files) => {
|
|
|
87
87
|
};
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
+
## 插槽 (Slots)
|
|
91
|
+
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
92
|
+
| --- | --- | --- | --- |
|
|
93
|
+
| content | 自定义上传触发区域内容,例如按钮、拖拽提示文案等。 | `<template #content>...</template>` | `<Upload action="/api/upload">
|
|
94
|
+
<template #content>
|
|
95
|
+
<Button type="primary">选择文件</Button>
|
|
96
|
+
</template>
|
|
97
|
+
</Upload>` |
|
|
98
|
+
| tip | 自定义底部提示内容,通常用于说明支持的文件类型、大小或数量限制。 | `<template #tip>...</template>` | `<Upload action="/api/upload">
|
|
99
|
+
<template #tip>只能上传 JPG/PNG 文件,且不超过 500KB</template>
|
|
100
|
+
</Upload>` |
|
|
101
|
+
|
|
102
|
+
### 插槽参数说明
|
|
103
|
+
**content**
|
|
104
|
+
|
|
105
|
+
- 参数结构: 无参数
|
|
106
|
+
|
|
107
|
+
**tip**
|
|
108
|
+
|
|
109
|
+
- 参数结构: 无参数
|
|
110
|
+
|
|
90
111
|
## 方法 (Methods)
|
|
91
112
|
| 方法名 | 说明 | 参数 | 返回值 |
|
|
92
113
|
| --- | --- | --- | --- |
|
|
@@ -16,6 +16,20 @@ import { VirtualList } from '@king-design/vue';
|
|
|
16
16
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
17
17
|
| disabled | `boolean` | `false` | 否 | 是否禁用虚拟化,禁用后会渲染所有元素 | - | `<VirtualList disabled></VirtualList>` |
|
|
18
18
|
|
|
19
|
+
## 插槽 (Slots)
|
|
20
|
+
| 插槽名 | 说明 | 模板写法 | 示例 |
|
|
21
|
+
| --- | --- | --- | --- |
|
|
22
|
+
| default | 列表项渲染内容,通常配合 v-for 渲染大量行。 | `#default` | `<VirtualList style="height: 400px;">
|
|
23
|
+
<template #default>
|
|
24
|
+
<div v-for="item in data" :key="item.value">{{ item.label }}</div>
|
|
25
|
+
</template>
|
|
26
|
+
</VirtualList>` |
|
|
27
|
+
|
|
28
|
+
### 插槽参数说明
|
|
29
|
+
**default**
|
|
30
|
+
|
|
31
|
+
- 参数结构: 无参数
|
|
32
|
+
|
|
19
33
|
## 子组件 (Sub-Components)
|
|
20
34
|
### VirtualListContainer
|
|
21
35
|
虚拟列表容器组件,用于组合式使用
|
package/package.json
CHANGED