需求背景
对于我们动态添加样式,可以在:style里面,但是伪类动态添加就不行了,我就在想能不能在data中定义,然后在伪类中使用
代码介绍
我是在一个组件中使用的,小伙伴只需要看伪类动态的样式即可
上代码
<template>
<div class="camera_icon" :style="{background: bgColor, '--color': addColor }" >
</template>
<script>
data () {
return {
bgColor: '#F1F1F1',
addColor: '#DADADA'
}
}
</script>
<style lang="stylus" scoped>
.camera_icon
&:before
content ''
position absolute
background var(--color)
&:after
content ''
position absolute
background var(--color)
</style>