Checktag 复选标签

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

基本使用

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

<template>
<view class="">
	<u-checktag
		:theme="theme"
		:max="max"
		:labelSize="20"
		:activeColor="activeColor"
		@change="checktagChange"
		v-model="result"
		:padding="padding"
		:gutter="gutter"
		:span="span"
		:data="list"
		:props="props"
		:type="type"
	/>
	<view class="u-demo-result-line">
		{{ result.length ? `选中了"${getResult}"` : "请选择" }}
	</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: [],
			max: 999,
			activeColor: "",
			theme: "normal",
			type: "primary"
		};
	},
	computed: {
		getResult() {
			return this.result.join(",");
		}
	},
	methods: {
		checktagChange(e) {
			// 点击的节点信息
			console.log(e);
			// 选中的数据
			console.log(this.result);
		},
	}
};
</script>

禁用checktag

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

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

颜色类型

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

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

自定义颜色

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

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

API

Checktag Props

参数	说明	类型	默认值	可选值
theme FPI	主题模式，普通模式normal，关怀模式care	String	normal	care
max	最多能选中多少个checktag	String \ Number	999	-
v-model	双向绑定某一个checktag的值，如果在该变量存在某一个checktag的code，将会被选中	String \ Number	-	-
label-size	label字体大小，单位rpx	String \ Number	-	-
num-size	右侧插槽的number字体大小，单位rpx	String \ Number	-	-
active-color	选中时的颜色	String	-	-
type FPI	选中时的颜色，优先级低于active-color	String	'primary'	error/warning/success
span FPI	定义了一行放几个checktag	String	1	2/3
gutter FPI	checktag之间的左右间距,单位为rpx	String	40	-
padding FPI	checktag之间的上下间距,单位为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" }	-

Checktag Event

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