VUE 点击按钮切换长辈模式

2024-06-24 02:57| 来源: 网络整理| 查看: 265

VUE 点击按钮切换长辈模式安装插件 npm install style-resources-loader -D npm install vue-cli-plugin-style-resources-loader -D npm install [email protected] --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:

点击切换模式

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:

.label-id{ // font-size: 25px; font-size: @normalFontSizeLittle; } .ButtonText{ font-size: @normalFontSizeBig; }

参考地址： 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-2allsobaiduweb~default-6-123206625.142v46pc_rank_34_default_23&spm=1018.2226.3001.4187 https://zhuanlan.zhihu.com/p/440387917

【本文地址】

公司简介

联系我们