# Radio 单选框

单独使用(v-model 匹配自身 value)或成组使用(LhRadioGroup 管理选中值)。

单选框
<template>
  <div class="demo-col" style="gap: 18px">
    <div>
      <LhRadioGroup v-model="style" name="painting-style">
        <LhRadio label="工笔" value="gongbi" />
        <LhRadio label="写意" value="xieyi" />
        <LhRadio label="泼墨" value="pomo" disabled />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadioGroup v-model="style" disabled>
        <LhRadio label="工笔" value="gongbi" />
        <LhRadio label="写意" value="xieyi" />
      </LhRadioGroup>
      <p class="demo-note">整组 disabled</p>
    </div>
    <div class="demo-row" style="gap: 20px; flex-wrap: wrap; align-items: center">
      <LhRadioGroup v-model="style" size="small">
        <LhRadio label="工笔" value="gongbi" />
      </LhRadioGroup>
      <LhRadioGroup v-model="style" size="large">
        <LhRadio label="工笔" value="gongbi" />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadio v-model="standalone" label="独立单选(value 透传)" :value="true" />
      <p class="demo-note">当前画风:{{ style }};独立值:{{ String(standalone) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ style: 'xieyi', standalone: false }),
}
</script>

# Radio Props

属性 说明 类型 默认值
v-model 选中取值(model: modelValue/input) unknown —
value 本单选框取值 unknown —
label 文案(或用默认插槽) string —
disabled / size / name — — —

# RadioGroup Props

属性 说明 类型 默认值
v-model 组选中值 unknown —
disabled / size / name 对子项生效 — —

# Events

事件 说明 回调参数
input v-model 事件 —
change 选中值变化时触发 (value)

disabled 状态下 change 被拦截。

最后更新: 2026/10/12 23:57:05

Copyright © 2024-2026 风默文学 | 宁ICP备2024006574号 | 公安备案徽标苏公网安备32040002010537