使用使用vue + less 实现简单换肤功能的示例实现简单换肤功能的示例
下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例,具有很好的参考价值,希望对大家有所帮
助。一起跟随小编过来看看吧
做的换肤效果比较简单,只是顶部导航背景色的改变。下面是效果图。下面是效果图。
首先,先说一下我最初的思路。
我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果。
我先新建了一个我先新建了一个 theme.less文件,代码如下:文件,代码如下:
@theme:@themea;
@themea:pink;
@themeb:blue;
@themec:gray;
如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值。
我用了我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂:这个框架,所以我的下拉菜单的代码也不复杂:
<el-dropdown class="colorBtn " trigger="click" @command="changeColor">
<span class="el-dropdown-link " >换肤</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a" @click="change_type(a)">梦幻粉</el-dropdown-item>
<el-dropdown-item command="b" @click="change_type(b)">天空蓝</el-dropdown-item>
<el-dropdown-item command="c" @click="change_type(c)">雾霾灰</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
点击事件的回调事件绑定在command事件,我定义了一个changeColor的方法
changeColor(command){
console.log(command);//能获取到当前点击的元素的command
}
评论0