Appearance
Radio 单选框
单选框组件，用于在多个选项中选择单个结果。
基础用法
默认圆形样式
vue
<template>
<div class="radio-demo">
<Radio v-model="selectedValue" :options="radioOptions" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import Radio from '../../../src/components/Radio/Radio.vue'
const selectedValue = ref('option1')
const radioOptions = [
{ label: 'HTML', value: 'option1' },
{ label: 'CSS', value: 'option2' },
{ label: 'JavaScript', value: 'option3' }
]
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>方形样式
vue
<template>
<div class="radio-demo">
<Radio v-model="selectedValue" :options="radioOptions" shape="square" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import Radio from '../../../src/components/Radio/Radio.vue'
const selectedValue = ref('option1')
const radioOptions = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
]
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>按钮样式
vue
<template>
<div class="radio-demo">
<Radio v-model="selectedValue" :options="radioOptions" shape="button" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import Radio from '../../../src/components/Radio/Radio.vue'
const selectedValue = ref('option1')
const radioOptions = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
]
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>卡片样式
卡片样式支持自定义插槽内容，插槽名称格式为card-${value}
vue
<template>
<div class="radio-demo">
<Radio
v-model="selectedValueCard"
:options="radioOptionsCard"
shape="card"
checked-class="custom-checked-class"
>
<template #card-option1="{ option }">
<div class="custom-card-content">
<h5>{{ option.label }}</h5>
<span>{{ option.text }}</span>
</div>
</template>
<template #card-option2="{ option }">
<div class="custom-card-content">
<h5>{{ option.label }}</h5>
<span>{{ option.text }}</span>
</div>
</template>
<template #card-option3="{ option }">
<div class="custom-card-content">
<h5>{{ option.label }}</h5>
<span>{{ option.text }}</span>
</div>
</template>
</Radio>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Radio from '../../../src/components/Radio/Radio.vue';
const selectedValueCard = ref('option1');
const radioOptionsCard = [
{ label: 'HTML', value: 'option1', text: 'html是超文本标记语言' },
{ label: 'CSS', value: 'option2', text: 'css是层叠样式表' },
{ label: 'JavaScript', value: 'option3', text: 'JavaScript是脚本语言' },
];
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
.custom-card-content {
padding: 16px;
}
:deep(.custom-checked-class) {
border: 1px solid rgb(0, 123, 255);
box-shadow: 1px 1px 5px 2px
linear-gradient(to right, rgb(0, 123, 255), rgb(181, 181, 181)) 1;
background-color: rgba(0, 123, 255, 0.01);
border-radius: 4px !important;
}
</style>选项卡样式
设置 shape 为tab,选项卡模式提供标签式的单选体验，底部边框颜色随 type 属性变化
vue
<template>
<div class="radio-demo">
<Radio
v-model="typeValue"
:options="typeOptions"
shape="tab"
type="primary"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Radio from '../../../src/components/Radio/Radio.vue';
const typeValue = ref('1');
const typeOptions = [
{ label: '主要选项', value: '1' },
{ label: '次要选项', value: '2' },
{ label: '次要选项', value: '3' },
];
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>设置 shape 为tab-line,选项卡模式提供没有默认圆形的标签式的单选体验，底部边框颜色随 type 属性变化
vue
<template>
<div class="radio-demo">
<Radio
v-model="typeValue"
:options="typeOptions"
shape="tab-line"
type="primary"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Radio from '../../../src/components/Radio/Radio.vue';
const typeValue = ref('1');
const typeOptions = [
{ label: '主要选项', value: '1' },
{ label: '次要选项', value: '2' },
{ label: '次要选项', value: '3' },
];
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>设置 shape 为tab-button,选项卡模式，按钮样式
vue
<template>
<div class="radio-demo">
<Radio
v-model="typeValue"
:options="typeOptions"
shape="tab-button"
type="primary"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Radio from '../../../src/components/Radio/Radio.vue';
const typeValue = ref('1');
const typeOptions = [
{ label: '主要选项', value: '1' },
{ label: '次要选项', value: '2' },
{ label: '次要选项', value: '3' },
];
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>颜色类型
通过type属性可以设置单选框的颜色类型，支持与 Button 组件相同的颜色体系。
vue
<template>
<div class="radio-type-demo">
<Radio v-model="typeValue" :options="typeOptions" type="default" />
<Radio v-model="typeValue" :options="typeOptions" type="primary" />
<Radio v-model="typeValue" :options="typeOptions" type="success" />
<Radio v-model="typeValue" :options="typeOptions" type="warning" />
<Radio v-model="typeValue" :options="typeOptions" type="danger" />
<Radio v-model="typeValue" :options="typeOptions" type="info" />
</div>
<div class="radio-type-demo">
<Radio
shape="tab-button"
v-model="typeValue"
:options="typeOptions"
type="default"
/>
<Radio
shape="tab-button"
v-model="typeValue"
:options="typeOptions"
type="primary"
/>
<Radio
shape="tab-button"
v-model="typeValue"
:options="typeOptions"
type="success"
/>
<Radio
shape="tab-button"
v-model="typeValue"
:options="typeOptions"
type="warning"
/>
<Radio
shape="tab-button"
v-model="typeValue"
:options="typeOptions"
type="danger"
/>
<Radio
shape="tab-button"
v-model="typeValue"
:options="typeOptions"
type="info"
/>
</div>
<div class="radio-type-demo">
<Radio
shape="tab"
v-model="typeValue"
:options="typeOptions"
type="default"
/>
<Radio
shape="tab"
v-model="typeValue"
:options="typeOptions"
type="primary"
/>
<Radio
shape="tab"
v-model="typeValue"
:options="typeOptions"
type="success"
/>
<Radio
shape="tab"
v-model="typeValue"
:options="typeOptions"
type="warning"
/>
<Radio
shape="tab"
v-model="typeValue"
:options="typeOptions"
type="danger"
/>
<Radio shape="tab" v-model="typeValue" :options="typeOptions" type="info" />
</div>
<div class="radio-type-demo">
<Radio
shape="tab-line"
v-model="typeValue"
:options="typeOptions"
type="default"
/>
<Radio
shape="tab-line"
v-model="typeValue"
:options="typeOptions"
type="primary"
/>
<Radio
shape="tab-line"
v-model="typeValue"
:options="typeOptions"
type="success"
/>
<Radio
shape="tab-line"
v-model="typeValue"
:options="typeOptions"
type="warning"
/>
<Radio
shape="tab-line"
v-model="typeValue"
:options="typeOptions"
type="danger"
/>
<Radio
shape="tab-line"
v-model="typeValue"
:options="typeOptions"
type="info"
/>
</div>
<div class="radio-type-demo">
<Radio
shape="button"
v-model="typeValue"
:options="typeOptions"
type="default"
/>
<Radio
shape="button"
v-model="typeValue"
:options="typeOptions"
type="primary"
/>
<Radio
shape="button"
v-model="typeValue"
:options="typeOptions"
type="success"
/>
<Radio
shape="button"
v-model="typeValue"
:options="typeOptions"
type="warning"
/>
<Radio
shape="button"
v-model="typeValue"
:options="typeOptions"
type="danger"
/>
<Radio
shape="button"
v-model="typeValue"
:options="typeOptions"
type="info"
/>
</div>
<div class="radio-type-demo">
<Radio
shape="square"
v-model="typeValue"
:options="typeOptions"
type="default"
/>
<Radio
shape="square"
v-model="typeValue"
:options="typeOptions"
type="primary"
/>
<Radio
shape="square"
v-model="typeValue"
:options="typeOptions"
type="success"
/>
<Radio
shape="square"
v-model="typeValue"
:options="typeOptions"
type="warning"
/>
<Radio
shape="square"
v-model="typeValue"
:options="typeOptions"
type="danger"
/>
<Radio
shape="square"
v-model="typeValue"
:options="typeOptions"
type="info"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Radio from '../../../src/components/Radio/Radio.vue';
const typeValue = ref('1');
const typeOptions = [
{ label: '主要选项', value: '1' },
{ label: '次要选项', value: '2' },
{ label: '禁用选项', value: '3', disabled: true },
];
</script>
<style scoped>
.radio-type-demo {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
</style>禁用状态
vue
<template>
<div class="radio-demo">
<Radio v-model="selectedValue" :options="radioOptions" disabled />
</div>
</template>
<script setup>
import { ref } from 'vue'
import Radio from '../../../src/components/Radio/Radio.vue'
const selectedValue = ref('option1')
const radioOptions = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2', disabled: true },
{ label: '选项三', value: 'option3' }
]
</script>
<style scoped>
.radio-demo {
padding: 20px 0;
}
</style>属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 绑定值 | string / number / boolean | — | — |
| options | 选项列表 | Array | — | [] |
| name | 原生 name 属性 | string | — | — |
| disabled | 是否禁用 | boolean | true / false | false |
| shape | 单选框样式 | string | circle / square / button / card / tab | circle |
| checkedClass | 选中状态类 | string | - | 可选，仅卡片样式有效，自定义选中状态的 CSS 类名 |
| type | 单选框颜色类型 | string | default/primary/success/warning/danger/info | default |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值变化时触发 | 选中的 value 值 |
选项配置
options 数组中的每个对象可以包含以下属性：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 选项文本 | string | — | — |
| value | 选项值 | string / number / boolean | — | — |
| disabled | 是否禁用该选项 | boolean | true / false | false |