VUE动态切换皮肤 VUE动态切换背景图片 操作 / VUE 主题切换(vue切换背景图片)

VUE动态切换皮肤 VUE动态切换背景图片 操作 / VUE 主题切换 上正文  使用：root ，var（）函数实现1. 创建皮肤或主题 css目录

推荐整理分享VUE动态切换皮肤 VUE动态切换背景图片 操作 / VUE 主题切换(vue切换背景图片)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue动态修改背景图,vue动态切换主题,vue换肤实现,vuejs动态切换主题,vue动态切换主题,vue换肤实现,vue动态切换主题,vuejs动态切换主题,内容如对您有帮助，希望把文章链接给更多的朋友！

 一个公共主题文件 theme.css，一个main.js引入文件theme-all.css，一个单独的 主题样式文件 theme-12.css

2. 定义css文件中所要切换的主题的 部分样式 例如 文字颜色，背景颜色，背景图，或者个图标文件等 

这里使用 背景图片作为演示 

  设置公共主题文件所需样式 theme.css ，这里我引入了自己的 12张 图片 小伙伴看清楚噢

@charset "UTF-8";:root{ /*--login-back-image: url(@/assets/background/bg_1.jpg);*/ --login-back-image-month-1: url(@/assets/background/bg_1.jpg); --login-back-image-month-2: url(@/assets/background/bg_2.jpg); --login-back-image-month-3: url(@/assets/background/bg_3.jpg); --login-back-image-month-4: url(@/assets/background/bg_4.jpg); --login-back-image-month-5: url(@/assets/background/bg_5.jpg); --login-back-image-month-6: url(@/assets/background/bg_6.jpg); --login-back-image-month-7: url(@/assets/background/bg_7.jpg); --login-back-image-month-8: url(@/assets/background/bg_8.jpg); --login-back-image-month-9: url(@/assets/background/bg_9.jpg); --login-back-image-month-10: url(@/assets/background/bg_10.jpg); --login-back-image-month-11: url(@/assets/background/bg_11.jpg); --login-back-image-month-12: url(@/assets/background/bg_12.jpg);}

  设置单独的一个样式文件 theme-12.css， 这里我在一个文件中定义了三个主题，每个主题中背景文件不同

/*公共主题部分引入*/@import url(@/assets/css/theme/theme.css);/*定义样式 主题名称*/:root[theme='month-1'] { /*登录背景图片*/ --login-back-image: var(--login-back-image-month-1); --title-text-color: #498be8;}/*定义样式 主题名称*/:root[theme='month-2'] { /*登录背景图片*/ --login-back-image: var(--login-back-image-month-2); --title-text-color: #498be8;}/*定义样式 主题名称*/:root[theme='month-3'] { /*登录背景图片*/ --login-back-image: var(--login-back-image-month-3); --title-text-color: #498be8;}

设置所有 需要引入的 css 样式 theme-all.css

@import url(@/assets/css/theme/theme.css);@import url(@/assets/css/theme/theme-12.css);3.在你的main.js中全局引入css文件  theme-all.cssimport "@/assets/css/theme/theme-all.css";4.使用定义的 主题样式 比如 我在我的登录页xxx.vue中 引入主题中的 背景图片 就是 在 theme-12.css中定义的 --login-back-image 这个 背景图片 使用 var(--login-back-image)写入.back { width: 100%; height: 100%; background-image: var(--login-back-image); background-repeat: no-repeat; background-size: 100%; display: flex; align-items: center;}5.定义主题切换方法，并使用 

我这里是根据日期月份 自动渲染 主题, 如果需要手动切换 ，自行再写 click事件 传入 需要的 主题样式 的名称 就行

mounted() { this.setTheme();}, methods: {//定义一个改变 主题文件的 方法 setTheme() { //我这里是一个按时间 月 修改主题 const date = new Date(); let month = date.getMonth() + 1; document.documentElement.setAttribute("theme","month-"+month); } }