事先声明:本文没有使用到Element官网的切换主题方法。
解决这个需求,我用到的是less,并且通过动态修改class来完成的。
第一步先引入less,这里默认安装好了Node.js。
npm install less less-loader --save-dev
注:网上大多数文章都会让读者去配置webpack.base.conf.js
,但这次项目我配置完却报了错,删除后就恢复正常了。
引入Less成功后就可以在项目中使用Less进行样式编译了。
然后就该去新建less文件。
theme存储全部样式及颜色。
color用来设置多个主题色
封装切换class的方法
大功告成,在写个切换方法,num用来控制切换成哪个主题
document.getElementById("app").className = "theme" + num
如果需要长期存储功能,就放入localStorage中。
localStorage.setItem("app",document.getElementById("app").className)
每次调用时取出来
this.save = localStorage.getItem("app");
if(this.save==null||this.save==''){
document.getElementById("app").className = 'theme1'
}else{
document.getElementById("app").className = this.save
}