我想要根据不同的事件去修改页面的样式,也就是修改CSS某些属性。
需求
1 | <template> |
这里我想要根据不同的事件去修改这里的color属性,并且在页面上显示。
解决方案
HTML主题结构:
1 | <div class="header" ref="mycolor" @click="func"> |
首先作用区域范围内设置“CSS变量”
1 | <style> |
在JS中通过setProperty()
方法修改--bcColor
的值,从而间接改变对应子元素的(background-color)背景颜色:
1 | <script> |
几个注意点:
- 这里的父标签不要用组件的(el-form、el-upload之类),要用自定义的(div之类)
this.$refs
打印为undefined,自然也无法调用其setProperty()
方法,这是因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,它们还不存在!$refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。也就是说ref只有等页面加载完成好之后你才能调用this.$refs
,解决办法:如果写在method中,那么可以使用this.$nextTick(() => {})
等页面渲染好再调用