# Botón de radio

Uso individual (v-model coincide con su propio value) o uso en grupo (LhRadioGroup gestiona el valor seleccionado).

Botón de radio
<template>
  <div class="demo-col" style="gap: 18px">
    <div>
      <LhRadioGroup v-model="style" name="painting-style">
        <LhRadio label="Pincel detallado" value="gongbi" />
        <LhRadio label="Trazo libre" value="xieyi" />
        <LhRadio label="Tinta derramada" value="pomo" disabled />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadioGroup v-model="style" disabled>
        <LhRadio label="Pincel detallado" value="gongbi" />
        <LhRadio label="Trazo libre" value="xieyi" />
      </LhRadioGroup>
      <p class="demo-note">Grupo entero deshabilitado</p>
    </div>
    <div class="demo-row" style="gap: 20px; flex-wrap: wrap; align-items: center">
      <LhRadioGroup v-model="style" size="small">
        <LhRadio label="Pincel detallado" value="gongbi" />
      </LhRadioGroup>
      <LhRadioGroup v-model="style" size="large">
        <LhRadio label="Pincel detallado" value="gongbi" />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadio v-model="standalone" label="Radio independiente (value pasa directamente)" :value="true" />
      <p class="demo-note">Estilo actual: {{ style }}; valor independiente: {{ String(standalone) }}</p>
    </div>
  </div>
</template>

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

# Radio Props

Propiedad Descripción Tipo Predeterminado
v-model Valor de la selección (model: modelValue/input) unknown —
value Valor que toma este botón de radio unknown —
label Texto (o el slot por defecto) string —
disabled / size / name — — —

# RadioGroup Props

Propiedad Descripción Tipo Predeterminado
v-model Valor seleccionado del grupo unknown —
disabled / size / name Surte efecto en los elementos secundarios — —

# Eventos

Evento Descripción Parámetro de callback
input Evento de v-model —
change Se dispara al cambiar el valor seleccionado (value)

En estado deshabilitado, change se intercepta.

Copyright © 2024-2026 FengMo WenXue