Checkbox 多选组件

多选组件用于在多个选项中选择多个。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="复选框" class="p.30">
		<t-card title="Checkbox 复选框" class="mb.30"
			sub-title="表单或页面中实现单选功能，支持自定义样式、禁用状态、事件监听等特性，简化了表单操作，提高了用户体验。"></t-card>
		<template v-if="area==1">
			<t-section title="基础功能" class="mb.30"></t-section>
			<t-row class="tdb-tdr-mb.30-tdp-ffww">
				<t-checkbox class="mr.25" value="4" @click="checked(1)" :checked="true" type="primary">石榴</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(2)" value="3" type="info">橙子</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(3)" value="2" type="success">香蕉</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(4)" value="3" type="error">橙子</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(5)" value="5" type="warning">梨子</t-checkbox>
			</t-row>
		</template>
		<template v-if="area==2">
			<t-section title="按钮模式" class="mb.30"></t-section>
			<t-row class="tdr-mb.30-tdp-ffww">
				<t-checkbox class="mr.25" @click="checked(1)" value="4" :checked="true" mode="button"
					type="primary">石榴</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(2)" value="3" mode="button" type="info">橙子</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(3)" mode="button" value="2" type="success">香蕉</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(4)" value="3" mode="button" type="error">橙子</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(5)" value="5" mode="button" type="warning">梨子</t-checkbox>
			</t-row>
		</template>
		<template v-if="area==3">
			<t-section title="列表模式" class="mb.30"></t-section>
			<t-col class="tdr-mb.30">
				<t-checkbox class="mr.25" @click="checked(1)" value="4" :checked="true" mode="cell"
					type="primary">石榴</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(2)" value="3" mode="cell" type="info">橙子</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(3)" mode="cell" value="2" type="success">香蕉</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(4)" value="3" mode="cell" type="error">橙子</t-checkbox>
				<t-checkbox class="mr.25" @click="checked(5)" value="5" mode="cell" type="warning">梨子</t-checkbox>
			</t-col>
		</template>
		<template v-if="area==4">
			<t-section title="标签模式" class="mb.30"></t-section>
			<t-row class="tdr-mb.30-tdp-ffww">
				<t-checkbox class="mr.25" value="4" @click="checked(1)" mode="tag" type="primary" :checked="true"
					:disabled="true">石榴(禁用状态)</t-checkbox>
				<t-checkbox class="mr.25" value="3" @click="checked(2)" mode="tag" type="info">橙子</t-checkbox>
				<t-checkbox class="mr.25" mode="tag" @click="checked(3)" value="2" type="success">香蕉</t-checkbox>
				<t-checkbox class="mr.25" value="3" @click="checked(4)" mode="tag" type="error">橙子</t-checkbox>
				<t-checkbox class="mr.25" value="5" @click="checked(5)" mode="tag" type="warning">梨子</t-checkbox>
			</t-row>
		</template>
		<t-row class="tdb-tdr-mb.30-tdp-ffww">
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=1">基础功能</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=2">按钮模式</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=3">列表模式</t-button>
			<t-button type="w" class="mr.30-mb.30" size="small" @click="area=4">标签模式</t-button>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				area: 1
			};
		},
		methods: {
			checked(index : number) {
				console.log(index)
				// for (let i = 1; i < 6; i++) {
				// 	const ins = this.$refs['checkbox' + i] as TcheckboxComponentPublicInstance
				// 	ins.setChecked(i == index)
				// }
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
type	组件场景	String	'p'	'p'
checked	是否选中	Boolean	false	true, false
value	绑定的值	String	-	-
iconName	图标名称	String	-	-
activeColor	选中时的颜色	String	-	-
inactiveColor	未选中时的颜色	String	"#909399"	-
mode	多选样式	String	'checkbox'	'checkbox', 'button', 'cell', 'tag'

Events

事件名	描述	回调参数	版本
change	组件选中状态改变时触发	(checked: boolean, value: string)	-
click	-	-	-