如何使用vue中的data属性，动态修改css的属性。动态改变网站主题色

如何使用vue动态改变门户主题色。

 1、安装插件 css-vars-ponyfill       

npm install -s css-vars-ponyfill

它的官网：css-vars-ponyfill - Client-side support for CSS custom properties in legacy and modern browsers

2、在需要的界面中引入

// 引入 字体变量插件

import cssVars from 'css-vars-ponyfill';

3、定义变量

data(){
    return{
        gatewayColor:'#007acc'// 主题颜色 
    } 
},
mounted() {
  // 获取门户主题色
  this.gatewayColor = JSON.parse(window.sessionStorage.getItem("basic")).gatewayColor
  
  cssVars({
    onlyLegacy: true,
    variables: {
      'themeColor': this.gatewayColor
    },
  })
    //获的变量 themeColor 可以在css中使用
      
},

4、在需要自定义颜色的地方 使用 var(--themeColor) 即可

如果是简单的地方 直接动态修改即可

上一步
 确定