我们平时在使用Elementui Antdesing这些UI库时，难免会碰到使用deep强行侵入式去修改组件内部样式的情况；比如下列代码，我们需要把ant的分页样式进行高度自定义，就得使用deep去修改；
这种实现方式确实能够达到我们的目的，但在开发时确总觉得不太合适：
1、他属于强行入侵组件内部去修改，虽然不会有大问题，但总觉得这种取巧方式有点不可取。
2、每次写deep时需要手动检查DOM元素进行编辑，UI文档中并不会有相关API文档；
为了解决心中的这两个结症，趁最近写组件的机会探索了下CSS 的var函数，发现他可以很好的解决以上问题。
利用var函数我们可以具体解决组件开发的以下问题：
1、组件样式自定义可以更加个性化
2、现在很多组件库实现一些样式控制还是依靠props传参的形式，这种var函数结合Style可完全避免props传参的情况，把样式跟props区分开；
3、在组件文档中可明确定制样式属性API；使组件样式可以跟Props属性一样以传参概念去进行高度定制，在使用组件样式时不需要像使用deep一样打开f12去一层一层的找
4、不会侵入式的改动组件内部样式
5、这个方案与deep互不排斥，如果开放的样式API不够用还是可以继续使用deep;
看下面需求,是如何利用css var函数实现一个可自定义大小，颜色，以及子元素样式的卡片
上代码
|
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
|
//Card.vue
<template>
<div class="card">
<img class="card-img" :src="img" />
<p class="card-desc">{{ desc }}</p>
</div>
</template>
<style lang="scss" scoped>
.card {
// 这些以"--"开头的变量就是我们开放可自定义的样式属性了，可以在组件使用文档中明确开放
//卡片根元素样式
--width: 150px;
--height: auto;
--border-size: 1px;
--border-color: #ccc;
--border-radius: 5px;
--bg: #eee;
// 图片可定样式
--img-width: 130px;
--img-height: 130px;
--img-radius: 50%;
// 卡片描述样式
--desc-size: 16px;
--desc-line-height: 32px;
--desc-color: #333;
height: var(--height);
width: var(--width);
border: var(--border-size) solid var(--border-color);
border-radius: var(--border-radius);
background: var(--bg);
padding: 10px;
&-img {
width: var(--img-width);
height: var(--img-height);
border-radius: var(--img-radius);
overflow: hidden;
}
&-desc {
font-size: var(--desc-size);
color: var(--desc-color);
line-height: var(--desc-line-height);
text-align: center;
}
}
</style>
|
这时候我们在API文档则可明确规定样式定制属性了：
组件使用方式：
|
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
|
//demo.vue
<template>
<div >
<Card desc="我是默认的样式我是默认的样式我是默认的样式" :img="img" />
<Card class="card_1" desc="自定义样式，子元素图片变小了" :img="img" />
<Card class="card_2" desc="自定义样式，圆角没了，描述字变小了，高度高了" :img="img" />
</div>
</template>
<script>...</script>
<style lang="scss" scoped>
.card_1 {
--width: 100px;
--height: 200px;
--border-radius: 20px;
--img-width: 80px;
--img-height: 50px;
--img-radius: 10px;
--desc-color: #f00;
--desc-size: 12px;
--desc-line-height: 21px;
}
.card_2 {
--height: 300px;
--border-radius: 0px;
--bg: #fff;
--img-radius: 50px;
--desc-size: 14px;
--desc-line-height: 21px;
}
</style>
|
以上就是一个基本的组件实现；还种情况我们在使用UI库时也会碰到需要使用Props传过来计算的参数，比如下列代码：
这种我们也可以把这些全提出来使用style属性。让样式与js参数彻底隔离
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//demo.vue
<template>
<card
desc="我是默认的样式我是默认的样式"
:img="img"
:style="hoverStyle"
@mouseout="hoverStyle = {}"
@mouseover="handleHover"
/>
</template>
<script setup>
let hoverStyle = ref({});
const handleHover = () => {
hoverStyle.value = { '--bg': '#f0f', '--width': '180px' };
};
</script>
|
我们在组件内
JS可以使用props.style获取到设置的值,css中可以使用calc变量与var结合去计算你想要的值
|
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
|
//card.vue
<template>
<div class="card" :style="style">
{{ width }}
<img class="card-img" :src="img" />
<p class="card-desc">{{ desc }}</p>
</div>
</template>
<script setup>
const $props = defineProps({
img: {
type: String,
default: '',
},
desc: {
type: String,
default: '',
},
style: {
type: Object,
default: () => ({}),
},
});
//假如你在js中需要用到宽度
let width = computed(() => {
return parseInt($props.style['--width'] || 150);
});
</script>
<style lang="scss" scoped>
.card{
...
//假如你有个子级元素需要基于宽度计算
.item{
width: calc(var(--width) - 100)
}
...
}
</style>
|
但是这种实现有命名空间的问题所以需要稍微注意下变量命名，最好加独有的命名规则。防止变量覆盖；
|
1
2
3
4
5
|
//比如这样
.ch-card{
--ch-card-width:100px;
--ch-card-height:100px;
}
|
总结下这种方案的优缺点：
优点
1、组件样式自定义可以更加个性化
2、现在很多组件库实现一些样式控制还是依靠props传参的形式，这种var函数结合Style可完全避免props传参的情况，把样式跟props区分开；
3、在组件文档中可明确定制样式属性API；使组件样式可以跟Props属性一样以传参概念去进行高度定制，在使用组件样式时不需要像使用deep一样打开f12去一层一层的找
4、不会侵入式的改动组件内部样式
5、这个方案与deep互不排斥，如果开放的样式API不够用还是可以继续使用deep;
缺点：
1、开发组件时会工作量会增大，但是磨刀不误砍柴功
2、命名空间问题导致命名会有点长。
