# 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