更新记录

1.0.2（2024-06-19）

补全说明文挡

1.0.1（2024-06-18）

增加reset方法，外面通过组件实例属性可以重置单选器 增加isCanCancel配置，可实现再次单击可取消当前选择项

1.0.0（2024-06-18）

新增

平台兼容性

hbxw-radios组件

介绍

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

使用示例

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

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

        <text class="test-title">支持再次点击取消的radios</text>
        <hbxw-radios isCanCancel :list="list" label="label" value="value" @change="listChange"  />

        <text class="test-title">调用实例的reset方法重置radios</text>
        <view class="reset-wrap">
            <hbxw-radios ref="radioReset" :list="list" label="label" value="value" @change="listChange"  />
            <button @click="resetTest">重置</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    label: '用户',
                    value: 'user'
                },{
                    label: '商家',
                    value: 'business'
                }],
                list0: ['西瓜','苹果','梨子'],
                list1: [{
                    value: '男生'
                },{
                    value: '女生'
                },{
                    value: '所有'
                }]
            }
        },
        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.radioReset.reset();
            }
        }
    }
</script>

<style lang="scss" scoped>
.radio-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