当前位置：首页 > news >正文

vue+element 换肤功能

news 2025/8/21 16:26:20

1.首先建深色和浅色两个主题样式变量样式表，样式表名和按钮中传入的值一样，本例中起名为default.scss和dark.scss
2.在data中定义主题变量名 zTheme:‘defalut’，默认引用defalut.scss,
在点击按钮时切换引用的样式表，达到换肤效果
3.dom中写入主题切换按钮

 /****更换主题按钮*****/
<div class="set-theme"><el-button type="text" @click="setTheme('dark')">深色主题</el-button>  &emsp; &emsp;||<el-button  type="text" @click="setTheme('default')">浅色主题</el-button>
</div>

2.setTheme 方法逻辑处理

 /****更换主题方法*****/setTheme(themeName){this.zTheme = themeNamelocalStorage.setItem('zTheme',themeName)require(`@/assets/styles/theme/${this.zTheme}.scss`)location.reload();/*this.$parent.$forceUpdate()this.$router.go(0);*/},

3.页面加载时调用存储的theme主题

 created() {const route = this.$route; // 获取当前路由信息if (route.path != '/indexs') {  //此路由为三维系统require(`@/assets/styles/index.scss`)}else {return '';}  //因本项目是二维三维系统在一个项目中，为了不影响三维样式，加此代码，通过判断，只有二维时才加载index.scss/***皮肤***/let theme=localStorage.getItem('zTheme')if(theme){this.zTheme = themerequire(`@/assets/styles/theme/${this.zTheme}.scss`)}