# 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
第二种: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
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

# Slots

插槽名称 说明
default 标签显示内容,将表单组件放在该组件下

# Props

属性名 类型 说明 默认值 平台差异说明
padding Array padding值:[上,右,下,左] [ ] -
margin Array margin值:[上,右,下,左] [ ] -
full Boolean 宽度是否100% false -
inline V1.7.0+ Boolean 是否为行内模式 false Nvue端不支持

# Events

事件名 说明 回调参数
- - -

示例预览

# 示例代码地址

FirstUILabel 标签
Last Updated: 9/29/2022, 1:07:59 AM