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

发布时间：2024-01-10

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); } }

本文链接地址:https://www.jiuchutong.com/zhishi/290781.html 转载请保留说明！

上一篇：奥卡万戈三角洲上的非洲草原象群，博茨瓦纳 (© Juan-Carlos Munoz/Minden Pictures)(奥卡万戈三角洲位置)

下一篇：布拉塞河上的雾天黎明，英国湖区国家公园 (© fstopphotography/Getty Images)(布拉塞龙图片)