vue3项目动态修改css变量时遇到的问题记录

最新推荐文章于 2024-08-19 08:00:00 发布

一方净土城南旧事

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_37993468/article/details/128843751

版权

在开发项目中，使用CSS3变量实现布局的自定义主题功能。遇到的问题是，在动态修改导航栏宽度时，CSS3变量的作用域上升到html，并未转换为rem，导致自适应失效。目前通过读取postcss配置的rootValue手动转换为rem来临时解决。寻求对CSS变量更佳的处理方法。

摘要由CSDN通过智能技术生成

起因是最近公司开始了一个新项目，我在搭建基础框架的时候打算用一用 css3 的变量，之前没有了解过，只是在 elementplus 中看过这种写法。于是简单的了解了一下就直接开始用了，反正只是简单的用一下，做一个自定义主题的功能。

项目情况：

amfe-flexible + postcss-pxtorem 实现页面的自适应
css3变量维护一些布局上的全局属性

现在遇到的问题：

在开发左侧导航栏面板的打开与关闭时进行导航栏面板宽度的动态修改。面板默认打开宽度是 120px，点击关闭后修改为90px。

css3 的变量定义如下：

初始化时dom样式属性是这样的：

点击关闭面板再打开面板后，发现css3变量作用域变了，上升到了 html 的内联定义了：

并且没有自动转换为 rem，自适应失效。

暂行的解决办法：

读取 postcss 的rootvalue，在动态修改css变量的时候手动转rem。

import remRootValue from '../../postcss.config';
// 获取配置的 rootValue
let scaleValue = remRootValue.plugins['postcss-pxtorem'].rootValue;

export const keepScale = (needToSize) => {
  needToSize = needToSize / scaleValue;
  needToSize = `${needToSize}`;
  return `${needToSize.replace('rem', '')}rem`;
};

//    修改css变量的方法
let root = document.querySelector(':root');
let rootStyle = window.getComputedStyle(root);
const changeGlobalStyle = (globalProp, value) => {
  root.style.setProperty(globalProp, value);
};


//    修改变量值
changeGlobalStyle('--asideWidth', keepScale(90));
changeGlobalStyle('--asideWidth', keepScale(120));

上面遇到的问题，希望大家能提供一个解决方案。我觉得可能是我对于css变量使用上的了解不足导致的问题。