Динамический стиль в Vue.js

Когда я начал использовать Vue.js в качестве интерфейсной среды, мне сразу понравился простой способ настройки компонентов и управления ими. Использование отдельных файловых компонентов позволяет мне сосредоточиться на всех аспектах, касающихся того, как я их создаю: мне просто нужно поместить 3 тега в файл .vue, и я могу начать формировать как визуальный аспект, так и всю логику самого компонента. Говоря о стилях, первое, что вам сообщает официальный документ, это как стилизовать компонент: просто вставьте тег стиля (обычно в конце файла), и все готово. Но когда вы идете дальше и начинаете создавать сложные интерфейсы, вам сразу же нужно выполнять стилизацию, выходящую за рамки простой композиции классов CSS.
Итак, во время своего путешествия я обнаружил несколько способов выполнения динамической стилизации, и эта статья призван стать кратким справочником для людей, которые впервые столкнулись с этой потребностью.
Чтобы показать вам различные методы, я буду использовать очень простой компонент кнопки, который должен использовать определенное значение цвета фона, если логическое свойство true (хорошо, может быть, это слишком просто, но вы быстро поймете концепции).

Начнем с кода компонента:

<template>
  <button class="my-button">
    {{ text }}
  </button>  
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    },
    isWarning: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
}
</style>

и мы вызываем компонент так:

<my-button text="Attention!" :is-warning="true"/>

Обвязка стиля №1

Это более простое решение, просто используйте привязку стиля Vue.js и измените свойство background-color CSS:

<template>
  <button 
    class="my-button"
    :style="{'background-color': isWarning ? '#FC4': '#CCC'}"
  >
    {{ text }}
  </button>  
</template>

# 2 привязка класса

С привязкой класса мы добавляем определенный класс только в том случае, если реквизит isWarning верен:

<template>
  <button 
    :class="['my-button', {'warning': isWarning}]"
  >
    {{ text }}
  </button>  
</template>

и ниже в теге стиля:

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  &.warning {
    background-color: #FC4;
  }
}
</style>

#3 Вычисляемый класс

С помощью этого метода мы просто определяем classes вычисляемое значение, которое возвращает строку имен классов CSS на основе значения свойства компонента isWarning:

computed: {
    classes () {
      if (this.isWarning) {
        return 'my-button warning';
      }
      return 'my-button';
    }
  }

затем мы используем привязку класса, которую мы использовали выше, передавая только вычисленное значение:

<template>
  <button :class="classes">
    {{ text }}
  </button>
</template>

#4 Вычисляемый стиль с переменной css

Ааа, эта техника мне больше всего нравится 😀 . Это вариант предыдущего, но мы используем привязку стиля и переменную css для изменения цвета фона.
Давайте начнем использовать переменную css для свойства background-color:

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: var(--button-bg-color)
}
</style>

затем мы добавляем вычисляемое значение, которое определяет окончательное значение нашей переменной --button-bg-color:

computed: {
    cssVars () {
      return {
        '--button-bg-color': this.isWarning ? '#FC4' : '#CCC'
      }
    }
  }

и, наконец, мы добавляем привязку стиля к тегу кнопки:

<template>
  <button 
    class="my-button"
    :style="cssVars"
  >
    {{ text }}
  </button>
</template>

#5 Стилизованные компоненты

Styled-components — известная библиотека CSS-in-JS, используемая, в частности, разработчиками React… и вы также можете использовать ее с Vue.js 😉. Пакет можно найти здесь, обратите внимание, что он совместим только с Vue 2.x.

Установите пакет (используя пряжу в качестве менеджера пакетов):

yarn add vue-styled-components

Из-за простоты компонента мы определяем его внутри родительского компонента внутри тега script. Сначала мы должны импортировать библиотеку:

import styled from 'vue-styled-components';

затем мы определяем компонент (стилизованную кнопку) и его свойство isWarning:

const btnProps = {
  isWarning: Boolean
}
const MyButton = styled('button', btnProps)`
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};
`;

Обратите внимание на background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};, здесь мы говорим библиотеке изменить свойство CSS на основе значения свойства isWarning.

Последний шаг — зарегистрировать только что созданный компонент и использовать его внутри шаблона:

....
  components: {
    MyButton
  }
...
<my-button :is-warning="true">
  Attention!
</my-button>

Помимо библиотеки styled-components, существуют и другие библиотеки CSS-in-JS, которые можно использовать для Vue.js, например, Emotion через пакет vue-emotion.

Вот и все, надеюсь, эта статья окажется вам полезной. Если вы знаете другие методы, не стесняйтесь написать мне, и я обновлю статью!

Спасибо за прочтение!