单选、多选组件

更新记录

1.0（2023-08-15）

使用说明

参数	格式	说明
list	Array	[{name:"按钮"}] 或者 ["按钮"]
activeTextColor	String	选中背景色 "#fff"
bgColor	String	选中字体色 "#fff"
bgColor	String	选中字体色 "#fff"
color	String	未选中字体色 "#fff"
type	String	单选还是多选 radio/checkbox
defaultProps	Object	自定义name和id
btnStyle	Object	自定义按钮样式
fontSize	String	文字大小
disabledBgColor	String	禁用字体颜色 "#ccc"

<radio-checkbox :list="list1" color="#fff"
   bgColor="#55aa00"
   activeTextColor="#fff"
   activeBgColor="#ff5500"
   type="radio"
   :defaultProps="defaultProps"
   fontSize="22rpx"
   @changeItem="changeItem1"
>
</radio-checkbox>
<radio-checkbox :list="list2" color="#fff"
   bgColor="#55aa00"
   activeTextColor="#fff"
   activeBgColor="#ff5500"
   type="checkbox"
   :defaultProps="defaultProps"
   fontSize="22rpx"
   @changeItem="changeItem2"
>
</radio-checkbox>

import radioCheckbox from '@/components/radio-checkbox/radio-checkbox.vue'; //多选单选自定义按钮

export default {
        components: {
            radioCheckbox
        },
        data() {
            return {
                defaultProps: {
                    name: "label",
                    id: "value"
                },
                list1:[
                    {
                        "label":"单选1",
                        "value":1,
                        "disabled":true,//是否禁用
                    },
                    {
                        "label":"单选2",
                        "value":2,
                        "disabled":false,//是否禁用
                    }
                ],
                list2:[
                    {
                        "label":"多选1",
                        "value":1,
                        "isCheck":false,
                        "disabled":true,//是否禁用
                    },
                    {
                        "label":"多选2",
                        "value":1,
                        "disabled":false,//是否禁用
                    }
                ]
            }
        },
        methods:{
            changeItem1(e){

            },
            changeItem2(e){

            }
        }
    }

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.8.12 app-vue	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	×	×	×

使用说明

参数	格式	说明
list	Array	[{name:"按钮"}] 或者 ["按钮"]
activeTextColor	String	选中背景色 "#fff"
bgColor	String	选中字体色 "#fff"
bgColor	String	选中字体色 "#fff"
color	String	未选中字体色 "#fff"
type	String	单选还是多选 radio/checkbox
defaultProps	Object	自定义name和id
btnStyle	Object	自定义按钮样式
fontSize	String	文字大小
disabledBgColor	String	禁用字体颜色 "#ccc"

<radio-checkbox :list="list1" color="#fff"
   bgColor="#55aa00"
   activeTextColor="#fff"
   activeBgColor="#ff5500"
   type="radio"
   :defaultProps="defaultProps"
   fontSize="22rpx"
   @changeItem="changeItem1"
>
</radio-checkbox>
<radio-checkbox :list="list2" color="#fff"
   bgColor="#55aa00"
   activeTextColor="#fff"
   activeBgColor="#ff5500"
   type="checkbox"
   :defaultProps="defaultProps"
   fontSize="22rpx"
   @changeItem="changeItem2"
>
</radio-checkbox>

import radioCheckbox from '@/components/radio-checkbox/radio-checkbox.vue'; //多选单选自定义按钮

export default {
        components: {
            radioCheckbox
        },
        data() {
            return {
                defaultProps: {
                    name: "label",
                    id: "value"
                },
                list1:[
                    {
                        "label":"单选1",
                        "value":1,
                        "disabled":true,//是否禁用
                    },
                    {
                        "label":"单选2",
                        "value":2,
                        "disabled":false,//是否禁用
                    }
                ],
                list2:[
                    {
                        "label":"多选1",
                        "value":1,
                        "isCheck":false,
                        "disabled":true,//是否禁用
                    },
                    {
                        "label":"多选2",
                        "value":1,
                        "disabled":false,//是否禁用
                    }
                ]
            }
        },
        methods:{
            changeItem1(e){

            },
            changeItem2(e){

            }
        }
    }

单选、多选组件 radio，checkbox

更新记录

1.0（2023-08-15）

使用说明

平台兼容性

使用说明

隐私、权限声明

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

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

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

许可协议

MIT协议

单选、多选组件 radio，checkbox

更新记录

1.0（2023-08-15）

使用说明

平台兼容性

使用说明

隐私、权限声明

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

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

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

许可协议

MIT协议

单选、多选组件

Modal title