详解Vue 换肤方案验证
时间:2019-08-28
本文章向大家介绍详解Vue 换肤方案验证,主要包括详解Vue 换肤方案验证使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文的换肤方案灵感来自于 element-ui
需求:网站换肤,主题切换。网站的主题色可以在几种常用颜色之间进行切换,还有相关图片、图标也要跟随主题进行切换。
不多说,先看下最终的实现效果:
文章由两部分组成:css切换,图片图标切换
css切换
1.在 static 目录下新建一个 styles 文件夹,在 styles 下新建一个 theme.scss 文件(项目使用了sass,会自动编译成css文件,如果没有使用这些预处理工具可以直接新建 theme.css),将需要替换的 CSS 声明在此文件中。
.theme-test-btn { background-color: #409eff; border-color: #409eff; } .theme-test-btn:hover, .theme-test-btn:focus { background-color: #66b1ff; border-color: #66b1ff; }
2.在 src/assets/js/const/ 目录下新建 theme-colors.js,用于声明所有可选的主题,每种颜色都对应一个关键词,方便区分
const colors = [ { themeId: 0, primaryBtn: '#409eff', // 主要按钮的背景色 priBtnHover: '#66b1ff', // 主要按钮的悬浮、聚焦背景色 }, { themeId: 1, primaryBtn: '#67c23a', priBtnHover: '#85ce61', }, { themeId: 2, primaryBtn: '#e6a23c', priBtnHover: '#ebb563', }, ]; export default colors;
3.通过 ajax 获取 theme.css ,将颜色值替换为关键词。
data() { return { active: 0, themeStyleStr: '', // 存放 替换成关键词的 theme.css 内容 colors: themeColors, // 所有可选的主题颜色数组。即:theme-colors.js 文件export的数组 }; }, mounted() { // 通过 ajax 获取 theme.css 的内容,并将颜色值替换为关键词 this.$http.getThemeFile().then(res => { this.themeStyleStr = this.getStyleTemplate(res); }); }, methods: { // 获取样式模板:将颜色值替换为关键词。 getStyleTemplate(data) { let color = this.colors[0]; delete color.themeId; let colorMap = {}; Object.keys(color).forEach(key => { colorMap[color[key]] = key; }); Object.keys(colorMap).forEach(key => { data = data.replace(new RegExp(key, 'ig'), colorMap[key]); }); return data; }, }
this.$http.getThemeFile 方法
// 使用原生ajax获取换肤的样式文件 getThemeFile() { return new Promise(resolve => { const url = location.origin + '/static/styles/theme.css'; const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { resolve(xhr.responseText); } }; xhr.open('GET', url); xhr.send(); }); }
4.把关键词再换回刚刚生成的相应的颜色值,并在页面上添加 style 标签
methods: { // 点击切换主题 changeTheme(index) { this.active = index; this.setNewStyle(this.themeStyleStr, this.colors[index]); }, // 根据选择的主题颜色,把关键词换成相应的主题颜色,并在页面上添加 style 标签 setNewStyle(originalStyle, colors) { let oldEl = document.getElementById('theme-style'); let cssText = originalStyle; Object.keys(colors).forEach(key => { cssText = cssText.replace(new RegExp(key, 'ig'), colors[key]); }); const style = document.createElement('style'); style.innerHTML = cssText; style.id = 'theme-style'; oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style); } }
图片图标切换
1.图片切换和图标切换是同样的原理。在之前新建好的 theme.scss 文件追加图标引入的样式。
.theme-test-icon { background: url("/static/images/common/list-modify-icon.svg"); }
2.在之前新建好的 theme-colors.js 文件追加图标路径
/*图片统一使用一个路径,更换主题时需要在images文件夹下新建主题文件夹,与原始路径对应,图片文件名须一致 应避免 primaryBtn 与 primaryBtnHover 同时出现,因为正则匹配 primaryBtn 会把 primaryBtnHover 部分匹配出来,达不到效果*/ const colors = [ { themeId: 0, primaryBtn: '#409eff', // 主要按钮的背景色 priBtnHover: '#66b1ff', // 主要按钮的悬浮、聚焦背景色 imagePath: '/static/images', // 图片绝对路径 }, { themeId: 1, primaryBtn: '#67c23a', priBtnHover: '#85ce61', imagePath: '/static/images/theme1', }, { themeId: 2, primaryBtn: '#e6a23c', priBtnHover: '#ebb563', imagePath: '/static/images/theme2', }, ]; export default colors;
3.引入需要主题切换的图片/图标,存放于 /static/images/ 之下,每个额外的主题图片需要一个文件夹进行存放,例如 /theme1 或者 /theme2。注意:各个主题的图片文件名要保持不变;图片路径是根据 theme.scss 里面引入图片样式的路径来决定的,可以根据项目实际情况进行调整。
以上,就是Vue项目实现换肤功能的一种方案。换肤功能的实现还有其他方法,欢迎一起交流学习。
- puremvc框架之hello world!
- windows平台下编辑的内容传到linux平台出现中文乱码的解决办法
- puremvc框架之Command
- python sorted函数
- Centos 6.9下部署Oracle 11G数据库环境的操作记录
- puremvc框架之proxy
- Oracle数据库冷备份与热备份操作梳理
- Oracle数据库重做日志及归档日志的工作原理说明
- 用vs.net2010做flex/flash/as3开发
- python中input()与raw_input()的区别到底是啥?
- VB下中文URL编码问题的解决
- 让ZeGraph在X方向上填满
- 中国区块链技术和产业发展论坛举行——区块链应用发展尚需时日
- silverlight获取外部数据的另一种选择:FluorineFx
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- leetcode周赛(195)
- Scrapy:修改User-Agent方法
- Pycharm 一键加引号
- 单词搜索
- JVM运行时数据区
- 最长重复子数组
- 编辑距离
- 有序矩阵中第K小的元素
- nodejs库yaml读取yml或yaml配置文件
- 爬虫小白:03.requests的使用
- Oracle GoldenGate 19 Microservices数据同步实战与故障处理
- 给“小白”漫画+图示讲解MyBatis原理,就问香不香!
- webClientTest 编写单元测试类
- 关于gorm多表联合查询(left join)的小记
- UnicodeEncodeError: 'latin-1' codec can't encode character 'u2026' in position 30: ordinal not i...