# 组件（component）
组件是组成页面的基本结构单元，是对局部交互逻辑的抽象和封装。通常需要设计和暴露属性、插槽、事件和方法等 API。使用者根据这些 API 直接使用，一般不需要做二次修改。
从业务维度去看，组件又可分为基础组件和扩展组件两种：
- 基础组件：与业务无关的组件，基础组件保持统一的视觉规范，考虑高内聚低耦合的设计思想，例如 UButton、UInput、UTableView 等，在 Vusion 体系，官方维护 Cloud UI 基础组件库；
- 扩展组件：面向业务的组件，一般功能比较确定可复用，同时复杂度较高，例如用户选择器、计费卡片等。
# 扩展组件目录结构
Vusion 物料的组件包目录结构如下：
s-user-transfer.vue/
├─ assets/ # 组件资源目录（根据需要可以自行添加）
│ ├─ arrow-down.svg
│ └─ ...
├─ docs/ # 组件文档目录（根据需要可以自行添加 Markdown）
│ ├─ examples.md # 基础示例（Vusion 自动识别）
│ ├─ faq.md # 常见问题（Vusion 自动识别）
│ ├─ blocks.md # 常见使用案例（usage.json 必须）
│ ├─ cases.md # 测试用例，仅在开发环境中显示（Vusion 自动识别）
│ └─ ...
├─ api.yaml # 组件 API，用于生成文档和 Vetur 插件提示
├─ index.vue # 组件逻辑
├─ index.js # 组件暴露引用
├─ package.json # npm 包配置
├─ usage.json # 使用说明配置 (运行 npm run lcap 自动根据 api.yaml 和 docs/blocks.md 生成，无需修改)
├─ README.md # 组件文档（由 api.yaml 和 docs 自动生成，无需修改）
└─ ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# api.yaml 完整说明
api.yaml 用于生成组件文档。
- name: u-info-list
title: 详情列表
labels: [Display] # 暂只支持 1 个值，具体可选值可参见下面的 labels 说明
icon: info-list
attrs:
- name: repeat
title: 列数
type: number
default: 3
description: 整个详情列表的划分列数
- name: label-size
title: 标签大小
type: string
options:
- value: auto
title: 自适应
- value: small
title: 小
- value: normal
title: 正常
- value: large
title: 大
default: auto
description: 详情列表所有项的标签大小。
slots:
- name: default
title: 默认
description: 插入`<u-info-list-item>`或`<u-info-list-group>`子组件。
support:
- name: u-info-list-group
title: 单选项
snippet: '<u-info-list-group title="基本信息"><u-info-list-item label="名称">张三</u-info-list-item></u-info-list-group>'
- name: u-info-list-item
title: 详情列表项
snippet: '<u-info-list-item label="名称">张三</u-info-list-item>'
- name: u-info-list-item
title: 详情项
attrs:
- name: label
title: 标签
type: string
description: 标签
- name: span
title: 占据数
type: string
description: 列跨越的格数
- name: label-size
type: string
options:
- value: auto
title: 自适应
- value: small
title: 小
- value: normal
title: 正常
- value: large
title: 大
default: auto
description: 标签大小。
- name: ellipsis
title: 是否换行
type: boolean
default: false
description: 是否换行，默认换行
slots:
- name: default
title: 默认
description: 插入文本或HTML。
- name: label
title: 自定义标签内容
description: 用于自定义 label 内容。
- name: u-info-list-group
title: 详情组
attrs:
- name: title
title: 标签
type: string
description: 标题
- name: repeat
title: 列数
type: number
default: 3
description: 当前组范围内的划分列数
- name: label-size
title: 标签大小
type: string
options:
- value: auto
title: 自适应
- value: small
title: 小
- value: normal
title: 正常
- value: large
title: 大
default: auto
description: 当前组所有项的标签大小。
slots:
- name: default
title: 默认
description: 插入`<u-info-list-item>`子组件
support:
- name: u-info-list-item
title: 详情列表项
snippet: '<u-info-list-item label="名称">张三</u-info-list-item>'
- name: title
title: 自定义标题
description: 自定义标题。
- name: extra
title: 自定义额外操作项
description: 自定义额外操作项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# labels 说明
[
{
value: 'Runtime',
text: '运行时',
},
{
value: 'Container',
text: '容器',
},
{
value: 'Layout',
text: '布局',
},
{
value: 'InfoDisplay',
text: '信息展示',
},
{
value: 'DataDisplay',
text: '数据展示',
},
{
value: 'Table',
text: '表格',
},
{
value: 'Media',
text: '多媒体',
},
{
value: 'Form',
text: '表单',
},
{
value: 'Selector',
text: '选择器',
},
{
value: 'Chart',
text: '图表',
},
{
value: 'Feedback',
text: '反馈',
},
{
value: 'Effects',
text: '特效',
},
{
value: 'Editor',
text: '编辑器',
},
{
value: 'Other',
text: '其他',
},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58