Radio 单选

概述

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

使用指南

在.vue中引入组件

<script>
    import iRadioGroup from 'iview-mpvue/dist/components/radio-group/radio-group'
    export default {
        components: {
            'i-radio-group': iRadioGroup
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/radio-group/style/css'

示例

<i-panel title="group-水果">
    <i-radio-group @groupChange="handleFruitChange" :current="current" :groups="fruit" :position="position"></i-radio-group>
</i-panel>
<i-button @click="handleClick" type="ghost">切换单选框位置</i-button>

<script>
    export default {
        data() {
            return {
                fruit: [{
                    id: 1,
                    value: '香蕉'
                }, {
                    id: 2,
                    value: '苹果'
                }, {
                    id: 3,
                    value: '西瓜'
                }, {
                    id: 4,
                    value: '葡萄'
                }],
                current: '苹果',
                position: 'left'
            }
        },
        methods: {
            handleFruitChange(evt) {
              this.current = evt.value
            },
            handleClick() {
              this.position = this.position === 'left' ? 'right' : 'left'
            }
        }
    }
</script>

API

RadioGroup properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
current	指定当前选中的项目 value	String	-
groups	项目组内item	Array	[]
position	item位置，可选值为 left 或 right	String	left
color	主题色	String	#2d8cf0

RadioItem properties

属性	说明	类型	默认值
i-item-class	radio自定义 class 类名	String	-
value	当前项的 value	String	-
disabled	是否禁用当前项	Boolean	false