NUR

主题

Radio 单选框 ​

在一组备选项中进行单选。

基础用法 ​

通过 my-radio-group + options 属性快速生成单选组。

北京
上海
广州
深圳
选中: (未选)
vue
<my-radio-group v-model="value" :options="options" />

独立 Radio ​

my-radio 也可独立使用，通过 label 或 value 指定选中值。

选中: (未选)
vue
<my-radio v-model="value" label="A">选项A</my-radio>
<my-radio v-model="value" label="B">选项B</my-radio>
<my-radio v-model="value" label="C">选项C</my-radio>

受控模式 ​

完全受控的 modelValue。

北京
上海
广州
深圳
vue
<my-radio-group v-model="value" :options="options" />
<my-button @click="value = 'gz'">设为广州</my-button>

水平排列 ​

默认水平排列，可通过 direction="vertical" 切换为垂直。

北京
上海
广州
深圳
北京
上海
广州
深圳
vue
<!-- 水平 -->
<my-radio-group v-model="value" :options="options" direction="horizontal" />
<!-- 垂直 -->
<my-radio-group v-model="value" :options="options" direction="vertical" />

自定义指示器 ​

通过 #indicator 插槽替换选中标记。

北京
上海
广州
深圳
vue
<my-radio-group v-model="value" :options="options">
  <template #indicator>
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
    </svg>
  </template>
</my-radio-group>

禁用状态 ​

整个组禁用或单个选项禁用。

北京
上海
广州
深圳
苹果
香蕉
橘子
vue
<!-- 整个组禁用 -->
<my-radio-group v-model="value" :options="options" disabled />

<!-- 单个选项禁用 -->
const options = [
  { label: '苹果', value: 'apple' },
  { label: '橘子', value: 'orange', disabled: true },
]
<my-radio-group v-model="value" :options="options" />

插槽模式 ​

使用默认插槽放置 my-radio 子组件，适合需要自定义每个选项内容的场景。

(未选)
vue
<my-radio-group v-model="value">
  <my-radio label="js">JavaScript</my-radio>
  <my-radio label="ts">TypeScript</my-radio>
  <my-radio label="py">Python</my-radio>
</my-radio-group>

校验 ​

设置 error 属性显示错误提示。

北京
上海
广州
深圳
请指定一个城市
vue
<my-radio-group v-model="value" :options="options" :error="errorMsg" />

按钮变体 ​

variant="button" 呈现为按钮组样式。

北京
上海
广州
深圳
vue
<my-radio-group v-model="value" :options="options" variant="button" />

卡片变体 ​

variant="card" 呈现为卡片样式。

北京
上海
广州
深圳
vue
<my-radio-group v-model="value" :options="options" variant="card" />

组件结构 ​

根元素 <label class="my-radio"> 包含：隐藏的原生 <input type="radio"> __original、圆形外圈 __inner-wrap（选中时内含圆点 __dot）、标签文字 __label。配合 my-radio-group 全局管理选中状态。

CSS 类名 ​

类名说明
.my-radio根元素
.is-disabled禁用状态
.is-checked选中状态
.is-bordered带边框样式
.my-radio__original隐藏的原生 input
.my-radio__inner-wrap圆形外圈
.my-radio__inner内部容器
.my-radio__dot选中圆点
.my-radio__label标签文字

API ​

RadioGroup ​

属性说明类型默认值
modelValue绑定值string | number | boolean—
options选项列表RadioOption[][]
direction排列方向'horizontal' | 'vertical''horizontal'
variant样式变体'default' | 'button' | 'card''default'
disabled是否禁用booleanfalse
size尺寸'large' | 'default' | 'small''default'
error错误提示文字string—
name原生 name 属性string—
ts
interface RadioOption {
  label: string
  value: string | number | boolean
  disabled?: boolean
}
事件说明
update:modelValue值变更
change选中值变更
插槽说明
default放置 my-radio 子组件
indicator自定义选中指示器

Radio ​

属性说明类型默认值
modelValue绑定值（独立使用时）string | number | boolean—
labelRadio 的值和显示文本string | number | boolean—
value选中时的值（优先级高于 label）string | number | boolean—
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
name原生 name 属性string—
事件说明
update:modelValue值变更
change选中值变更
插槽说明
default显示文本
indicator自定义选中指示器