VUE动态切换皮肤 VUE动态切换背景图片 操作 / VUE 主题切换
上正文 使用：root ，var（）函数实现
1. 创建皮肤或主题 css目录
一个公共主题文件 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.css
import "@/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);}}VUE动态切换皮肤 VUE动态切换背景图片 操作 / VUE 主题切换相关推荐
- 在vue中 鼠标移入 切换背景图片 移出时再次切换图片
在Vue中,当鼠标移入元素时,可以通过绑定@mouseover事件来触发相应的方法,该方法可以通过修改数据来改变元素的背景图片.同样地,当鼠标移出元素时,可以绑定@mouseout事件触发另一个方法, ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即可 ...
- vue中设置背景图片的方式
vue中设置背景图片 直接设置背景图片 动态设置背景图片 直接设置背景图片 1.在data中声明背景图片相关配置 export default {data () {return {// 顶部导航背景图 ...
- 巧妙的有css合并图片解决tab切换的背景图片
巧妙的有css合并图片解决tab切换的背景图片 有时候做tab切换的时候 会碰到下面的这种情况 我截个图过来看看 tab切换 打开页面时候 茶庄介绍 及鼠标移上去时候 是上面这样的效果 当鼠标移下 ...
- 在vue中设置背景图片
在vue中设置背景图片 在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
- VUE项目打包（解决背景图片不显示问题）
vue项目打包 vue项目打包 改变路径配置 配置背景图片路径 在命令行中用npm run build 进行打包. 查看 改变路径配置 将绝对路径改为相对路径 目标文件:项目目录 > confi ...
- 图片操作的手势动态识别系统
数字图像处理技术是将获得的低质量图像利用计算机处理成更适合人眼观察或仪器检测的图像的技术.嵌入式视觉技术是使用摄像机和计算机代替人眼对目标进行识别,跟踪和测量的技术.因此.数字图像处理技术和嵌入式视觉 ...
- 一款简单的本地音乐播放器，界面美观、包括主题切换、歌单管理等等
MeetMusic 项目地址:lijunyandev/MeetMusic 简介:一款简单的本地音乐播放器,界面美观.包括主题切换.歌单管理等等 音乐-播放器-主题切换- App 效果图 ...
- html给按钮设置背景,设置按钮背景图片(HTML-CSS)
很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用JS去操作表单的提交,即当用户点击这个图片时响应一个JS来提交表单.其实还有一种方法,就是直接设置SUBMIT按钮的图片背景.设置它的图片 ...
最新文章
- 亿级流量压力来袭，你的网站会被击垮吗？（上篇）
- Kafka消费者Consumer常用配置
- css html 属性区别是什么,css常见属性
- android studio小案例代码,AndroidStudio开发小相册实例
- mysql5.5以上my.ini中设置字符集
- Object-C时间与字符串的转化 因多语言设置中造成返回Nil的解决方法
- NOIp 数据结构专题总结 (1)：STL、堆、并查集、ST表、Hash表
- TypeScript Partial 使用的一个小技巧
- Fiori GM4取metadata 从http自动重定向到https原因
- Android 统一View样式，textview样式
- startup,startup mount,startup nomount之间的区别
- Visual SVN的安装
- mysql win linux性能对比,不同系统上 MySQL 的性能对比
- Vue：vue借助全局过滤器、moment、实现实时更新时间
- css3做各种角度三角形
- Java用Freemarker 生成word文档
- FreeRTOS学习笔记（11）——CPU使用率统计
- 使用JAVA将m3u8转换为mp4格式
- 排序学习-必读论文-AMiner
- 想出名 你就这样炒作自己