VUE 点击按钮切换长辈模式

最新推荐文章于 2024-09-06 16:44:14 发布

樑。

最新推荐文章于 2024-09-06 16:44:14 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45169810/article/details/126708102

版权

VUE 点击按钮切换长辈模式

安装插件

npm install style-resources-loader -D
npm install vue-cli-plugin-style-resources-loader -D
npm install less-loader@5.0.0 --save
npm install less --save

新建style.less
新建style.less用于把配置全局的默认样式，即默认字体(Big: 20px;Little: 15px)
文件位于： /src/theme/style.less

@normalFontSizeLittle: var(--normalFontSizeLittle,15px);
@normalFontSizeBig: var(--normalFontSizeBig,20px);

//这里的export  如果不用更改变量名的话， 可以不写
:export{
  name: "less";
  normalFontSizeBig:@normalFontSizeBig;
  normalFontSizeLittle:@normalFontSizeLittle;
}

3.配置vue.config.js
可以在项目的任何地方使用less变量

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

4.model.js设置变量
文件位于 /src/theme/model.js

export const themes = {
    default: {	//普通模式
      normalFontSizeBig:"20px",
      normalFontSizeLittle:"15px"
    },
    older: {		//长辈模式
      normalFontSizeBig:"30px",
      normalFontSizeLittle:"25px"
    }
  };

5.定义修改函数theme.js
文件位于/src/theme/theme.js

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

//这个方法用来修改  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("normalFontSizeBig",themeConfig.normalFontSizeBig);
  localStorage.setItem("normalFontSizeLittle",themeConfig.normalFontSizeLittle);
  changeStyle(themeConfig);
}else {
  let themeConfig = {
    normalFontSizeBig: localStorage.getItem("normalFontSizeBig"),
    normalFontSizeLittle: localStorage.getItem("normalFontSizeLittle"),
  };
  changeStyle(themeConfig);
}

}

6.在vue中引用

HTML:

  <button class="btns" @click="changeTheme">点击切换模式</button>

JS:

import { setTheme } from "@/theme/theme";

export default{
 methods: {
     init(){
         this.theme = "default"
         setTheme(this.theme);
     },
     changeTheme(){
         if(this.theme == "default"){
             this.theme = "older"
         }else{
             this.theme = "default"
         }
         setTheme(this.theme)
     },
  } 
}

CSS:

<style lang="less" scoped>
.label-id{
            //   font-size: 25px;
            font-size: @normalFontSizeLittle;
          }
.ButtonText{
      font-size: @normalFontSizeBig;
  }
  </style>

参考地址：
https://blog.csdn.net/hjh15827475896/article/details/123206625?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%20%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E5%88%87%E6%8D%A2%E6%A8%A1%E5%BC%8F&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-6-123206625.142^v46pc_rank_34_default_23&spm=1018.2226.3001.4187
https://zhuanlan.zhihu.com/p/440387917