单选框 Radio
常用组件，用于在多个备选项中选中单个状态
基本使用
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<template>
<n-radio :options="options" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref(1)
watchEffect(() => {
console.log('value:', value.value)
})
</script>禁用 & 部分禁用
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<template>
<n-radio :options="options" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref(1)
watchEffect(() => {
console.log('value:', value.value)
})
</script>vue
<template>
<n-radio :options="options" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
disabled: true,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref(3)
watchEffect(() => {
console.log('value:', value.value)
})
</script>支持垂直排列 vertical，自定义间距 gap。效果参考checkbox
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 单选元素数据 | Option[] | [] |
| disabled | 是否禁用 | boolean | false |
| vertical | 是否垂直排列 | boolean | false |
| value(v-model) | 当前选中的值 | any | null |
| gap | 多个单选框之间的间距，单位px，垂直排列时，间距即垂直间距 | number | 8 |
Option Type
| 名称 | 说明 | 类型 |
|---|---|---|
| label | 选项名 | string |
| value | 选项值 | any |
| disabled | 是否禁用单个单选器 | boolean |
Events
| 事件名称 | 说明 | 参数 |
|---|---|---|
| change | 选项变化时的回调函数 | (value: any) => void |