# Label 标签
概述
Label 标签，用来改进表单组件的可用性，将控件放在该标签下，当点击时，就会触发对应的控件，目前主要用于Switch、Radio、Checkbox组件。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiLabel from "@/components/firstui/fui-label/fui-label.uvue"
export default {
components:{
fuiLabel
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
Radio 单项选择器
将 fui-label 组件放于 fui-radio 组件外层即可 （其他组件的使用方式相同）。
<fui-radio-group>
<fui-label v-for="(item,index) in radioItems" :key="index">
<fui-list-cell>
<view class="fui-align__center">
<fui-radio :checked="item.checked" :value="item.value">
</fui-radio>
<text class="fui-text">{{item.name}}</text>
</view>
</fui-list-cell>
</fui-label>
</fui-radio-group>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
type Item = {
name : string;
value : string;
checked : boolean;
}
export default {
data() {
return {
radioItems: [{
name: '小于18岁',
value: '1',
checked: true
},
{
name: '18~28岁',
value: '2',
checked: false
},
{
name: '29~40岁',
value: '3',
checked: false
}
] as Item[]
}
}
}
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
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
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，将表单组件放在该组件下 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| padding | String | padding值，格式同css | - | - |
| margin | String | margin值，格式同css | - | - |
| full | Boolean | 宽度是否100% | false | - |
# Events
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| - | - | - | - |
Label 标签