自定义模板
自定义模板
SunlightSelect 支持自定义选项模板，可以通过插槽或配置项实现高度定制化的选项显示效果。
自定义模板示例...
当前选择值：暂无选择
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
隐藏源代码
自定义模板示例
使用插槽自定义选项
通过 #option 插槽可以完全自定义选项的显示内容。
插槽自定义选项...
当前选择值：暂无选择
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
隐藏源代码
自定义前缀和后缀
支持自定义选择器的前缀和后缀内容。
选择:
自定义前缀后缀...
当前选择值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 自定义前缀后缀示例数据
const selectValue = ref("");
const options = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
];
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '自定义前缀后缀...',
clearable: true,
options: options,
prefix: '选择:',
suffix: '▼',
wrapperStyle: {
borderColor: '#409eff',
focusBorderColor: '#66b1ff'
}
}"
/>
</div>
<div style="margin-top: 20px;">
<p>当前选择值：{{ selectValue || '暂无选择' }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
隐藏源代码
文档说明
自定义模板配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| optionTemplate | 选项模板组件，用于自定义选项显示 | component function | - |
| prefix | 选择器前缀内容 | string | - |
| suffix | 选择器后缀内容 | string | - |
| optionFunction | 选项事件处理函数 | object | {} |
插槽说明
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 自定义选项列表 | - |
| option | 自定义单个选项 | { option: object } |
| prefix | 自定义前缀内容 | - |
| suffix | 自定义后缀内容 | - |
| clear-icon | 自定义清除按钮 | - |