RadioTag 复选标签

单选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

基本使用

• 通过v-model给radiotag绑定一个数组，这个绑定的变量是双向的，也就是说，您可以无需监听radiotag组件的change事件，也能知道哪个单选框被勾选了

<template>
<view class="">
	<u-radio-tag
		:theme="theme"
		:labelSize="20"
		:activeColor="activeColor"
		@change="radioTagChange"
		v-model="result"
		:padding="padding"
		:gutter="gutter"
		:span="span"
		:data="list"
		:props="props"
		:type="type"
	/>
	<view class="u-demo-result-line">
		{{ result ? `选中了"${result}"` : "请选择" }}
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					label: "荔枝",
					id: "litchi",
					check: false
				},
				{
					label: "香蕉",
					id: "banana",
					check: false
				},
				{
					label: "橙子",
					id: "orange",
					check: false
				},
				{
					label: "苹果",
					id: "apple",
					check: true
				}
			],
			props: {
				name: "label",
				code: "id",
				disabled: "check"
			},
			span: 3,
			padding: 24,
			gutter: 40,
			result: '',
			activeColor: "",
			theme: "normal",
			type: "primary"
		};
	},
	methods: {
		radioTagChange(e) {
			// 点击的节点信息
			console.log(e);
			// 选中的数据
			console.log(this.result);
		},
	}
};
</script>

禁用radiotag

设置data中list中的disabled(disabled可自定义)为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后 再禁用，会有灰色的已勾选的图标，但此时依然是不可操作的。

const list=[
	{
		label: "荔枝",
		id: "litchi",
		check: true
	}
]
<u-radiotag v-model="result" :data.sync=“list”>天涯</u-radiotag>

颜色类型

此处所指的颜色，为radiotag选中时的背景颜色，参数为type，优先级低于active-color

<u-radiotag v-model="result" :data.sync=“list” type="success">光影</u-radiotag>

自定义颜色

此处所指的颜色，为radiotag选中时的背景颜色，参数为active-color

<u-radiotag v-model="result" :data.sync=“list” active-color="red">光影</u-radiotag>

API

radiotag Props

注意：需要给radiotag组件通过v-model绑定一个选项值，来初始化radiotag的状态，随后该值被双向绑定， 当用户勾选单选框时，该值在radiotag内部被修改为当前选中的选项的code，否则为空，换言之，您无需监听radiotag的change事件，也能 知道某一个radiotag是否被选中的状态

参数	说明	类型	默认值	可选值
theme FPI	主题模式，普通模式normal，关怀模式care	String	normal	care
v-model	双向绑定某一个radiotag的值，如果在该变量存在某一个radiotag的code，将会被选中	String \ Number	-	-
label-size	label字体大小，单位rpx	String \ Number	-	-
active-color	选中时的颜色	String	-	-
type FPI	选中时的颜色，优先级低于active-color	String	'primary'	error/warning/success
span FPI	定义了一行放几个radiotag	String	1	2/3
gutter FPI	radiotag之间的左右间距,单位为rpx	String	40	-
padding FPI	radiotag之间的上下间距,单位为rpx	String	24	-
has-prefix FPI	是否显示左插槽的image	Boolean	false	true
has-suffix FPI	是否显示右插槽的数量	Boolean	false	true
props FPI	自定义节点属性	Object	{ name: "name", code: "code", disabled: "disabled", inActiveIcon: "inActiveIcon", activeIcon: "activeIcon", num: "num" }	-

radiotag Event

事件名	说明	回调参数	版本
change	某个radiotag状态发生变化时触发，回调为一个对象	detail = {}(传入data的节点信息)	-