Radio (单选框)
概述
Radio（单选框）组件是一种表单元素，用于用户从一组选项中选择一个唯一选项。它通常用于需要用户在多个选项中做出单一选择的场景，例如性别选择、支付方式选择等。该组件支持尺寸选择、禁用状态等自定义功能，能够适应不同的设计需求。
主要功能
- 尺寸选择：可以调整单选框的大小，以适应不同设计和布局需求。
- 禁用状态：通过
disabled属性，单选框可以设置为禁用状态，禁用状态下用户无法进行选择操作。 - 选项绑定：支持通过
options属性传递一个选项数组，用户可以从中选择一个选项。 - 自定义名称：通过
name属性来设置单选框组的名称，以确保在同一组内只能选择一个选项。 - 双向绑定：支持通过
v-model双向绑定，自动管理选中的值。
预览
基本使用
以下示例展示了如何使用 Radio 组件，用户可以在多个选项中选择一个：
基本使用
展示基本的单选框用法。
<template>
<div>
<se-radio :options="[' Option 1', 'Option 2']" name="group1"></se-radio>
</div>
</template>
<script></script>
<style scoped></style>尺寸选择
可以通过调整 size 属性来选择不同尺寸的单选框：
尺寸选择
展示不同尺寸的单选框。
<template>
<div>
<se-radio
:options="[' Option 1', 'Option 2']"
name="group2"
size="large"
></se-radio>
<se-radio
:options="[' Option 1', 'Option 2']"
name="group3"
size="middle"
></se-radio>
<se-radio
:options="[' Option 1', 'Option 2']"
name="group4"
size="small"
></se-radio>
</div>
</template>
<script></script>
<style scoped></style>禁用状态
Radio 组件支持禁用状态，禁用时用户无法进行任何选择操作：
禁用状态
展示如何禁用单选框。
<template>
<div>
<se-radio
:options="[' Option 1', 'Option 2']"
name="group5"
disabled="true"
></se-radio>
</div>
</template>
<script></script>
<style scoped></style>Radio 参数说明
| 参数名 | 类型 | 默认值 | 描述 | 跳转 Demo |
|---|---|---|---|---|
size | String | "" | 单选框的尺寸，可以选择 "small"、"medium" 或 "large" 等，根据需求调整大小。 | 尺寸选择 |
options | Array<String|Number|Boolean|null> | [] | 单选框的选项列表，支持字符串、数字、布尔值等类型。 | 基本使用 |
name | String | "" | 单选框组的名称，用于在同一组中确保只能选择一个选项。 | 无 |
disabled | Boolean | false | 控制单选框是否禁用。禁用时，用户无法进行选择。 | 禁用状态 |
其他
- 响应式设计：单选框组件支持根据屏幕尺寸自适应调整大小，确保在不同设备上都能提供良好的用户体验。
- 定制样式：可以通过
class和style属性自定义组件的外观，确保与应用的整体设计风格一致。 - 多样化的选项类型：
options属性支持多种数据类型（如字符串、数字、布尔值等），灵活适应不同的场景。