Radio 单选框

单选框用于有一个选择，用户只能选择其中一个的场景。

平台差异说明

基本使用

• 该组件需要搭配radioGroup组件使用，以便用户进行操作时，获得当前单选框组的选中情况，当然，您也可以单独对某个radio进行事件监听
• 通过v-model给radioGroup组件绑定一个变量，这个绑定的变量是双向的(初始值只能是true或者false)，也就是说，您可以无需监听radio或者radioGroup组件的change事件，也能知道哪个 被勾选了

注意： 由于radio组件需要由radioGroup组件提供参数值，这些父子组件间通过Vue的”provide/inject”特性注入依赖， 所以您必须使用radioGroup包裹radio组件才能正常使用。

<template>
    <view class="">
        <u-radio-group v-model="value" @change="radioGroupChange">
            <u-radio 
                @change="radioChange" 
                v-for="(item, index) in list" :key="index" 
                :name="item.name"
                :disabled="item.disabled"
            >
                {{item.name}}
            </u-radio>
        </u-radio-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    name: 'apple',
                    checked: false,
                    disabled: false
                },
                {
                    name: 'banner',
                    checked: false,
                    disabled: false
                },
                {
                    name: 'orange',
                    checked: false,
                    disabled: false
                }
            ],
            value: '',
        };
    },
    methods: {
        // 选中某个单选框时，由radio时触发
        radioChange(e) {
            // console.log(e);
        },
        // 选中任一radio时，由radio-group触发
        radioGroupChange(e) {
            // console.log(e);
        }
    }
};
</script>

禁用radio

设置disabled为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后 再禁用，会有灰色的勾选的图标，但此时依然是不可操作的。

<u-radio-group v-model="value"
    <u-radio :disabled="true">明月几时有</u-radio>
</u-radio-group>

自定义形状

可以通过设置shape为square或者circle，将复选框设置为方形或者圆形

<u-radio-group v-model="value">
    <u-radio shape="circle">月明人倚楼</u-radio>
</u-radio-group>

自定义颜色

此处所指的颜色，为radio选中时的背景颜色，参数为active-color

<u-radio-group v-model="value">
    <u-radio active-color="red">思悠悠，恨悠悠，恨到归时方始休</u-radio>
</u-radio-group>

文本是否可点击

设置label-disabled为false，点击文本时，无法操作radio

<u-radio-group v-model="value">
    <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
</u-radio-group>

API

Radio Props

注意：需要给radioGroup组件通过v-model绑定一个布尔值，来初始化radio的状态，随后该值被双向绑定， 当用户勾选复选框时，该值在radio内部被修改为true，并反映到父组件，否则为false，换言之，您无需监听radio的change事件，也能 知道某一个radio是否被选中的状态

radioGroup Props

radio Event

radioGroup Event