Vue 换肤的示例实践
最近公司做的项目得到一个网站换肤的需求,也就是切换主题。那么如何切换主题色呢?切换主题色其实就是切换 CSS,然而在项目中不仅只有 CSS 需要换肤,图标和图片也需要跟随主题进行切换。于是,写一篇文章来记录下 Vue 中实现换肤的过程,先看下效果吧。 本文主要分三部分:CSS 切换,图标切换和图片切换。 CSS切换关于 CSS 颜色的切换,我通过搜索,参考了ElementUI 的方案,总的来说分为四步 在 static 目录下新建一个 theme.css 文件,将需要替换的 CSS 声明在此文件中 .side-bar .account-info {
background: #8981D8 !important; } 声明所有可选的主题,每种颜色都对应于一个关键词,方便区分 通过 AJAX 获取 theme.css ,将颜色值替换为关键词。 {
let style = getStyleTemplate(data)
})
function getStyleTemplate (data) { 把关键词再换回刚刚生成的相应的颜色值,并在页面上添加 style 标签 {
let style = getStyleTemplate(data)
writeNewStyle(style,this.color)
})
function writeNewStyle (originalStyle,colors) { 图标切换由于项目刚开始做的时候并没有考虑到换肤的需求,于是所有图标都是采用 img 标签的方式引用的, 这样就导致无法给 icon 动态切换颜色了,所以,我决定改为 font 文件的方式来使用图标。这里推荐一个网站 icomoon ,这个网站可以轻松地将图片转换成 font 文件。图标也非常适合通过 font 的方式来使用,我们可以更加方便的修改图标的大小和颜色。 通过在线转换,我们将下载下来的 font 文件放入项目中,并新建一个 CSS 文件来声明所有图标。 [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 =========== / .icon-edit:before { 之后就能通过 CSS 类名的方式来引用图标了。 为了使主题生效,我们也需要把图标的 CSS 写入 theme.css 文件中 图片切换项目中还存在很多占位图或者其他图片会随着主题的变化而变化。通过引入所有图片,并用文件名来区分不同主题所对应的图片。在点击切换主题时,切换到主题所对应的文件,就能实现图片切换了。为此,我写了一个 mixin,并在组件中引入 mixin。 placeholderMixin {
this.setThemeValue(theme)
}
bus.$on('changeTheme',callback)
},destroyed () {
bus.$off('changeTheme',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 事件,就会为图片重新赋值,也就达到了切换图片的效果。 这样也就达到了切换主题的效果,但是这种方法需要在几乎所有业务组件中引入 mixin,如果有更好的方法,欢迎与我交流。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |