How to change skin in Vue?

This article mainly introduces the example practice of Vue skin change. Now I share it with you and give you a reference.

Recently, a project done by the company received a demand for website skin reskin, that is, switching themes. So how to switch the theme color? Switching the theme color is actually switching CSS. However, in the project, not only CSS needs to be changed, but icons and pictures also need to be switched according to the theme. So, I wrote an article to record the process of skinning in Vue, and let’s take a look at the effect first.

This article is mainly divided into three parts: CSS switching, icon switching and image switching.

CSS switching

Regarding CSS color switching, I searched and referred to the ElementUI solution. Generally speaking, it is divided into four steps

Create a new theme.css file in the static directory, and declare the CSS that needs to be replaced in this file.

.side-bar {
 background: linear-gradient(#B7A3FF, #879FFF) !important;
}

.side-bar .account-info {
 background: #8981D8 !important;
}

Declare all optional themes. Each color corresponds to a keyword for easy differentiation

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'
}]

Get theme.css through AJAX and replace the color value with keywords.

 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
}

Replace the keywords back to the corresponding color values ​​just generated, and add the style tag on the page

 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)
}

Icon switching

Because When the project was first started, the need for skin change was not considered, so all icons were referenced using img tags.

 <img src="../../assets/icon_edit.svg">

This made it impossible to dynamically switch colors for icons, so I decided Change to font file to use icons. Here is a website recommended, icomoon, which can easily convert images into font files. Icons are also very suitable for use through font. We can modify the size and color of the icon more conveniently.

Through online conversion, we put the downloaded font file into the project and create a new CSS file to declare all icons.

@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";
}

After that, you can reference the icon through CSS class name.

 <span class="icon-edit"></span>

In order to make the theme effective, we also need to write the CSS of the icon into the theme.css file

.icon_edit:before {
 background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%);
}

Image switching

Also in the project There are many placeholder images or other images that change as the theme changes. By introducing all pictures and using file names to distinguish pictures corresponding to different themes. When you click to switch the theme, switch to the file corresponding to the theme and you can switch the image. To do this, I wrote a mixin and introduced the mixin into the component.

<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`)
  }
 }
}

When you click to switch the theme, a changeTheme event will be emitted. When each component receives the changeTheme event, it will reassign the value of the image, thus achieving the effect of switching images.

let theme = themeId2Name(this.themeId)
bus.$emit('changeTheme', theme)

This also achieves the effect of switching themes, but this method requires the introduction of mixins in almost all business components. If there is a better method, please feel free to communicate with me.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement table support height percentage in bootstrap

How to implement child sibling components in Vue2.0 Data interaction between

How to implement custom global methods in vue

The above is the detailed content of How to change skin in Vue?. For more information, please follow other related articles on the PHP Chinese website!