Skip to content

RadioGroup 单选框组

用于包裹并集中管理多个 <mu-radio> 互斥单选框的容器组件,支持纵向或横向排列布局。


代码示例

1. 基础用法

vue
<template>
  <mu-radio-group v-model="selected" direction="horizontal" @change="onChange">
    <mu-radio name="alipay" label="支付宝" />
    <mu-radio name="wechat" label="微信支付" />
  </mu-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('wechat')
const onChange = (val) => console.log('当前选中:', val)
</script>

API 属性说明 (Props)

参数名说明类型可选值默认值
v-model / modelValue当前已选中的子项 name 标识值String | Number | Boolean-''
direction子单选框排列布局方向Stringvertical | horizontal'vertical'

事件说明 (Events)

事件名说明回调参数
update:modelValue双向绑定更改变(value: String | Number | Boolean)
change选中项改变时触发(value: String | Number | Boolean)

插槽说明 (Slots)

插槽名说明
default子级单选框 <mu-radio> 容器插槽

基于 MIT 协议开源发行

H5 模拟器 (radio-group)☀️🔄