vue 动态实现 皮肤切换

303 阅读1分钟

1 App.vue中添加 HTML5 中的新属性data-* 的 data-theme 属性(可以添加变量动态更换)

<div id="app" data-theme="blue"></div>

2 创建css 文件,我用的是less 

#app[data-theme='blue']{
	//书写自己需要的样式,
}

3 全局引入 第二步的样式文件就可以了。 

4 如果动态切换,可以设置变量,(我这里是只有两种,蓝色和白色主题)

<div id="app" :data-theme="test">
 <router-view>
 	<a-switch :checked="test=='blue'?true:false"  @change="themeChange"/>
 </router-view>
</div>
themeChange(val){
	this.test = val ?'blue':'white'
 },