更新记录

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

说明文挡优化

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

双向绑定初始值不生效问题

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

提供双向绑定实现

平台兼容性

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" v-model:radioVal="radiosTest"  />
        <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>
    <text class="test-title">双向绑定</text>
    <hbxw-radios :list="list" label="label" value="value" isCanCancel v-model:modelVal="radiosTest"  />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    label: '用户',
                    value: 'user'
                },{
                    label: '商家',
                    value: 'business'
                }],
                list0: ['西瓜','苹果','梨子'],
                list1: [{
                    value: '男生'
                },{
                    value: '女生'
                },{
                    value: '所有'
                }],
        radiosTest: 'user',
            }
        },
    watch: {
      radiosTest(newVal, _) {
        console.log('---- radiosTest ----:双向绑定',  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.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