自定义样式
自定义样式
SunlightThree 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义三级联动组件的边框、圆角、背景色、聚焦样式以及选中项样式等。
自定义边框颜色
您可以自定义三级联动组件的边框颜色和聚焦时的边框颜色。
自定义边框颜色
全部
一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
二级 1-2
三级 1-2-1
三级 1-2-2
一级 2
二级 2-1
三级 2-1-1
三级 2-1-2
二级 2-2
三级 2-2-1
三级 2-2-2
选中值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightThree } from "sunlight-ui";
const selectedValue = ref("");
const treeData = ref([
{
id: "1",
label: "一级 1",
children: [
{
id: "1-1",
label: "二级 1-1",
children: [
{ id: "1-1-1", label: "三级 1-1-1" },
{ id: "1-1-2", label: "三级 1-1-2" }
]
},
{
id: "1-2",
label: "二级 1-2",
children: [
{ id: "1-2-1", label: "三级 1-2-1" },
{ id: "1-2-2", label: "三级 1-2-2" }
]
}
]
},
{
id: "2",
label: "一级 2",
children: [
{
id: "2-1",
label: "二级 2-1",
children: [
{ id: "2-1-1", label: "三级 2-1-1" },
{ id: "2-1-2", label: "三级 2-1-2" }
]
},
{
id: "2-2",
label: "二级 2-2",
children: [
{ id: "2-2-1", label: "三级 2-2-1" },
{ id: "2-2-2", label: "三级 2-2-2" }
]
}
]
}
]);
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 8px;">自定义边框颜色</div>
<SunlightThree
:data="treeData"
:defaultValue="selectedValue"
:wrapperStyle="{
borderColor: '#909399',
borderRadius: '8px',
focusBorderColor: '#67c23a',
focusBoxShadow: '0 0 0 3px rgba(103, 194, 58, 0.25)',
selectedBgColor: '#67c23a',
selectedTextColor: '#ffffff'
}"
@change="(val) => selectedValue = val"
/>
</div>
<div style="margin-top: 20px;">
<p>选中值：{{ selectedValue || '暂无选择' }}</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
隐藏源代码
自定义圆角
您可以通过 borderRadius 属性自定义三级联动组件的圆角大小。
自定义圆角
全部
一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
二级 1-2
三级 1-2-1
三级 1-2-2
一级 2
二级 2-1
三级 2-1-1
三级 2-1-2
二级 2-2
三级 2-2-1
三级 2-2-2
选中值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightThree } from "sunlight-ui";
const selectedValue = ref("");
const treeData = ref([
{
id: "1",
label: "一级 1",
children: [
{
id: "1-1",
label: "二级 1-1",
children: [
{ id: "1-1-1", label: "三级 1-1-1" },
{ id: "1-1-2", label: "三级 1-1-2" }
]
},
{
id: "1-2",
label: "二级 1-2",
children: [
{ id: "1-2-1", label: "三级 1-2-1" },
{ id: "1-2-2", label: "三级 1-2-2" }
]
}
]
},
{
id: "2",
label: "一级 2",
children: [
{
id: "2-1",
label: "二级 2-1",
children: [
{ id: "2-1-1", label: "三级 2-1-1" },
{ id: "2-1-2", label: "三级 2-1-2" }
]
},
{
id: "2-2",
label: "二级 2-2",
children: [
{ id: "2-2-1", label: "三级 2-2-1" },
{ id: "2-2-2", label: "三级 2-2-2" }
]
}
]
}
]);
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 8px;">自定义圆角</div>
<SunlightThree
:data="treeData"
:defaultValue="selectedValue"
:wrapperStyle="{
borderRadius: '20px'
}"
@change="(val) => selectedValue = val"
/>
</div>
<div style="margin-top: 20px;">
<p>选中值：{{ selectedValue || '暂无选择' }}</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
隐藏源代码
自定义背景色
您可以自定义三级联动组件的背景色，适合不同的主题需求。
自定义背景色
全部
一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
二级 1-2
三级 1-2-1
三级 1-2-2
一级 2
二级 2-1
三级 2-1-1
三级 2-1-2
二级 2-2
三级 2-2-1
三级 2-2-2
选中值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightThree } from "sunlight-ui";
const selectedValue = ref("");
const treeData = ref([
{
id: "1",
label: "一级 1",
children: [
{
id: "1-1",
label: "二级 1-1",
children: [
{ id: "1-1-1", label: "三级 1-1-1" },
{ id: "1-1-2", label: "三级 1-1-2" }
]
},
{
id: "1-2",
label: "二级 1-2",
children: [
{ id: "1-2-1", label: "三级 1-2-1" },
{ id: "1-2-2", label: "三级 1-2-2" }
]
}
]
},
{
id: "2",
label: "一级 2",
children: [
{
id: "2-1",
label: "二级 2-1",
children: [
{ id: "2-1-1", label: "三级 2-1-1" },
{ id: "2-1-2", label: "三级 2-1-2" }
]
},
{
id: "2-2",
label: "二级 2-2",
children: [
{ id: "2-2-1", label: "三级 2-2-1" },
{ id: "2-2-2", label: "三级 2-2-2" }
]
}
]
}
]);
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 8px;">自定义背景色</div>
<SunlightThree
:data="treeData"
:defaultValue="selectedValue"
:wrapperStyle="{
backgroundColor: '#f5f7fa',
borderColor: '#dcdfe6'
}"
@change="(val) => selectedValue = val"
/>
</div>
<div style="margin-top: 20px;">
<p>选中值：{{ selectedValue || '暂无选择' }}</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
隐藏源代码
自定义聚焦样式
您可以自定义三级联动组件聚焦时的边框颜色和阴影效果。
自定义聚焦样式
全部
一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
二级 1-2
三级 1-2-1
三级 1-2-2
一级 2
二级 2-1
三级 2-1-1
三级 2-1-2
二级 2-2
三级 2-2-1
三级 2-2-2
选中值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightThree } from "sunlight-ui";
const selectedValue = ref("");
const treeData = ref([
{
id: "1",
label: "一级 1",
children: [
{
id: "1-1",
label: "二级 1-1",
children: [
{ id: "1-1-1", label: "三级 1-1-1" },
{ id: "1-1-2", label: "三级 1-1-2" }
]
},
{
id: "1-2",
label: "二级 1-2",
children: [
{ id: "1-2-1", label: "三级 1-2-1" },
{ id: "1-2-2", label: "三级 1-2-2" }
]
}
]
},
{
id: "2",
label: "一级 2",
children: [
{
id: "2-1",
label: "二级 2-1",
children: [
{ id: "2-1-1", label: "三级 2-1-1" },
{ id: "2-1-2", label: "三级 2-1-2" }
]
},
{
id: "2-2",
label: "二级 2-2",
children: [
{ id: "2-2-1", label: "三级 2-2-1" },
{ id: "2-2-2", label: "三级 2-2-2" }
]
}
]
}
]);
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 8px;">自定义聚焦样式</div>
<SunlightThree
:data="treeData"
:defaultValue="selectedValue"
:wrapperStyle="{
focusBorderColor: '#409eff',
focusBoxShadow: '0 0 0 4px rgba(64, 158, 255, 0.25)'
}"
@change="(val) => selectedValue = val"
/>
</div>
<div style="margin-top: 20px;">
<p>选中值：{{ selectedValue || '暂无选择' }}</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
隐藏源代码
自定义选中项样式
您可以自定义三级联动组件中选中项的背景色和文字颜色。
自定义选中项样式
全部
一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
二级 1-2
三级 1-2-1
三级 1-2-2
一级 2
二级 2-1
三级 2-1-1
三级 2-1-2
二级 2-2
三级 2-2-1
三级 2-2-2
选中值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightThree } from "sunlight-ui";
const selectedValue = ref("");
const treeData = ref([
{
id: "1",
label: "一级 1",
children: [
{
id: "1-1",
label: "二级 1-1",
children: [
{ id: "1-1-1", label: "三级 1-1-1" },
{ id: "1-1-2", label: "三级 1-1-2" }
]
},
{
id: "1-2",
label: "二级 1-2",
children: [
{ id: "1-2-1", label: "三级 1-2-1" },
{ id: "1-2-2", label: "三级 1-2-2" }
]
}
]
},
{
id: "2",
label: "一级 2",
children: [
{
id: "2-1",
label: "二级 2-1",
children: [
{ id: "2-1-1", label: "三级 2-1-1" },
{ id: "2-1-2", label: "三级 2-1-2" }
]
},
{
id: "2-2",
label: "二级 2-2",
children: [
{ id: "2-2-1", label: "三级 2-2-1" },
{ id: "2-2-2", label: "三级 2-2-2" }
]
}
]
}
]);
</script>
<template>
<div>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 8px;">自定义选中项样式</div>
<SunlightThree
:data="treeData"
:defaultValue="selectedValue"
:wrapperStyle="{
selectedBgColor: '#f56c6c',
selectedTextColor: '#ffffff'
}"
@change="(val) => selectedValue = val"
/>
</div>
<div style="margin-top: 20px;">
<p>选中值：{{ selectedValue || '暂无选择' }}</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
隐藏源代码
文档说明
自定义样式概述
SunlightThree 提供了强大的自定义样式能力，通过 wrapperStyle 对象可以灵活配置三级联动组件的各种样式属性，实现完全自定义的视觉效果。
wrapperStyle 配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| borderColor | 三级联动组件边框颜色 | string | '#c0c4cc' |
| borderRadius | 三级联动组件圆角大小，支持像素值和百分比 | string | '4px' |
| backgroundColor | 三级联动组件背景色 | string | '#ffffff' |
| boxShadow | 三级联动组件阴影效果 | string | 'none' |
| focusBorderColor | 聚焦时边框颜色 | string | '#409eff' |
| focusBoxShadow | 聚焦时阴影效果 | string | '0 0 0 3px rgba(64, 158, 255, 0.15)' |
| selectedBgColor | 选中项背景色 | string | '#409eff' |
| selectedTextColor | 选中项文字颜色 | string | '#ffffff' |
样式配置要点
- 边框样式：通过
borderColor和focusBorderColor配置边框颜色 - 圆角设计：使用
borderRadius控制圆角大小，支持像素值和百分比 - 背景色：通过
backgroundColor设置三级联动组件背景色，适合不同主题 - 聚焦效果：
focusBorderColor和focusBoxShadow控制聚焦状态样式 - 阴影效果：
boxShadow可添加自定义阴影 - 选中项样式：通过
selectedBgColor和selectedTextColor控制选中项的背景色和文字颜色
主题样式与自定义样式的关系
- 内置主题样式提供了预设的视觉效果
- 自定义样式会覆盖主题样式中的对应配置
- 可以结合使用主题样式和自定义样式，实现更丰富的效果
最佳实践
- 保持一致性：在同一表单中保持三级联动组件样式的一致性
- 合理使用圆角：根据设计风格选择合适的圆角大小
- 聚焦效果明显：确保聚焦状态有明显的视觉反馈
- 选中状态清晰：确保选中状态有明显的视觉区分
- 主题适配：根据应用主题调整三级联动组件样式
- 性能考虑：避免过度复杂的样式配置
注意事项
- 样式值需要遵循 CSS 语法规范
- 颜色值支持 hex、rgb、rgba 等多种格式
- 阴影效果使用 CSS box-shadow 语法
- 自定义样式优先级高于主题样式
- 建议使用变量管理常用颜色和尺寸