# Label 标签
概述
Label 标签，用来改进表单组件的可用性，将控件放在该标签下，当点击时，就会触发对应的控件，目前主要用于Switch、Radio、Checkbox组件。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiLabel from "@/components/firstui/fui-label/fui-label.vue"
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
radioItems: [{
name: '小于18岁',
value: '1',
checked: true
},
{
name: '18~28岁',
value: '2',
checked: false
},
{
name: '29~40岁',
value: '3',
checked: false
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，将表单组件放在该组件下 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| padding | Array | padding值：[上,右,下,左] | [ ] | - |
| margin | Array | margin值：[上,右,下,左] | [ ] | - |
| full | Boolean | 宽度是否100% | false | - |
| inline V1.7.0+ | Boolean | 是否为行内模式 | false | Nvue端不支持 |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |
Label 标签