Vue 换肤的示例实践
最近公司做的项目得到一个网站换肤的需求,也就是切换主题。那么如何切换主题色呢?切换主题色其实就是切换 CSS,然而在项目中不仅只有 CSS 需要换肤,图标和图片也需要跟随主题进行切换。于是,写一篇文章来记录下 Vue 中实现换肤的过程,先看下效果吧。
本文主要分三部分:CSS 切换,图标切换和图片切换。
CSS切换
关于 CSS 颜色的切换,我通过搜索,参考了ElementUI 的方案,总的来说分为四步
在 static 目录下新建一个 theme.css 文件,将需要替换的 CSS 声明在此文件中
.side-bar { background: linear-gradient(#B7A3FF, #879FFF) !important; } .side-bar .account-info { background: #8981D8 !important; }
声明所有可选的主题,每种颜色都对应于一个关键词,方便区分
colors: [{ themeId: 1, familyPrimary: '#B7A3FF', familySecondary: '#879FFF', sideBarTop: '#8981D8' }, { themeId: 2, familyPrimary: '#FDC5C5', familySecondary: '#F070A0', sideBarTop: '#E7829F' }, { themeId: 3, familyPrimary: '#414D6C', familySecondary: '#2D1E3C', sideBarTop: '#423C50' }]
通过 AJAX 获取 theme.css ,将颜色值替换为关键词。
getFile(`/static/theme.css`) .then(({data}) => { let style = getStyleTemplate(data) }) function getStyleTemplate (data) { const colorMap = { '#B7A3FF': 'familyPrimary', '#879FFF': 'familySecondary', '#8981D8': 'sideBarTop' } Object.keys(colorMap).forEach(key => { const value = colorMap[key] data = data.replace(new RegExp(key, 'ig'), value) }) return data }
把关键词再换回刚刚生成的相应的颜色值,并在页面上添加 style 标签
getFile(`/static/theme.css`) .then(({data}) => { let style = getStyleTemplate(data) writeNewStyle(style, this.color) }) function writeNewStyle (originalStyle, colors) { let oldEl = document.getElementById('temp-style') let cssText = originalStyle Object.keys(colors).forEach(key => { cssText = cssText.replace(new RegExp(key, 'ig'), colors[key]) }) const style = document.createElement('style') style.innerText = cssText style.id = 'temp-style' oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style) }
图标切换
由于项目刚开始做的时候并没有考虑到换肤的需求,于是所有图标都是采用 img 标签的方式引用的,
<img src="../../assets/icon_edit.svg">
这样就导致无法给 icon 动态切换颜色了,所以,我决定改为 font 文件的方式来使用图标。这里推荐一个网站 icomoon ,这个网站可以轻松地将图片转换成 font 文件。图标也非常适合通过 font 的方式来使用,我们可以更加方便的修改图标的大小和颜色。
通过在线转换,我们将下载下来的 font 文件放入项目中,并新建一个 CSS 文件来声明所有图标。
@font-face { font-family: 'icomoon'; src: url('../assets/fonts/icomoon.eot?vpkwno'); src: url('../assets/fonts/icomoon.eot?vpkwno#iefix') format('embedded-opentype'), url('../assets/fonts/icomoon.ttf?vpkwno') format('truetype'), url('../assets/fonts/icomoon.woff?vpkwno') format('woff'), url('../assets/fonts/icomoon.svg?vpkwno#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: sub; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-edit:before { content: "\e900"; }
之后就能通过 CSS 类名的方式来引用图标了。
<span class="icon-edit"></span>
为了使主题生效,我们也需要把图标的 CSS 写入 theme.css 文件中
.icon_edit:before { background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%); }
图片切换
项目中还存在很多占位图或者其他图片会随着主题的变化而变化。通过引入所有图片,并用文件名来区分不同主题所对应的图片。在点击切换主题时,切换到主题所对应的文件,就能实现图片切换了。为此,我写了一个 mixin,并在组件中引入 mixin。
<img :src="userImg || placeholderWoman">
placeholderMixin
let callback const placeholderMixin = { data () { return { placeholderWoman: '', placeHolderNoReply: '', placeHolderNothing: '' } }, created () { let themeId = localStorage.getItem('themeId') let theme = themeId2Name(themeId) this.setThemeValue(theme) callback = (theme) => { this.setThemeValue(theme) } bus.$on('changeTheme', callback) }, destroyed () { bus.$off('changeTheme', callback) }, methods: { setThemeValue (theme) { this.placeholderWoman = require(`@/assets/placeholder_woman_${theme}.svg`) this.placeHolderNoReply = require(`@/assets/icon_noreply_${theme}.svg`) this.placeHolderNothing = require(`@/assets/icon_nothing_${theme}.svg`) } } }
在点击切换主题时,会发射一个 changeTheme 事件,各组件接收到 changeTheme 事件,就会为图片重新赋值,也就达到了切换图片的效果。
let theme = themeId2Name(this.themeId) bus.$emit('changeTheme', theme)
这样也就达到了切换主题的效果,但是这种方法需要在几乎所有业务组件中引入 mixin,如果有更好的方法,欢迎与我交流。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- React第三方组件5(状态管理之Redux的使用③TodoList中)
- R语言在收入不平等指标测度上的应用~
- React第三方组件5(状态管理之Redux的使用②TodoList上)
- sscanf
- sprintf的用法
- 01背包精讲
- uva Andy's First Dictionary
- UVA Hangman Judge
- shiny动态仪表盘应用——中国世界自然文化遗产可视化案例
- Decode the tape
- poj To the Max
- Python爬虫系列(七)豆瓣图书排行榜(数据存入到数据库)
- ZOJ 3631 Watashi's BG(01dp)
- How Many Tables (并查集)
- 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 数组属性和方法
- 阔别两年,webpack 5 正式发布了!
- SAP Spartacus delivery mode continue button enable与否的逻辑
- codeforces 1342C(前缀和)
- leetcode-寻找两个正序数组的中位数
- Shell脚本常用命令一览
- 深入学习 React 合成事件
- 关于fixture.debugElement.query(By.css)这个方法的一个疑问
- codeforces 1334C(前缀和)
- Angular通过依赖注入机制注入一个对象的例子
- 简易数据分析(七):Web Scraper 抓取表格、分页器翻页数据
- codeforces 1327C(构造)
- zabbix分布式及高可用
- Angular单元测试的spyOn使用一例
- SQL-JOIN全解析
- Node.js上传单文件和多文件的一些示例博客和源代码