一、变量的声明
注:
1、声明变量的时候,变量名前面要加两根连词线(–)。
2、变量名大小写敏感,–header-color和–Header-Color是两个不同变量。
@headerHeight: 60px;
@headerBgColor: #13c2c0;
:root{
--headerBgColor:#13c2c0;
--mixins_header_color:#fff;
--mixins_left_tree_bg:#fff;
--mixins_left_tree_color:#606266;
--mixins_isHas_margin:true;
--headerColor_rgb:#fff;
--leftTreeBg_rgb:#fff;
--leftTreeColor_rgb:#606266;
}
创建variable.css,都写在统一的文件中
在app.vue style 中 引入
@import url(‘./common/less/variable.less’);
二、JavaScript 操作(样式配置)
let headerColor
let headerColor_rgb
let leftTreeBg
let leftTreeBg_rgb
headerColor = res.data.headerColor ? res.data.headerColor : '#fff'
leftTreeBg = res.data.leftTreeBg ? res.data.leftTreeBg : '#fff'
document.documentElement.style.setProperty('--mixins_header_color', headerColor)
document.documentElement.style.setProperty('--mixins_left_tree_bg', leftTreeBg)
// rgb 值
document.documentElement.style.setProperty('--headerColor_rgb', this.colorChange(headerColor_rgb))
document.documentElement.style.setProperty('--leftTreeBg_rgb', this.colorChange(leftTreeBg_rgb))
方法总结:
设置变量: document.body.style.setProperty(‘–primary’, ‘#7F583F’);
读取变量:document.body.style.getPropertyValue(‘–primary’).trim();
删除变量:document.body.style.removeProperty(‘–primary’);
创建systemColorMixins.js文件,在每个需要用的得页面进行引用:
import systemColorMixins from ‘@/common/js/mixin/systemColorMixins’
mixins: [systemColorMixins],
三、var() 函数 (样式设置)
var()函数用于读取变量。
.el-dialog__header {
padding: 10px 15px;
background: var(--headerBgColor);
color: white;
}
注:var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
background: var(--headerBgColor, #7F583F)
四、其他方法
// 转换为 rgb 颜色
colorRgb(hex) {
if (typeof hex !== 'string') {
return null;
}
// 过滤非法输入
if (!/^#[0-9ABCDEFabcdef]{1,6}$/.test(hex)) {
return null
}
let pureStr = hex.slice(1);
// 处理简写形式
if (pureStr.length === 3) {
// 7f7 => [7, f, 7] => [[7], [f], [7]] => [[77], [ff], [77]] => [77, ff, 77] => 77ff77
pureStr = [].concat(...[...pureStr].map(v => [v]).map(v => v.concat(v))).join('')
}
let result = [];
for (let i = 0; i < pureStr.length; i += 2) {
result.push(parseInt((pureStr[i] + pureStr[i + 1]), 16));
}
return `rgb(${result.join(', ')})`
},
// 获取颜色的 ---> 相近值
colorChange(param) {
var arr = param.slice(4).split(",");
let v0 = parseInt(arr[0]) - 50
let v1 = parseInt(arr[1]) - 50
let v2 = parseInt(arr[2]) - 50
let rgb = 'rgb(' + v0 + ',' + v1 + ',' + v2 + ')'
return rgb
},
16进制颜色转换为 rgb 颜色,用于鼠标悬浮或者是选中的样式,这样颜色不至于写死,效果比写死的要好一些,如果您有更好的方法,请留言,谢谢!