目录
  1. 1. 原因
  2. 2. 思路
  3. 3. 例子
  4. 4.
Vue 动态修改 CSS 中的伪元素伪类属性(::before/::after)【前端随笔-Vue篇】
Note-Vue

原因

由于vue样式中无法直接读取变量,也就无法动态修改伪元素::before``::after或伪类:hover的属性;

思路

通过动态修改css变量,伪类样式中读取css变量来实现;


例子

组件背景色props提供,应用于组件的伪类;

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
<template>
<div class="container" :style="{'--bg-color': bgColor}">
<div class="box front"></div>
<div class="box back"></div>
</div>
</template>

<script>
export default {
props: {
bgColor: {
type: String,
default: '#000'
}
}
}
</script>

<style lang="scss" scoped>
.container {
.box::before,
.box::after {
background: var(--bg-color);
}
}
</style>

这种方法一般在复杂样式组件,动态样式必须在伪类中才使用;如果能直接给元素设置就不要用这种方法(如下):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div class="container" :style="{background: bgColor}">
xxx
</div>
</template>

<script>
export default {
props: {
bgColor: {
type: String,
default: '#000'
}
}
}
</script>

文章作者: Vincent F0ng
文章链接: https://vincef0ng.cn/post/vue-dynamic-css-pseudo-element/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Vincent F0ng

评论(支持Markdown)