uniapp中单选按钮的实现

标签说明：

radio-group：单项选择器，内部由多个

<radio>

组成。通过把多个

radio

包裹在一个

radio-group

下，实现这些

radio

的单选。

radio：单选项目

属性说明：

@change：

<radio-group>

标签中的radio选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

value：

<radio>

标识。当该

<radio>

选中时，

<radio-group>

的 change 事件会携带

<radio>

的 value

checked：当前是否选中，默认值false，类型是布尔值

disabled：是否禁用，默认值是false，类型是布尔值

color：radio的颜色，同css的color

注意

• radio的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
• 如需调节radio大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"
• radio不是checkbox，点击一个已经选中的radio，不会将其取消选中

上代码：

<!-- uniapp单选框 -->
        <view class="">
            <radio-group @change="chang">
                <label v-for="item in radioGroup" :key="item">
                    <radio :value="item" :checked="item==activeRadio" />{{item}}
                </label>
            </radio-group>
        </view>

<script>
      export default {
        data() {
            return {
                // 单选框数据
                activeRadio: '', //存的是单选按钮选中的value值
                radioGroup: ['苹果', '香蕉', '梨', '西红柿', '西瓜']
            }
        },

        methods: {
                // 单选按钮发生改变时触发的方法
            chang(e) {
                this.activeRadio = e.detail.value;  //选中按钮的value值
                console.log(this.activeRadio);
            }
}
</script>

打印结果：

1.获取选中按钮的value值，e.detail.value，赋值给data中activeRadio声明的变量

2.打印选中按钮的值

实际场景案例，男女单选框

<radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
    <label class="radio">
        <radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="sex == '1'" />男
    </label>
    <label class="radio" style="margin-left: 15%;">
        <radio style="zoom: 0.8;" :color="roleColor" value="2" :checked="sex == '2'" />女
    </label>
</radio-group>

<script>
    export default {
        data() {
            return {

                // 单选框数据
                sex: "", //存的是单选按钮选中的value值,性别值

            }
        },
        methods: {
            radioChange(evt) {
                // console.log(evt);
                this.sex = evt.detail.value;
            },
}
    
</script>

效果图：