Vue使用css变量更换主题色

Vue使用css变量更换主题色

使用css变量更换主题色。
一般会提供几个主题色供用户选择，或者直接使用拾色器让用户选择喜欢的颜色。

css 变量用法

声明一个自定义属性，属性名需要以两个减号（–）开始，属性值则可以是任何有效的CSS值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {
     
  --main-bg-color: #000;
}

注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了：

:root {
     
  --main-bg-color: brown;
}

使用方法，如前所述，使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：

element {
     
  background-color: var(--main-bg-color);
}

在Vue中使用css变量

首先在data中定义一个样式对象

 data() {
     
    return {
     
      styleObj: {
     
        '--themeColor': this.attr.customProps.themeColor.value
      },
    }
}

在template 中绑定样式

<template>
  <div id="tabsCourseList" class="tabs-course-list" 				  :style="styleObj">div>
template>

颜色变化给变量赋值即可，我这里是props 传进来的，所以使用watch监听了一下

watch: {
     
    'attr.customProps.themeColor.value': {
     
      handler: function(val, oldval) {
     
        console.log(val)
        this.styleObj['--themeColor'] = val
      },
      deep: true
    }

  },

在css中使用该变量即可

.li-head{
     
    background-color: var(--themeColor);
  }

以上即可实现通过css变量更换主题色。