vant 项目_vue+vant项目动态换肤切换主题

vantui里自带了主题定制功能，是在webpack中进行配置，无法在项目中动态切换皮肤，下面介绍一下在项目里动态换肤，以达到随意切换主题的功能。

开始之前，先介绍几个知识点：

1. html DOM的属性 data-xxx:

<div id="app" data-theme="test">测试</div>

data-* : html5新增的属性，用于存储页面或应用程序的私有自定义数据

该属性值可以在js中直接进行操作:

const dom = document.querySelector("#app")
dom.dataset.theme = 'test2'
console.log(dom.dataset.theme)

在css中也可以直接操作：

#app[data-theme="test2"] {
    color: #eeeeee;
}
// 给data-theme为test2的