Comment changer de skin dans Vue ?

Cet article présente principalement l'exemple de pratique du changement de skin Vue. Maintenant, je le partage avec vous et le donne comme référence.

Récemment, un projet réalisé par l'entreprise a reçu une demande de reskin de site Web, c'est-à-dire de changement de thème. Alors comment changer la couleur du thème ? Changer la couleur du thème revient en fait à changer de CSS. Cependant, dans le projet, non seulement le CSS doit être modifié, mais les icônes et les images doivent également être modifiées en fonction du thème. J'ai donc écrit un article pour enregistrer le processus de skinning dans Vue, et jetons d'abord un coup d'œil à l'effet.

Cet article est principalement divisé en trois parties : le changement CSS, le changement d'icône et le changement d'image.

Commutation CSS

Concernant la commutation de couleur CSS, j'ai recherché et fait référence à la solution ElementUI De manière générale, elle est divisée en quatre étapes

Créer. un nouveau fichier theme.css dans le répertoire statique, et déclarez le CSS qui doit être remplacé dans ce fichier

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

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

Déclarez tous les thèmes optionnels Chaque couleur correspond à un mot-clé pour une différenciation facile

<. 🎜>

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

Récupérez theme.css via AJAX et remplacez la valeur de couleur par des mots-clés.

 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
}

Remplacez les mots-clés par les valeurs de couleur correspondantes qui viennent d'être générées et ajoutez la balise de style sur la 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)
}

Changement d'icône

Comme la nécessité d'un changement de skin n'a pas été prise en compte lors du démarrage du projet, toutes les icônes ont été référencées à l'aide de balises img

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

Cela a entraîné l'impossibilité de changer dynamiquement les couleurs des icônes. , j'ai décidé d'utiliser l'icône dans un fichier de police à la place. Voici un site Web recommandé, icomoon, qui peut facilement convertir des images en fichiers de polices. Les icônes sont également très adaptées à une utilisation via la police. Nous pouvons modifier la taille et la couleur de l'icône plus facilement.

Grâce à la conversion en ligne, nous mettons le fichier de police téléchargé dans le projet et créons un nouveau fichier CSS pour déclarer toutes les icônes.

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

Ensuite, l'icône peut être référencée via le nom de la classe CSS.

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

Afin de rendre le thème efficace, nous devons également écrire le CSS de l'icône dans le fichier theme.css

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

Changement d'image

Il existe également de nombreuses images d'espace réservé ou d'autres images dans le projet qui changeront à mesure que le thème change. En introduisant toutes les images et en utilisant les noms de fichiers pour distinguer les images correspondant à différents thèmes. Lorsque vous cliquez pour changer de thème, passez au fichier correspondant au thème et vous pourrez changer d'image. Pour ce faire, j'ai écrit un mixin et introduit le mixin dans le composant.

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

Lorsque vous cliquez pour changer de thème, un événement changeTheme sera émis. Lorsque chaque composant reçoit l'événement changeTheme, il réaffectera l'image, réalisant ainsi. commutation.

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

Cela permet également de changer de thème, mais cette méthode nécessite l'introduction de mixins dans presque tous les composants métier. S'il existe une meilleure méthode, n'hésitez pas à communiquer avec moi.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le pourcentage de hauteur de support de table dans bootstrap

Comment implémenter des composants frères et sœurs enfants dans Vue2.0 Data interaction entre

Comment implémenter des méthodes globales personnalisées dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!