更新记录

1.0.5（2023-06-09）

增加预览

1.0.4（2023-05-17）

增加重置方法

1.0.3（2023-05-10）

增加示例

平台兼容性

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)
        }
    }
}

属性说明