Mind UI Vue

# Radio 单选框

# 介绍

用于在多个选项中选择单个结果。

# 引入

import { RadioGroup, Radio } from 'mind-ui-vue';
Vue.use(RadioGroup);
Vue.use(Radio);

# 示例

# 基础用法

<m-radio-group v-model="radio" @change="onChange">
  <m-radio name="选项1">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

# 禁用

<m-radio-group v-model="radio" disabled @change="onChange">
  <m-radio name="选项1">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

<m-radio-group v-model="radio" @change="onChange">
  <m-radio disabled name="选项1">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

# 自定义选中颜色

<m-radio-group v-model="radio" checked-color="#00CDA2" @change="onChange">
  <m-radio name="选项1">选项1</m-radio>
  <m-radio name="选项2">选项2</m-radio>
</m-radio-group>

# 与单元格一起使用

<m-radio-group v-model="radio" @change="onChange">
  <m-cell icon="feed" title="选项1">
    <m-radio name="选项1"></m-radio>
  </m-cell>
  <m-cell icon="feed" title="选项2">
    <m-radio name="选项2"></m-radio>
  </m-cell>
</m-radio-group>

# Api

# RadioGroup Props

参数 说明 类型 可选值 默认值
v-model 选中项 name 值 Boolean — —
checked-color 选中状态颜色 String — —
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false

# RadioGroup Events

方法名称 说明 值
change 选中值变更时触发回调 event.detail 当前选中项 name

# Radio Props

参数 说明 类型 可选值 默认值
value 选中项 name 值 Boolean — —
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false
checked-color 选中状态颜色，优先级高于 group String — —

# Radio Events

方法名称 说明 值
change 选中值变更时触发回调 event.detail 当前选中项 name

# Radio Slots

名称 说明
— radio 内容

← CheckBox 多选框 →