基础使用

基础用法

SunlightRadio 是基于 Element Plus Radio 的增强型单选框组件，支持单选和分组模式。

选项一选项二选项三选项四选项五

当前选择值：暂无选择

<script setup lang="ts">
import { ref } from "vue";
import { SunlightRadio } from "sunlight-ui";

// 基础用法示例数据
const radioValue = ref("");
const options = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' },
  { label: '选项四', value: 'option4', disabled: true },
  { label: '选项五', value: 'option5' }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightRadio 
        v-model="radioValue" 
        :item="{
          options: options,
          isGroup: true,
          wrapperStyle: {
            focusBorderColor: '#409eff'
          }
        }" 
      />
    </div>
    <div style="margin-top: 20px;">
      <p>当前选择值：{{ radioValue || '暂无选择' }}</p>
    </div>
  </div>
</template>

<style scoped>
</style>

隐藏源代码

分组模式

通过设置 isGroup: true 开启分组模式，支持多个单选框组合使用。

分组模式 vs 独立模式

分组模式（isGroup: true）

适用于多个相关选项需要组合在一起的场景，例如性别选择、状态选择等。 会将所有选项包装在一个分组容器中，确保只能选择其中一个选项。

选项一选项二选项三选项四选项五

当前选择值：option2

独立模式（isGroup: false）

适用于单个独立的单选框，例如是否同意条款、是否开启某项功能等。 每个单选框都是独立的，需要单独配置选项。

选项一

选项二

当前选择值：option1

实际应用场景

分组模式适合：

• 性别选择：男 / 女 / 其他
• 学历选择：本科 / 硕士 / 博士 / 其他
• 状态选择：启用 / 禁用

独立模式适合：

• 同意服务条款
• 开启通知
• 记住密码

<script setup lang="ts">
import { ref } from "vue";
import { SunlightRadio } from "sunlight-ui";

// 分组模式示例数据
const groupValue = ref("option2");
const singleValue = ref("option1");
const options = [
  { label: "选项一", value: "option1" },
  { label: "选项二", value: "option2" },
  { label: "选项三", value: "option3" },
  { label: "选项四", value: "option4" },
  { label: "选项五", value: "option5" },
];
</script>

<template>
  <div>
    <h3 style="margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px">分组模式 vs 独立模式</h3>

    <!-- 分组模式 -->
    <div style="margin-bottom: 40px">
      <div style="margin-bottom: 15px">
        <p style="font-weight: bold; margin-bottom: 8px">分组模式（isGroup: true）</p>
        <p style="color: #606266; font-size: 14px; margin-bottom: 10px">
          适用于多个相关选项需要组合在一起的场景，例如性别选择、状态选择等。
          会将所有选项包装在一个分组容器中，确保只能选择其中一个选项。
        </p>
      </div>
      <SunlightRadio
        v-model="groupValue"
        :item="{
          options: options,
          isGroup: true,
          wrapperStyle: {
            focusBorderColor: '#409eff',
          },
        }"
      />
      <div style="margin-top: 15px">
        <p>当前选择值：{{ groupValue || "暂无选择" }}</p>
      </div>
    </div>

    <!-- 独立模式 -->
    <div style="margin-bottom: 40px">
      <div style="margin-bottom: 15px">
        <p style="font-weight: bold; margin-bottom: 8px">独立模式（isGroup: false）</p>
        <p style="color: #606266; font-size: 14px; margin-bottom: 10px">
          适用于单个独立的单选框，例如是否同意条款、是否开启某项功能等。 每个单选框都是独立的，需要单独配置选项。
        </p>
      </div>
      <div style="display: flex; gap: 20px; margin-bottom: 20px">
        <div style="display: flex; align-items: center">
          <SunlightRadio
            v-model="singleValue"
            :item="{
              options: [{ label: '选项一', value: 'option1' }],
              isGroup: false,
              wrapperStyle: {
                focusBorderColor: '#67c23a',
              },
            }"
          />
        </div>
        <div style="display: flex; align-items: center">
          <SunlightRadio
            v-model="singleValue"
            :item="{
              options: [{ label: '选项二', value: 'option2' }],
              isGroup: false,
              wrapperStyle: {
                focusBorderColor: '#e6a23c',
              },
            }"
          />
        </div>
      </div>
      <div style="margin-top: 15px">
        <p>当前选择值：{{ singleValue || "暂无选择" }}</p>
      </div>
    </div>

    <!-- 实际应用场景 -->
    <div style="margin-top: 40px; padding: 15px; background-color: #f5f7fa; border-radius: 8px">
      <p style="font-weight: bold; margin-bottom: 10px">实际应用场景</p>
      <div style="color: #606266; font-size: 14px; line-height: 1.6">
        <p><strong>分组模式适合：</strong></p>
        <ul style="margin: 8px 0 15px 20px; padding-left: 15px; list-style-type: disc">
          <li>性别选择：男 / 女 / 其他</li>
          <li>学历选择：本科 / 硕士 / 博士 / 其他</li>
          <li>状态选择：启用 / 禁用</li>
        </ul>
        <p><strong>独立模式适合：</strong></p>
        <ul style="margin: 8px 0 0 20px; padding-left: 15px; list-style-type: disc">
          <li>同意服务条款</li>
          <li>开启通知</li>
          <li>记住密码</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped></style>

隐藏源代码

文档说明

SunlightRadio Props 配置项

属性名	说明	类型	默认值
modelValue	绑定值，支持双向数据绑定	string number boolean	null
item	单选框配置对象，包含各种属性和样式配置	object	{}

item 配置对象

属性名	说明	类型	默认值
disabled	是否禁用单选框	boolean	false
options	选项数据数组，支持函数形式异步加载	array function	[]
isGroup	是否使用分组模式	boolean	true
customClass	自定义样式类	string	-
customStyle	自定义内联样式	object	-
wrapperStyle	边框和样式配置对象	object	-
config	额外属性配置，支持传入任意属性	object	{}
optionConfig	选项配置对象	object	{}
eventFunction	事件处理函数对象	object	{}
slotNames	插槽名称数组	array	[]

wrapperStyle 配置对象

属性名	说明	类型	默认值
borderColor	单选框边框颜色	string	'#c0c4cc'
borderRadius	单选框圆角大小	string	'4px'
backgroundColor	单选框背景色	string	-
boxShadow	单选框阴影效果	string	-
focusBorderColor	聚焦时边框颜色	string	'#409eff'
focusBoxShadow	聚焦时阴影效果	string	-
focusBoxShadowColor	聚焦时阴影颜色	string	'rgba(64, 158, 255, 0.1)'

选项数据结构

选项数据应为对象数组，每个对象包含以下字段：

字段名	说明	类型	必填
label	选项显示文本	string	是
value	选项值	string number	是
key	选项唯一标识（可选，默认使用 value）	string number	否
disabled	是否禁用该选项	boolean	否

相关链接

• Element Plus Radio 文档