Sunlight UI

主题

Teeker2026-01-12
1129
4.7m

基础使用 ​

基础用法 ​

SunlightSelect 是基于 Element Plus Select 的增强型选择器组件，支持单选、多选、可查询等功能。

请选择内容...

当前选择值：暂无选择

可查询功能 ​

通过设置 filterable: true 开启可查询功能，支持根据输入关键词过滤选项。

请输入城市名称...

当前选择值：暂无选择

多选功能 ​

通过设置 multiple: true 开启多选功能，支持选择多个选项，绑定值为数组类型。

多选示例...

当前选择值：[]

多选限制 ​

通过设置 config: { multipleLimit: 2 } 限制最大选择数量，防止用户选择过多选项。

最多选择2项...

当前选择值：[]

折叠标签 ​

通过设置 config: { collapseTags: true, collapseTagsTooltip: true } 开启折叠标签功能，当选择项过多时自动折叠显示。

折叠标签示例...

当前选择值：[]

可查询多选 ​

结合可查询和多选功能，支持根据关键词过滤并选择多个选项。

可查询的多选示例...

当前选择值：[]

事件处理器配置 ​

通过 eventFunction 配置项可以绑定各种事件处理器，支持所有 Select 组件的事件。

eventFunction 使用方法 ​

eventFunction 是一个对象，键为事件名称，值为事件处理器函数。支持的事件包括：change、focus、blur、clear、visible-change 等。

eventFunction 使用案例（可查询多选） ​

结合可查询和多选功能，支持根据关键词过滤并选择多个选项，同时演示各种事件的触发效果。

eventFunction 使用示例
可查询多选事件配置

事件触发状态：

change事件[]focus事件未触发
blur事件未触发clear事件未触发
visible-change事件未触发

文档说明 ​

SunlightSelect Props 配置项 ​

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

item 配置对象 ​

属性名说明类型默认值
disabled是否禁用选择器booleanfalse
clearable是否显示清除按钮booleanfalse
placeholder选择器占位符string-
size选择器尺寸string'default'
options选项数据数组array[]
setLabel选项标签的键名string'label'
setValue选项值的键名string'value'
filterable是否可查询booleanfalse
customClass自定义样式类string-
customStyle自定义内联样式object-
wrapperStyle边框和样式配置对象object-
config额外属性配置，支持传入任意属性（如 multiple 等）object{}
eventFunction事件处理器配置对象，用于绑定各种事件object{}

config 配置对象（多选相关） ​

属性名说明类型默认值
multiple是否支持多选booleanfalse
multipleLimit多选时的最大选择数量，0 表示无限制number0
collapseTags是否折叠多选标签booleanfalse
collapseTagsTooltip折叠标签时是否显示 tooltipbooleanfalse
multipleCheckbox多选时是否使用复选框booleanfalse
collapseTagsNumber折叠标签时显示的标签数量number1

事件说明 ​

SunlightSelect 组件支持两种事件绑定方式：直接通过 v-on 绑定和通过 eventFunction 配置项绑定。

支持的事件列表 ​

事件名说明回调参数
update:modelValue值更新事件（v-model）val: string/number/array - 更新后的值
change选择变化事件val: string/number/array - 选择后的值
clear清空事件event: Event - 清空事件对象
focus聚焦事件event: Event - 聚焦事件对象
blur失焦事件event: Event - 失焦事件对象
visible-change下拉框显示/隐藏切换事件val: boolean - 下拉框是否可见
search搜索事件（仅在 filterable 为 true 时触发）val: string - 搜索关键词

事件使用方式 ​

1. 直接通过 v-on 绑定事件 ​
vue
<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '直接绑定事件示例',
      options: options
    }"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightSelect } from 'sunlight-ui';

const selectValue = ref('');
const options = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' }
];

function handleChange(val) {
  console.log('选择变化:', val);
}

function handleFocus(event) {
  console.log('聚焦事件:', event);
}

function handleBlur(event) {
  console.log('失焦事件:', event);
}
</script>
2. 通过 eventFunction 配置项绑定事件 ​
vue
<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '通过 eventFunction 绑定事件',
      options: options,
      eventFunction: {
        change: (val) => {
          console.log('选择变化:', val);
        },
        focus: (event) => {
          console.log('聚焦事件:', event);
        },
        blur: (event) => {
          console.log('失焦事件:', event);
        }
      }
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightSelect } from 'sunlight-ui';

const selectValue = ref('');
const options = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' }
];
</script>
3. 两种方式结合使用 ​

直接绑定的事件和通过 eventFunction 配置的事件可以同时使用，都会被触发。

vue
<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '两种方式结合使用',
      options: options,
      eventFunction: {
        change: (val) => {
          console.log('eventFunction - 选择变化:', val);
        }
      }
    }"
    @change="(val) => console.log('直接绑定 - 选择变化:', val)"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightSelect } from 'sunlight-ui';

const selectValue = ref('');
const options = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' }
];
</script>

相关链接 ​