Vue+ElementUI实现主题色切换

事先声明:本文没有使用到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
        }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值