less动态设置 vue中动态改变less变量

转载

墨舞天涯 2024-06-03 11:20:35

文章标签 less动态设置 vue.js less javascript css 文章分类 架构后端开发

今天的工作中，遇到这个问题，原本开发的一套H5已经完成并上线了，现在说要记这套站点可以，手动的改变字体大小。以便给老年人使用的时候带来方便
其实也就是这样的一个需求 Vue + Less + Css变量实现动态换肤功能

如果我们可以动态的定义一个变量（全局的），当我们有一个按钮，更改这个变量的值就好了

安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader 下面是这两个插件的作用

同时我们要在 vue.config.js中把要引入的 less 文件给指明

module.exports = {
	//.....
	 pluginOptions: {
	        "style-resources-loader": {
	            preProcessor: "less",
	            patterns: [
	                // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
	                path.resolve(__dirname, "./src/theme/variable.less"),
	            ],
	        },
	    }
    }

这里我们打算把 less 的定义变量的文件放在 variable.less文件中

npm install style-resources-loader -D
npm install vue-cli-plugin-style-resources-loader -D

定义变量（我们这里只演示把字体改变，所以就简单的设置两个字体变量吧）
在 vue 的 src/theme 目录下新建一个 variable.less 文件，内容如下

@normalFontSize43: var(--normalFontSize43,0.50rem);
@normalFontSize37: var(--normalFontSize37,0.37rem);

//这里的export  如果不用更改变量名的话， 可以不写
:export{
  normalFontSize43:@normalFontSize43;
  normalFontSize37:@normalFontSize37;
}

上面在 variable.less文件中定义了变量并导出了

在 src/theme 目录下定义 size.js 为不同的状态下的，变量组设置值

export const themes = {
  normal: {
    normalFontSize43:"0.43rem",
    normalFontSize37:"0.37rem"
  },
  special: {
    normalFontSize43:"0.53rem",
    normalFontSize37:"0.47rem"
  }
};

定义修改变量的函数也在 src/theme 文件夹下吧

import { themes } from "@/theme/size";

//这个方法用来修改  document.style 中的变量的值
const changeStyle = (obj)=>{
  for(let key in obj){
    document.getElementsByTagName("body")[0].style.setProperty(`--${key}`,obj[key]);
  }
}

//这个方法就是， 我们点击时调用的方法
export const setTheme = (themeName) => {
  localStorage.setItem("theme",themeName);
  const themeConfig = themes[themeName];
  if(themeConfig) {
    localStorage.setItem("normalFontSize43",themeConfig.normalFontSize43);
    localStorage.setItem("normalFontSize37",themeConfig.normalFontSize37);
    changeStyle(themeConfig);
  }else {
    let themeConfig = {
      normalFontSize43: localStorage.getItem("normalFontSize43"),
      normalFontSize37: localStorage.getItem("normalFontSize37"),
    };
    changeStyle(themeConfig);
  }

}

有了上面的配置，我们下面要做的就是在页面中添加一个按钮，来触发修改了

首先在首页的位置定义一个按钮，并添加上 click 事件

less动态设置 vue中动态改变less变量_less动态设置