Vue的style标签块中使用变量动态修改CSS的方法

我想要根据不同的事件去修改页面的样式,也就是修改CSS某些属性。

需求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div>
<span class="test">文字</span>
</div>
</template>

<script>
export default = {
name: '',
data() {
return {
color: 'red'
}
}
}
</script>

<style scope>
.test {
color: "这里想使用 data 里面定义的变量"
}
</style>

这里我想要根据不同的事件去修改这里的color属性,并且在页面上显示。

解决方案

HTML主题结构:

1
2
3
<div class="header" ref="mycolor" @click="func">
<div class="header-info"></div>
</div>

首先作用区域范围内设置“CSS变量”

1
2
3
4
5
6
7
8
9
10
11
<style>
/*在header区域内设置 CSS变量--bcColor */
.header {
--bcColor: #ffffff;
}

/*在子元素中使用该变量*/
.header-info {
background-color: var(--bcColor);
}
</style>

在JS中通过setProperty()方法修改--bcColor的值,从而间接改变对应子元素的(background-color)背景颜色:

1
2
3
4
5
6
7
<script>
methods:{
func () {
this.$refs.mycolor.style.setProperty("--bcColor",'white');
}
}
</script>

几个注意点:

  1. 这里的父标签不要用组件的(el-form、el-upload之类),要用自定义的(div之类)
  2. this.$refs打印为undefined,自然也无法调用其setProperty()方法,这是因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,它们还不存在!$refs也不是响应式的,因此你不应该试图用它在模板中做数据绑定。也就是说ref只有等页面加载完成好之后你才能调用this.$refs,解决办法:如果写在method中,那么可以使用this.$nextTick(() => {})等页面渲染好再调用

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道