zk-desktop-ui/docs/components/radio.md

ZKTeco UI Components

## Radio 单选框

在一组备选项中进行单选

### 基础用法

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

> demo

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

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

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



### 禁用状态

单选框不可用的状态。

> demo

 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`zk-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
```html
<template>
  <zk-radio disabled v-model="radio1" label="禁用">备选项</zk-radio>
  <zk-radio disabled v-model="radio1" label="选中且禁用">备选项</zk-radio>
</template>

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



### 单选框组

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

> demo

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

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

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



### 按钮样式

按钮样式的单选组合。

> demo

 只需要把`zk-radio`元素换成`zk-radio-button`元素即可，此外，ZKTecoFE 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
```html
<template>
  <zk-radio-group v-model="radio3">
    <zk-radio-button label="上海"></zk-radio-button>
    <zk-radio-button label="北京"></zk-radio-button>
    <zk-radio-button label="广州" :disabled="true"></zk-radio-button>
    <zk-radio-button label="深圳"></zk-radio-button>
  </zk-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio3: ''
      };
    }
  }
</script>
```



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

### Radio-group Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| size     | Radio 按钮组尺寸   | string  | large, small  |    —     |

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

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