更新记录

1.0.4（2021-04-24） 下载此版本

1、添加 重置 功能；

2、添加 禁用 功能；

3、添加 同页面多组件 使用示例源码

1.0.3（2020-08-08） 下载此版本

1. 新增：允许 复选框 设置最大选择数量

1.0.2（2019-09-22） 下载此版本

增加 全部选中 / 取消全部选中 / 反向全部选中 方法

平台兼容性

自定义复选/单选框

在 script 中引用组件

import helangCheckbox from "@/components/helang-checkbox/helang-checkbox.vue"

export default {
    components: {
        "helang-checkbox":helangCheckbox
    }
}

在 template 中添加组件

<helang-checkbox ref="checkbox" @change="valueChange"></helang-checkbox>

小编提醒：

为了简化使用方法，选择了通过 Vue 的 $refs 属性 来设置和获取组件的值，对 Vue 的 ref 属性不熟悉的伙伴可通过阅读 Vue 文档学习一下 ref 属性的使用。官方文档地址：https://cn.vuejs.org/v2/api/#ref

方法说明：

set()方法参数：

注意：全选和反选操作的优先级高于 maxSize 属性的设定，所以当全选和反选的数量高于 maxSize 设置的属性时也会被选择。该情况同时出现的概率也较低

list参数：

绑定事件：

绑定参数：

源码示例：

/* 设置 单选框 */
this.$refs.checkbox.set({
    type:'radio',   // 类型：单选框
    index:1,        // 默认选中的项
    column:3,       // 分列
    list:[          // 列表数据
        {text:'爬山'},
        {text:'游泳'},
        {text:'徒步'},
        {text:'健身'}
    ]   
});

/* 设置 复选框 */
this.$refs.checkbox.set({
    type:'checkbox',// 类型：单选框
    column:2,       // 分列
    list:[          // 列表数据
        {text:'爬山'},
        {text:'游泳',checked:true},
        {text:'徒步'},
        {text:'健身'}
    ],
    maxSize:5,      // 最大选择数量
    maxFn:()=>{     // 超出最大选择数量时的回调函数
        // 此处可输出当前页面的数据
        // console.log(this.array);
        uni.showToast({
            title:'最多只能选择5个',
            icon:'none',
            duration:1000,
            mask:false
        });
    }
});

/* 获取 已选项的值 */
let data = this.$refs.checkbox.get();   // 组件返回的数据
console.log(data);

// 更多 全选 / 反选 / 取消 功能请下载 示例项目ZIP 体验

友情提示：

1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
2. [插件ZIP]只包含模板文件和数据文件，不包含项目运行依赖（如 pages.json）
3. [示例项目ZIP]是完整的项目文件，可下载后导入 HBuilderX 中直接运行体验
4. 文件下载在当前页面的上部靠右位置，有 [下载插件ZIP] [下载示例项目ZIP] 按钮，点击即可下载