支持换皮肤的php程序,使用vue + less如何实现简单换肤功能-CSDN博客

下面我就为大家分享一篇使用vue + less 实现简单换肤功能的示例，具有很好的参考价值，希望对大家有所帮助。

做的换肤效果比较简单，只是顶部导航背景色的改变。下面是效果图。

首先，先说一下我最初的思路。

我最初的想法是使用less定义变量，然后通过js来切换变量，通过切换的变量来达到换肤的效果。

我先新建了一个 theme.less文件，代码如下：@theme:@themea;

@themea:pink;

@themeb:blue;

@themec:gray;

如我最开始的想法，应该是通过点击事件来改变变量 @theme 的值。

我用了element-ui这个框架，所以我的下拉菜单的代码也不复杂：

换肤

梦幻粉

天空蓝

雾霾灰

点击事件的回调事件绑定在command事件，我定义了一个changeColor的方法changeColor(command){

console.log(command);//能获取到当前点击的元素的command

}

于是，问题来了，我怎么通过点击事件来改变@theme的值呢？我陷入了沉(搜)思(索)……

终于找到了一个迂回解决问题的方法，其实一开始的想法也没有问题，但是需要再包装一层。怎么包装呢？我们虽然暂时控制不了变量值，但是我们可以控制元素的类名。

我们可以将换肤的部分抽出来用less函数来表示，将theme.less代码改成下面代码

其中 @backcolor是背景色，@fcolor是字体颜色.theme(@backcolor:#EEA2AD,@fcolor:#fff) {

.header {

color: @fcolor;

background: @backcolor;

width: 100%;

height: 2rem;

position: relative;

h4 {

width: 100%;

text-align: center;

line-height: 2rem;

font-size: 1rem;

}

.go-back {

width: 2rem;

height: 2rem;

text-align: center;

color: #fff;

font-size: 0.8rem;

float: left;

line-height: 2rem;

margin-left: 1rem;

position: absolute;

left: 0;

top: 0;

}

.header-cont {

width: 100%;

text-align: center;

line-height: 2rem;

font-size: 1rem;

color: #fff;

}

.colorBtn {

width: 2rem;

height: 2rem;

text-align: center;

color: #fff;

font-size: 0.8rem;

line-height: 2rem;

margin-right: 1rem;

position: absolute;

top: 0;

right: 0;

}

新建一个color.less，设置几种不同的皮肤样式。这里不同的皮肤样式，我用themea,themeb,themec….来表示，对应组件中的command值。当我点击粉色的时候，调用相应的函数给元素添加相对应的类名。不要忘记引用 theme.less@import url('./theme.less');

.themea{

.theme();//默认的样式

}

.themeb{

.theme(blue,#fff);

}

.themec{

.theme(#111,#999);

}

当点击换肤的下拉菜单时，调用的changeColor方法需要给元素添加不同的类名，当然color.less文件记得引用。changeColor(command){

console.log(command);

document.getElementById('app').className ='theme'+command ;