wk-view

Appearance

On this page

wkv-check-group ​

选择框，支持单选/多选

用法 ​

html
<wkv-check-group :options="options"></wkv-check-group>

Props ​

属性名类型默认值说明
optionsArray[]组件展示的可选项
optionPropsObject{label: 'label', value: 'value'}项的属性配置，label 为展示文本，value 为选中的值
columnCountNumber0每列展示的数量，默认不控制行显示，自适应展示
gap[Number, String]8项中的间隔距离，包含下边距离
multiple[Boolean, Number]false是否可多选, 也可以设置为数值，限制用户具体选择的数量

Events ​

事件名事件说明函数签名参数说明
change选中项变更时触发(checkeds) => voidcheckeds: 选中项列表
extra当选择数量大于 multiple 属性的值时触发(limit, tips) => voidlimit: 最大可选数量
tips: 错误提示

示例 ​

vue
<template>
	<view class="wkv-check-group-example">
		<wk-section>单选</wk-section>
		<wkv-check-group :options="getList()"></wkv-check-group>
		
		<wk-section>多选</wk-section>
		<wkv-check-group multiple :options="getList()"></wkv-check-group>
		
		<wk-section>限制具体数量</wk-section>
		<wkv-check-group
			:multiple="3"
			@extra="handleExtarError"
			:options="getList(10)"
		></wkv-check-group>
		
		<wk-section>限制单行展示数量</wk-section>
		<wkv-check-group :columnCount="3" :options="getList(8)"></wkv-check-group>
	</view>
</template>
vue
<script setup lang="ts">
const getList = (num = 3) => {
	const list = []
	for (let i = 0; i < num; i++) {
		list.push({ label: `选项${i}`, value: i })
	}
	return list
}

const handleExtarError = (_, tips) => {
	uni.$wkv.showToast(tips)
}
</script>
scss
<style lang="scss">
.wkv-check-group-example {
	padding: 20px;
}
</style>