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