vue中实现 ‘换肤切换样式主题’ 功能的三种方式详解(干货)

JavaScript020

vue中实现 ‘换肤切换样式主题’ 功能的三种方式详解(干货),第1张

App.vue:

demo.vue(css):

demo.vue(html):

demo.vue(js):

效果:

[图片上传失败...(image-c7afd3-1640662035396)]

Public/css/theme_1.css:

[图片上传失败...(image-e00dc1-1640661903141)]

App.vue:

demo.vue(html):

demo.vue(js):

效果:

[图片上传失败...(image-ed39bb-1640662035396)]

src/assets/css/theme.less:

[图片上传失败...(image-b46701-1640662035396)]

main.js:

App.vue:

demo.vue(html):

demo.vue(js):

效果:

[图片上传失败...(image-f6b84f-1640662035396)]

1.设定一个主题变量

2.在index.html中添加link标签,初始化一个主题文件

3.在Vue组件中进行动态切换