Radio 单选框组

快速的数据化配置一个单选框组，常用于搭配数据表单。

基础使用

点击查看代码

<template>
  <div class="demo">
    <p><b>普通样式</b></p>
    <AgelRadio v-model="value" :options="options" :props="{ label: 'name', value: 'id' }"></AgelRadio>
    <p><b>按钮样式</b></p>
    <AgelRadio v-model="value2" :options="['optionA', 'optionB', 'optionC']" button></AgelRadio>
    <p><b>边框样式</b></p>
    <AgelRadio v-model="value2" :options="['optionA', 'optionB', 'optionC']" border></AgelRadio>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

const value = ref('')
const value2 = ref('')
const options = [
  { name: 'nameA', id: 1 },
  { name: 'nameB', id: 2, },
  { name: 'nameC', id: 3, disabled: true }
]

</script>

属性

属性	类型	默认值	说明
options	RadioProps[] | string[]	-	radio 配置
props	{label: string, value: string}	-	RadioProps 配置别名
button	boolean	-	按钮样式
border	boolean	-	边框样式
......	-	-	ElRadioGroup 属性

RadioProps

属性	类型	默认值	说明
label	string	-	标签
value	string | number | boolean	-	选中值
disabled	boolean	-	是否禁用

插槽

名称	插槽作用域	说明
default	{item,index}	自定义模板