SunlightSelect 支持自定义选项模板，可通过插槽或配置项实现高度定制化的选项显示效果。
当前选择值：暂无选择
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 自定义模板示例数据
const selectValue = ref("");
const options = [
{ label: '选项一', value: 'option1', icon: 'User' },
{ label: '选项二', value: 'option2', icon: 'Star' },
{ label: '选项三', value: 'option3', icon: 'Goods' }
];
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '自定义模板示例...',
clearable: true,
options: options
}"
>
<template #option="{ option }">
<div style="display: flex; align-items: center;">
<el-icon style="margin-right: 8px;">
<component :is="option.icon" />
</el-icon>
{{ option.label }}
</div>
</template>
</SunlightSelect>
</div>
<div style="margin-top: 20px;">
<p>当前选择值：{{ selectValue || '暂无选择' }}</p>
</div>
</div>
</template>通过 #option 插槽可以完全自定义选项的显示内容。
当前选择值：暂无选择
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 插槽自定义选项示例数据
const selectValue = ref("");
const options = [
{ label: '选项一', value: 'option1', disabled: false },
{ label: '选项二', value: 'option2', disabled: true },
{ label: '选项三', value: 'option3', disabled: false }
];
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '插槽自定义选项...',
clearable: true,
options: options
}"
>
<template #option="{ option }">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
<span>{{ option.label }}</span>
<el-tag :type="option.disabled ? 'danger' : 'success'" size="small">
{{ option.disabled ? '禁用' : '可用' }}
</el-tag>
</div>
</template>
</SunlightSelect>
</div>
<div style="margin-top: 20px;">
<p>当前选择值：{{ selectValue || '暂无选择' }}</p>
</div>
</div>
</template>| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| optionTemplate | 选项模板组件，用于自定义选项显示 | component function | - |
| prefix | 选择器前缀内容 | string | - |
| suffix | 选择器后缀内容 | string | - |
| optionFunction | 选项事件处理函数 | object | {} |
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 自定义选项列表 | - |
| option | 自定义单个选项 | { option: object } |
| prefix | 自定义前缀内容 | - |
| suffix | 自定义后缀内容 | - |
| clear-icon | 自定义清除按钮 | - |