更新记录

1.0.0（2025-09-16） 下载此版本

1.0.0

将复选框与输入框组合封装成组件，支持单选/多选模式，可自定义样式。
1、支持单选和多选两种模式
2、可自定义选中状态的背景色、边框颜色和图标颜色
3、支持为特定选项添加输入框功能
4、当选项被取消选中时，自动清空其输入框内容
5、提供change事件，返回选中的值和输入内容

平台兼容性

其他

可输入复选框（Checkbox Input）组件

描述

将复选框与输入框组合封装成组件，支持单选/多选模式，可自定义样式。
1、支持单选和多选两种模式
2、可自定义选中状态的背景色、边框颜色和图标颜色
3、支持为特定选项添加输入框功能
4、当选项被取消选中时，自动清空其输入框内容
5、提供change事件，返回选中的值和输入内容

更新日志

更新 1.0.0版本
初始版本

安装

请在uniapp插件市场安装

引入

本组件符合easycom组件规范,直接在页面中使用

兼容性

端：全平台支持
vue2 vue3 支持

USE

<template>
    <view style="padding: 40rpx;">
        <view>
            单选：
        </view>
        <view>
            <checkbox-input :localdata="range" @change="change1"></checkbox-input>
        </view>
        <view>
            多选：
        </view>
        <view>
            <checkbox-input multiple :localdata="range" @change="change2"></checkbox-input>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                range: [{
                    "value": '0',
                    "text": "篮球"
                }, {
                    "value": '1',
                    "text": "足球"
                }, {
                    "value": '2',
                    "text": "游泳"
                }, {
                    "value": '3',
                    "text": "其他",
                    "allowInput": true,
                    "inputValue": '',
                    "placeholder": '请输入其他运动'
                }]
            }
        },
        methods: {
            change1(value, value1, arr) {
                console.log('value', value);
                console.log('value1', value1);
                console.log('arr', arr);
            },
            change2(value, value1, arr) {
                console.log('value', value);
                console.log('value1', value1);
                console.log('arr', arr);
            }
        }
    }
</script>

<style>

</style>

Props

属性

说明：

• @property {Array} localdata 选择框的数据，每项包含value(值)、text(显示文本)、allowInput(是否允许输入)、placeholder(输入框占位符)等属性
• @property {Boolean} multiple 是否多选，默认为单选
• @property {String} activeBackgroundColor 选中时的背景色，默认#2979ff
• @property {String} activeBorderColor 选中时的边框颜色，默认#2979ff
• @property {String} iconColor 选中时的图标颜色，默认#ffffff
• @event {Function} change 选择变化时的回调，返回ids(选中的value数组)、idValues(选中的值数组，包含输入内容)、filterArr(选中的完整对象数组)

Author

liuhaixu

V1.0.0

updata log,

V1.0.0
可输入复选框（Checkbox Input）组件