Как бы вы обрабатывали различные темы в приложении Vue? - PullRequest
Новая
       17

Как бы вы обрабатывали различные темы в приложении Vue?

0 голосов
/ 22 мая 2018

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

Есть ли способ заставить компонент использовать разные таблицы стилей, основанные на глобальном состоянии?

1 Ответ

0 голосов
/ 22 мая 2018

Допустим, у вас есть themeA и themeB, и вы сохраняете эти значения с помощью Vuex.Итак, я бы поместил эти основные классы в главном компоненте, скажем, в #app (App.vue), например: 

<div id="app" v-bind:class="{ 'theme-a': isThemeA, 'theme-b': isThemeB} "></div>

Где с помощью геттера Vuexs вы получите логическое значение для этихсостояния.

Позже, в SomeComponent.vue я бы использовал селектор theme-*, чтобы стилизовать их: 

<template>
  <div id="some-component">
    <!-- your markup -->
  </div>
</template>

<script>
  export default {
    name: 'some-component'
  }
</script>

<style lang="scss">
  .theme-a {
    .some-selector { //styles for theme A }
  }

  .theme-b {
    .some-selector { //styles for theme B }
  }
</style>

Что бы отлично работать.

...