如何使用vue中的data属性，动态修改css的属性。动态改变网站主题色_npm 安装 css-vars-ponyfill

如何使用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) 即可

<style>
 
     .el-step__head.is-finish{
       color:  var(--themeColor) !important;
       .el-step__icon.is-text{//这里设置的是已完成状态里的文字颜色
         color: var(--themeColor) !important;
         border-color: var(--themeColor) !important;
       }
     }
     .el-step__title.is-finish{
       color:  var(--themeColor) !important;
     }
     .el-step__line-inner{//这里设置的是完成后过渡线条颜色
       border-color: var(--themeColor) !important;
     }
     .el-step__head.is-success,.el-step__title.is-success{//这里设置的是完成后的颜色
       color:  var(--themeColor) !important;
     }
 
</style>

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

<el-button :style="{color:gatewayColor,borderColor: gatewayColor}" class="prev-btn" @click="lastStep">上一步</el-button>
 <el-button  :style="{backgroundColor: gatewayColor,borderColor: gatewayColor}"  class="comfirm-btn" :loading="loading" style="margin-left:20px;" type="primary"  @click="Confirm">确定</el-button>