Vue中实现‘换肤-切换风格主题’功能的三种方式详解（干货）
方法一：定义全局CSS变量App.vue:demo.vue(css):/*使用全局css变量设置颜色*/.myButton{background:var(--theme_bg_color);}.myDiv{背景:var(--theme_button_color);宽度：200px；height:200px;}demo.vue(html):Skinning/Switchingstylethememethod1:
换成Moccasinbutton>更改为#1E90FF将皮肤更改为#00FF7F换皮肤为DeepPink我是一个可以换皮肤的按钮我是一个可以换肤的div
demo.vue(js):效果：模式二：切换定义的css文件public/css/theme_1.css:.myButton2{background:Moccasin;}.myDiv2{background:Moccasin;}App.vue:demo.vue(html):
更改/切换样式主题方法2：
将皮肤更改为Moccasin<按钮@click="changeTheme2(2)">更改为#1E90FF更改为#00FF7F更改为DeepPink我是一个可以换肤的按钮我是一个可以换肤的div demo.vue(js):作用：方法三：切换顶层CSS类名（需要使用css处理器，如sass、less等）src/assets/css/theme.less：/*四种预设主题*/.theme_1{.myButton3{background:#00ff7f;}.myDiv3{background:#00ff7f;}}.theme_2{.myButton3{background:#00ff7f;}.myDiv3{background:#00ff7f;}}.theme_3{.myButton3{背景:#00ff7f;}.myDiv3{背景:#00ff7f;}}.theme_4{.myButton3{背景:#00ff7f;}}main.js://方法三：需要先导入全局主题样式文件import"./assets/css/theme.less";App.vue:demo.vue(html):
换肤/切换风格主题方法3：
更改为Moccasin更改为#1E90FF把皮肤改成#00FF7F把皮肤改成DeepPink我是一个可以换皮的按钮我是一个可以换肤的div demo.vue(js):效果：
