Vue 换肤实践

[bigggge]

原文 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，如果有更好的方法，欢迎与我交流。

[Niofh]

学到知识了，感谢楼主！

[wsmPanda]

在前端变量替换感觉性能和灵活性会出现问题
何不直接用预编译语言生成多个主题文件？
不过楼主这种方法倒是能做到让用户在自定义配置主题，解决某些猥琐刁钻的需求

[MinJieLiu]

感觉这种方式并不优雅呢

可以试试 css variable 或者 css in js 。

[bigggge]

生成多套 CSS 文件的方法在主题很多的情况下感觉就不太合适了

[ddddderek]

@bigggge 感觉动态加载的话也还行吧。

[BryanAdamss]

感觉这种方式并不优雅呢

可以试试 css variable 或者 css in js 。

有推荐文章吗?