Viog UI

单选框 radio 待优化

用于数据单选情况

使用说明

简单引入

你需要通过v-model向该组件绑定一个Ref控制变量，用于记录单选目标值

value属性为设置radio设置属性值

简单使用
展开代码
<vi-radio v-model="choose" name="simpleuse" value="简单使用"/>

默认情况下选项展示名称为value，你也可以通过默认插槽设置别名

使用
展开代码
<vi-radio v-model="choose" name="simpleuse" value="简单使用">使用</vi-radio>

样式

通过type属性定义不同的单选框样式，目前有default与button两种样式

使用使用
展开代码
<vi-radio v-model="choose" name="simpleuse" value="简单使用">使用</vi-radio>
<vi-radio v-model="choose" name="simpleuse" value="简单使用" type="button">使用</vi-radio>

颜色

可以通过color属性修改单选框颜色

可以使用mutate属性进行色彩变异

purpleredpinkyellowgreenblue
purpleredpinkyellowgreenblue
purpleredpinkyellowgreenblue
purpleredpinkyellowgreenblue
展开代码
<vi-radio v-model="choose" name="simpleuse" value="purple" color="purple"/>
<vi-radio v-model="choose" name="simpleuse" value="red" color="red"/>
<vi-radio v-model="choose" name="simpleuse" value="pink" color="pink"/>
<vi-radio v-model="choose" name="simpleuse" value="yellow" color="yellow"/>
<vi-radio v-model="choose" name="simpleuse" value="green" color="green"/>
<vi-radio v-model="choose" name="simpleuse" value="blue" color="blue"/>
<vi-divider/>
<vi-radio v-model="choose" name="simpleuse" value="purple" type="button" color="purple"/>
<vi-radio v-model="choose" name="simpleuse" value="red" type="button" color="red"/>
<vi-radio v-model="choose" name="simpleuse" value="pink" type="button" color="pink"/>
<vi-radio v-model="choose" name="simpleuse" value="yellow" type="button" color="yellow"/>
<vi-radio v-model="choose" name="simpleuse" value="green" type="button" color="green"/>
<vi-radio v-model="choose" name="simpleuse" value="blue" type="button" color="blue"/>

尺寸

通过size类型定义组件尺寸

bigmiddlesmall
bigmiddlesmall
展开代码
<vi-radio v-model="choose" name="simpleuse" value="big" size="big"/>
<vi-radio v-model="choose" name="simpleuse" value="middle" size="middle"/>
<vi-radio v-model="choose" name="simpleuse" value="small" size="small"/>
<vi-divider/>
<vi-radio v-model="choose" name="simpleuse" value="big" type="button" size="big"/>
<vi-radio v-model="choose" name="simpleuse" value="middle" type="button" size="middle"/>
<vi-radio v-model="choose" name="simpleuse" value="small" type="button" size="small"/>

禁用

通过disabled属性禁用组件

简单使用简单使用
展开代码
<vi-radio v-model="choose" name="simpleuse" value="简单使用" disabled/>
<vi-radio v-model="choose" name="simpleuse" value="简单使用" type="button" disabled/>

单选框组

每一个相同name的单选框都需要绑定一遍未免太不方便，可以使用radio-group组件简化绑定

你的性别
男女沃尔玛购物袋
展开代码
你的性别
<vi-radio-group name="sex" v-model="choose">
  <vi-radio value="male" color="blue">男</vi-radio>
  <vi-radio value="femal" color="pink">女</vi-radio>
  <vi-radio value="wallmart bag" color="green">沃尔玛购物袋</vi-radio>
</vi-radio-group>

Props

radio

属性名描述类型默认值

radio-group

属性名描述类型默认值

插槽

radio

插槽名描述有无默认内容

radio-group

插槽名描述有无默认内容

事件支持

radio

事件名描述参数列表

radio-group

事件名描述参数列表