element/examples/docs/zh-CN/radio.md
2017-01-18 15:12:26 +08:00

4.7 KiB
Raw Blame History

Radio 单选框

在一组备选项中进行单选

基础用法

由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。

:::demo 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是String或者Number

<template>
  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

:::

禁用状态

单选框不可用的状态。

:::demo 注意:请牢记,选中的条件是绑定的变量值等于label中的值。只要在el-radio元素中设置disabled属性即可,它接受一个Booleantrue为禁用。

<template>
  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '选中且禁用'
      };
    }
  }
</script>

:::

单选框组

适用于在多个互斥的选项中选择的场景

:::demo 结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value

<template>
  <el-radio-group v-model="radio2">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio2: 3
      };
    }
  }
</script>

:::

按钮样式

按钮样式的单选组合。

:::demo 只需要把el-radio元素换成el-radio-button元素即可此外Element 还提供了size属性给按钮组,支持largesmall两种(如果不设定为默认)。

<template>
  <el-radio-group v-model="radio3">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
  <div style="margin: 15px 0;"></div>
  <el-radio-group v-model="radio4">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京" :disabled="true"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
  <div style="margin: 15px 0;"></div>
  <el-radio-group v-model="radio5" :disabled="true">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio3: '上海',
        radio4: '上海',
        radio5: '上海'
      };
    }
  }
</script>

:::

Radio Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string,number,boolean
disabled 是否禁用 boolean false
name 原生 name 属性 string

Radio-group Attributes

参数 说明 类型 可选值 默认值
size Radio 按钮组尺寸 string large, small
fill 按钮激活时的填充色和边框色 string #20a0ff
text-color 按钮激活时的文本颜色 string #ffffff

Radio-group Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

Radio-button Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string,number
disabled 是否禁用 boolean false