Radio 单选按钮请使用手机扫码体验

基本用法

通过 v-model 绑定值当前选中项的 label ,二者一致时 Radio 选中。

  1. html
    <nut-radio
  2. v-model="radioVal"
  3. :label="b"
  4. >备选项1
  5. </nut-radio>
  1. javascript
    export default {
  2. data() {
  3. return {
  4. radioVal:"a",
  5. }
  6. }
  7. };

组合使用

  1. html
    <nut-radio
  2. v-model="radioVal1"
  3. :label="1"
  4. >备选项1
  5. </nut-radio>
  6. <nut-radio
  7. v-model="radioVal1"
  8. :label="2"
  9. >备选项2
  10. </nut-radio>

组合使用 Radio 组件时,推荐使用 RadioGroup 组件,按需加载时,别忘了引入哦

  1. html
    <nut-radiogroup v-model="radioGroupVal1">
  2. <nut-radio label="a">备选项1</nut-radio>
  3. <nut-radio label="b">备选项2</nut-radio>
  4. </nut-radiogroup>
  1. javascript
    export default {
  2. data() {
  3. return {
  4. radioGroupVal1:"b",
  5. }
  6. }
  7. };

禁用状态

通过给 disabled 传布尔值 false ,可将组件禁用

  1. html
    <nut-radio
  2. :disabled="true"
  3. v-model="radioVal2"
  4. label="禁用"
  5. >备选项1
  6. </nut-radio>

RadioGroup整体禁用

  1. html
    <nut-radiogroup v-model="radioGroupVal2" :disabled="true">
  2. <nut-radio label="1">备选项1</nut-radio>
  3. <nut-radio label="2">备选项2</nut-radio>
  4. <nut-radio label="3">备选项3</nut-radio>
  5. </nut-radiogroup>

自定义尺寸

内置 smallbaselarge 三种规格供使用。

  1. html
    <nut-radio
  2. size="small"
  3. >小号
  4. </nut-radio>
  5. <nut-radio
  6. size="base"
  7. >默认
  8. </nut-radio>
  9. <nut-radio
  10. size="large"
  11. >大号
  12. </nut-radio>

自定义RadioGroup整体尺寸

  1. html
    <nut-radiogroup v-model="radioGroupVal3" size="large">
  2. <nut-radio label="1">备选项1</nut-radio>
  3. <nut-radio label="2">备选项2</nut-radio>
  4. <nut-radio label="3">备选项3</nut-radio>
  5. </nut-radiogroup>

禁用动效

通过给 animated 传布尔值 false ,禁用自带动效

  1. html
    <nut-radio
  2. :animated="false"
  3. v-model="radioVal3"
  4. label="a"
  5. >备选项1
  6. </nut-radio>
  7. <nut-radio
  8. :animated="false"
  9. v-model="radioVal3"
  10. label="b"
  11. >备选项2</nut-radio>

禁用 RadioGroup 动效

  1. html
    <nut-radiogroup v-model="radioGroupVal4" :animated="false">
  2. <nut-radio label="a">备选项1</nut-radio>
  3. <nut-radio label="b">备选项2</nut-radio>
  4. <nut-radio label="c">备选项3</nut-radio>
  5. </nut-radiogroup>

新增自定义class

  1. html
    <nut-radio
  2. class="my-radio"
  3. >备选项</nut-radio>

RadioGroup 也支持新增自定义class

Prop

Radio

字段说明类型默认值
v-model当前选中项的标识符,与label值一致时呈选中状态任意类型-
label标识符,与v-model值一致时呈选中状态任意类型-
size尺寸,可选值small/base/largeStringbase
disabled是否禁用Booleanfalse
animated是否需要动效Booleantrue

RadioGroup

字段说明类型默认值
v-model当前选中项的标识符,与label值一致时呈选中状态任意类型-
size尺寸,可选值small/base/largeStringbase
disabled是否禁用Booleanfalse
animated是否需要动效Booleantrue

Radio 单选按钮 - 图1