在一组备选项中进行单选

基础用法

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

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

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

禁用状态

单选框不可用的状态。

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

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

单选框组

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

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

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

按钮样式

按钮样式的单选组合。

<template>
  <div>
    <fx-radio-group v-model="radio1">
      <fx-radio-button label="上海"></fx-radio-button>
      <fx-radio-button label="北京"></fx-radio-button>
      <fx-radio-button label="广州"></fx-radio-button>
      <fx-radio-button label="深圳"></fx-radio-button>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio2" size="medium">
      <fx-radio-button label="上海" ></fx-radio-button>
      <fx-radio-button label="北京"></fx-radio-button>
      <fx-radio-button label="广州"></fx-radio-button>
      <fx-radio-button label="深圳"></fx-radio-button>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio3" size="small">
      <fx-radio-button label="上海"></fx-radio-button>
      <fx-radio-button label="北京" disabled ></fx-radio-button>
      <fx-radio-button label="广州"></fx-radio-button>
      <fx-radio-button label="深圳"></fx-radio-button>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio4" disabled size="mini">
      <fx-radio-button label="上海"></fx-radio-button>
      <fx-radio-button label="北京"></fx-radio-button>
      <fx-radio-button label="广州"></fx-radio-button>
      <fx-radio-button label="深圳"></fx-radio-button>
    </fx-radio-group>
  </div>
</template>

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

带有边框

<template>
  <div>
    <fx-radio v-model="radio1" label="1" border>备选项1</fx-radio>
    <fx-radio v-model="radio1" label="2" border>备选项2</fx-radio>
  </div>
  <div style="margin-top: 20px">
    <fx-radio v-model="radio2" label="1" border size="medium">备选项1</fx-radio>
    <fx-radio v-model="radio2" label="2" border size="medium">备选项2</fx-radio>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio3" size="small">
      <fx-radio label="1" border>备选项1</fx-radio>
      <fx-radio label="2" border disabled>备选项2</fx-radio>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio4" size="mini" disabled>
      <fx-radio label="1" border>备选项1</fx-radio>
      <fx-radio label="2" border>备选项2</fx-radio>
    </fx-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1'
      };
    }
  }
</script>

Radio Attributes

参数	说明	类型	可选值	默认值	PC/移动端支持情况
value / v-model	绑定值	string / number / boolean	—	—	PC/移动端
label	Radio 的 value	string / number / boolean	—	—	PC/移动端
disabled	是否禁用	boolean	—	false	PC/移动端
border	是否显示边框	boolean	—	false	仅PC
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—	仅PC
name	原生 name 属性	string	—	—	仅PC

Radio Events

事件名称	说明	回调参数	PC/移动端支持情况
change	绑定值变化时触发的事件	选中的 Radio label 值	PC/移动端

Radio-group Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |PC/移动端支持情况 | |---------- |-------- |---------- |------------- |-------- |-------- |-------- | | value / v-model | 绑定值 | string / number / boolean | — | — |PC/移动端 | | size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |仅PC | | disabled | 是否禁用 | boolean | — | false |PC/移动端 | | text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |仅PC | | fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |仅PC |

Radio-group Events

事件名称	说明	回调参数	PC/移动端支持情况
change	绑定值变化时触发的事件	选中的 Radio label 值	PC/移动端

Radio-button Attributes

参数	说明	类型	可选值	默认值	PC/移动端支持情况
label	Radio 的 value	string / number	—	—	PC/移动端
disabled	是否禁用	boolean	—	false	PC/移动端
name	原生 name 属性	string	—	—	仅PC