更新记录

1.0.4（2024-11-20） 下载此版本

支持初始值和双向绑定

1.0.3（2024-06-19） 下载此版本

修复说明文挡文案错误

1.0.2（2024-06-19） 下载此版本

补全使用说明文挡

平台兼容性

hbxw-checkboxs组件

介绍

自定义默认Tag样式的多项选择器，内部由多个label包裹的checkbox组成

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="test-container">
        <text class="test-title">tag版样式checkboxs</text>
        <hbxw-checkboxs :list="list" label="label" value="value" @change="listChange"  />
        <hbxw-checkboxs :list="list0" @change="listChange0"  />
        <hbxw-checkboxs :list="list1" @change="listChange1" value="value"  />
        <text class="test-title">通过slot自定义样式的checkboxs</text>
        <hbxw-checkboxs :list="list1" @change="listChange2" value="value">
            <template v-slot="{isActive, item}">
                <view class="checkbox-item" :class="{active: isActive}">{{item['value']}}</view>
            </template>
        </hbxw-checkboxs>

        <text class="test-title">调用实例的reset方法重置checkboxs</text>
        <view class="reset-wrap">
            <hbxw-checkboxs ref="checkboxReset" :list="list" label="label" value="value" @change="listChange"  />
            <button @click="resetTest">重置</button>
        </view>
    <text class="test-title">双向绑定</text>
    <hbxw-checkboxs :list="list" label="label" value="value" v-model:modelVals="testModel"  />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    label: '用户',
                    value: 'user'
                },{
                    label: '商家',
                    value: 'business'
                }],
                list0: ['西瓜','苹果','梨子'],
                list1: [{
                    value: '男生'
                },{
                    value: '女生'
                },{
                    value: '所有'
                }],
        testModel: ['user']
            }
        },
    watch: {
      testModel(newVal) {
        console.log('---- testModel ----:双向绑定',  newVal);
      }
    },
        methods: {
            listChange(values) {
                console.log('---- listChange ----:', values);
            },
            listChange0(values) {
                console.log('---- listChange0 ----:', values);
            },
            listChange1(values) {
                console.log('---- listChange1 ----:', values);
            },
            listChange2(values) {
                console.log('---- listChange2 ----:', values);
            },
            // 调用实例方法重置单选器
            resetTest() {
                this.$refs.checkboxReset.reset();
            }
        }
    }
</script>

<style lang="scss" scoped>
.checkbox-item{
    width: 100rpx;
    height: 100rpx;
    overflow: hidden;
    border-radius: 50%;
    line-height: 100rpx;
    text-align: center;
    border:1px solid #F2F2F2;
    margin-right: 10rpx;
    &.active{
        border:1px solid red;
    }
}
.reset-wrap{
    display: flex;
    align-items: center;
}
</style>

注：默认为tag样式，支持配置文本和边框的选中和未选中颜色，如果你对选项样式有自定义需求，可以通过slot插槽自由定义样式

API

Props

注：value/label如果没有传则直接以当前数组项的值作为选项的值和显示的文本的值

如果传了value则以value为key对的值作为选项的值和显示的文本的值

Events