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>    ||<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`)}