基础使用

基础用法

SunlightCheckbox 是基于 Element Plus Checkbox 的增强型复选框组件，支持单选和分组多选功能。

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

当前选择值：暂无选择

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

// 基础用法示例数据
const checkboxValue = 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;">
      <SunlightCheckbox 
        v-model="checkboxValue" 
        :item="{
          options: options,
          isGroup: true,
          wrapperStyle: {
            focusBorderColor: '#409eff'
          }
        }" 
      />
    </div>
    <div style="margin-top: 20px;">
      <p>当前选择值：{{ checkboxValue.length > 0 ? checkboxValue : '暂无选择' }}</p>
    </div>
  </div>
</template>

<style scoped>
</style>

隐藏源代码

分组模式

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

分组模式（isGroup: true）

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

当前选择值：[ "option1", "option3" ]

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

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

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <p style="margin-bottom: 10px; font-weight: bold;">分组模式（isGroup: true）</p>
      <SunlightCheckbox 
        v-model="checkboxValue" 
        :item="{
          options: options,
          isGroup: true,
          wrapperStyle: {
            focusBorderColor: '#409eff'
          }
        }" 
      />
    </div>
    <div style="margin-top: 20px;">
      <p>当前选择值：{{ checkboxValue.length > 0 ? checkboxValue : '暂无选择' }}</p>
    </div>
  </div>
</template>

<style scoped>
</style>

隐藏源代码

文档说明

SunlightCheckbox Props 配置项

属性名	说明	类型	默认值
modelValue	绑定值，支持双向数据绑定	array	[]
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 Checkbox 文档