Appearance

Return to top
On this page

Radio 单选框

基本使用

可以通过两种方式来使用 radio

传递一个 options 数组来描述 radio

传入一个options数组，label 为展示的文字,value 对应的值，disabled 为是否禁用

显示代码
html
<template>
  <n-radio v-model="radioOpts" :options="radioOptions" />
</template>

<script setup>
  import { ref } from 'vue';
  const radioOptions = [
    { label: '绿色', value: 'green' },
    { label: '蓝色', value: 'blue', disabled: true },
    { label: '黄色', value: 'yellow' },
    { label: '红色', value: 'red' },
  ];

  const radioOpts = ref('green');
</script>

通过标签来描述 radio

label 属性可配置 radio 的 value

显示代码
html
<template>
  <n-radio v-model="radio1" label="备选项1">备选项1</n-radio>
  <n-radio v-model="radio1" label="备选项2">备选项2</n-radio>
  <n-radio v-model="radio1" label="备选项3">备选项3</n-radio>
</template>

<script setup>
  import { ref } from 'vue';
  const radio1 = ref('备选项1');
</script>

禁用状态

disabled 属性可以配置禁用状态

显示代码
html
<template>
  <n-radio v-model="radio2" disabled label="备选项1">备选项1</n-radio>
  <n-radio v-model="radio2" label="备选项2">备选项2</n-radio>
  <n-radio v-model="radio2" label="备选项3">备选项3</n-radio>
</template>

<script setup>
  import { ref } from 'vue';
  const radio2 = ref('备选项2');
</script>

带有边框

border 属性可以配置边框

显示代码
html
<template>
  <n-radio v-model="radio3" label="备选项1" border>备选项1</n-radio>
  <n-radio v-model="radio3" label="备选项2" border>备选项2</n-radio>
  <n-radio v-model="radio3" label="备选项3" border>备选项3</n-radio>
</template>

<script setup>
  import { ref } from 'vue';
  const radio3 = ref('备选项3');
</script>

配置大小

size 属性可以大小，但是必须是带有 border 属性的前提才可以正常工作







显示代码
html
<template>
  <!-- 可以通过标签定义radio -->
  <n-radio v-model="radio4" label="备选项1" border size="large">备选项 1</n-radio>
  <n-radio v-model="radio4" label="备选项2" border size="large"> 备选项 2</n-radio>
  <n-radio v-model="radio4" label="备选项3" border size="large"> 备选项 3</n-radio>
  <br />
  <!-- 可以通过options定义radio -->
  <n-radio v-model="radio4" border size="medium" :options="radioSizeOptions" />
  <br />
  <n-radio v-model="radio4" border size="small" :options="radioSizeOptions" />
  <br />
  <n-radio v-model="radio4" border size="mini" :options="radioSizeOptions" />
</template>

<script setup>
  import { ref } from 'vue';
  const radio4 = ref('备选项1');
  const radioSizeOptions = [
    { label: '备选项1', value: '备选项1' },
    { label: '备选项2', value: '备选项2' },
    { label: '备选项3', value: '备选项3' },
  ];
</script>

API

参数说明类型可选值默认值
v-mod绑定的值string————
labelRadio 的 valuestring————
name原生 name 属性string————
disabled是否禁用boolean——false
Boole是否显示边框boolean——false
size大小尺寸string['large' , 'medium' , 'small' , 'mini']'large'
options按钮描述OptionsArray————
ts
type optionsItemValue = string | number;

interface OptionsArray {
  [index: number]: {
    label: string;
    value: optionsItemValue;
    disabled?: boolean;
  };
}

Events

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