Практика создания скинов Vue

Ресурсы изображений Icon Vue.js CSS
Практика создания скинов Vue

оригинальныйПрактика создания скинов Vue

Недавно у проекта компании появилась потребность в скиннинге сайта, то есть переключении тем. Итак, как переключить цвет темы? Переключение цвета темы — это фактически переключение CSS, однако в проекте не только CSS нужно скинить, но и иконки и изображения нужно переключать вместе с темой. Итак, напишите статью, чтобы записать процесс создания скинов в Vue, давайте сначала посмотрим на эффект.

Эта статья в основном разделена на три части: переключение CSS, переключение значков и переключение изображений.

CSS-переключатель

Что касается переключения цветов CSS, я искал и ссылалсяElementUIСхема обычно делится на четыре шага.

  • Создайте новый в статическом каталоге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'
}]
  • Получить через AJAXtheme.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">

Это делает невозможным динамическое переключение цветов значка, поэтому я решил изменить файл шрифта, чтобы использовать значок. Вот рекомендуемый сайтicomoon, этот веб-сайт может легко конвертировать изображения в файлы шрифтов. Иконки также очень подходят для использования шрифтов, и мы можем более легко изменять размер и цвет иконок.

С помощью онлайн-преобразования мы помещаем загруженный файл шрифта в проект и создаем новый файл 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%);
}

Переключение изображений

В проекте также есть много изображений-заполнителей или других изображений, которые будут меняться в зависимости от темы. Импортируя все изображения и используя имя файла, чтобы различать изображения, соответствующие разным темам. Когда вы нажимаете для переключения тем, переключайтесь на файл, соответствующий теме, и вы можете переключать изображения. Для этого я написал миксин и ввел миксин в компонент.

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

Этим тоже достигается эффект переключения тем, но этот способ требует введения миксинов практически во все бизнес-компоненты, если есть способ лучше, сообщите мне.

Категории