Radio 单选框

基本组件-单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。

单独使用

使用 v-model 可以双向绑定数据。

组合使用

使用实现一组互斥的选项组。在组合使用时，Radio 使用 label 来自动判断。每个 Radio 的内容可以自定义，如不填写则默认使用 label 的值。

<template>
    <RadioGroup v-model="phone">
        <Radio label="apple">
            <Icon type="logo-apple"></Icon>
            <span>Apple</span>
        <Radio label="android">
            <Icon type="logo-android"></Icon>
            <span>Android</span>
        </Radio>
        <Radio label="windows">
            <Icon type="logo-windows"></Icon>
            <span>Windows</span>
        </Radio>
    <RadioGroup v-model="animal">
        <Radio label="金斑蝶"></Radio>
        <Radio label="爪哇犀牛"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                phone: 'apple',
                animal: '爪哇犀牛'
            }
        }
    }
</script>

不可用

通过设置属性来禁用单选框。

垂直

设置属性 vertical 可以垂直显示，按钮样式下无效。

<template>
    <RadioGroup v-model="vertical" vertical>
        <Radio label="apple">
            <Icon type="social-apple"></Icon>
            <span>Apple</span>
        </Radio>
        <Radio label="android">
            <Icon type="social-android"></Icon>
            <span>Android</span>
        </Radio>
        <Radio label="windows">
            <Icon type="social-windows"></Icon>
            <span>Windows</span>
        </Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                vertical: 'apple'
            }
        }
    }
</script>

按钮样式

组合使用时可以设置属性type为 button 来应用按钮的样式。

显示边框

^4.0.0 设置属性 border 可以显示边框。

<template>
    <RadioGroup v-model="border">
        <Radio label="金斑蝶" border></Radio>
        <Radio label="爪哇犀牛" border></Radio>
        <Radio label="印度黑羚" border></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                border: '金斑蝶'
            }
        }
    }
</script>

尺寸

通过设置属性size为large或small将按钮样式设置为大和小尺寸，不设置为默认(中)尺寸。