aosiyiliaouniapp/uni_modules/liu-checkBox/readme.md

liu-checkBox适用于uni-app项目的自定义复选框+单选框、数据选择器

本组件目前兼容微信小程序、H5

本组件是简单好用的单选复选框组件，支持主题控制、样式自定义、简单易修改

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

	<!-- 自定义单选： -->
	<liu-checkBox :checkType="checkType" :checkOptions="checkOptions" :activeColor="'#FF0000'" @checkChange="checkChange1"></liu-checkBox>
	<!-- 自定义多选(无最大可选限制)： -->
	<liu-checkBox :checkOptions="checkOptions2" :activeColor="'#20A474'" @checkChange="checkChange2"></liu-checkBox>
	<!-- 自定义多选(限制最大可选)： -->
	<liu-checkBox :checkOptions="checkOptions3" :maxNum="maxNum" @checkChange="checkChange3"></liu-checkBox>

export default {
	data() {
		return {
			checkType: 'single',//选择类型 单选 single 多选 multiple
			maxNum: 5, //复选最大可选数量
			checkOptions: [{
				id: 1,
				name: '选项1'
			},{
				id: 2,
				name: '选项2'
			},{
				id: 3,
				name: '选项3'
			}],
			checkOptions2: [{
				id: 4,
				name: '选项4',
				selected: true //回显传入
			},{
				id: 5,
				name: '选项5'
			},{
				id: 6,
				name: '选项6'
			},{
				id: 7,
				name: '选项7'
			},{
				id: 8,
				name: '选项8'
			}],
			checkOptions3: [{
				id: 9,
				name: '选项9'
			},{
				id: 10,
				name: '选项10'
			},{
				id: 11,
				name: '选项11'
			},{
				id: 12,
				name: '选项12'
			},{
				id: 13,
				name: '选项13'
			},{
				id: 14,
				name: '选项14'
			},{
				id: 15,
				name: '选项15'
			},{
				id: 16,
				name: '选项16'
			},{
				id: 17,
				name: '选项17'
			}]
		};
	},
	methods: {
		//选中状态发生变化时触发 data为选中对所有对象数据
		checkChange1(data){
			// 点击选中的所有item 数组 执行业务逻辑 
			// console.log(data)
		},
		//选中状态发生变化触发 data为选中对所有对象数据
		checkChange2(data){
			// 点击选中的所有item 数组 执行业务逻辑 
			// console.log(data)
		},
		//选中状态发生变化触发 data为选中对所有对象数据
		checkChange3(data){
			// 点击选中的所有item 数组 执行业务逻辑 
			// console.log(data)
		}
	}
}

属性说明

名称	类型	默认值	描述
checkOptions	Array	[]	选项数据
checkType	String	''	选择类型(单选：single，默认复选)
maxNum	String		复选时最大可选数量(类型为单选的时不生效)
activeColor	String	'#0A4B9D'	主题色
@checkChange	Function		选中回调
reset	Function		重置方法，调用示例：this.$refs.checkBox.reset()