vue 动态实现 皮肤切换

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

data-* 属性是 HTML5 中的新属性。

<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'
 },