更新记录

1.0.4(2021-04-24)

1、添加 重置 功能;

2、添加 禁用 功能;

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

1.0.3(2020-08-08)

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

1.0.2(2019-09-22)

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

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

自定义复选/单选框

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() Object 设置组件的样式及数据,详情请看下面 set() 方法参数详解
get() 返回已选择的数据,未选择时返回 null
checkAll() 设置全部选中,该功能在单选框模式下无效
cancelAll() 设置全部取消选中,该功能在单选框模式下为取消当前选中项
invertAll() 设置全部反向选中,该功能在单选框模式下为取消当前选中项
reset() 重置,恢复选中状态
disabled() true / false / undefined 是否禁用组件, true:禁用、false:取消禁用,undefined:返回当前组件是否禁用状态(true 表示已禁用)

set()方法参数:

参数名 类型 默认值 说明
type String checkbox 组件类别(单选框/复选框),可选值 radio / checkbox
column Number 分栏设置,可选值 1 / 2 / 3 / 不设置时为流式自动布局
index Number 默认选中项,仅支持在 radio 时有效
list Array 组件渲染的列表数据,数据参数请看下面 list 参数详解
maxSize Number 允许最大选择的数量,必须与 maxFn 参数一起使用。注意事项请看下方提示信息
maxFn Function 超出最大选择数量时的回调函数,必须与 maxSize 参数一起使用

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

list参数:

参数名 类型 说明
text String 单选框/复选框的显示文字,必传参数
checked Boolean 默认选中项,仅支持在 checkbox 时有效,设置为 true 时默认选中,可传参数

绑定事件:

事件名 说明
@change 选项改变时触发,可接收一个参数 data 返回当前已选择的数据

绑定参数:

参数名 类型 说明
keyName Number / String 标识名,用于多个组件时区分回调组件

源码示例:

/* 设置 单选框 */
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] 按钮,点击即可下载

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问