Vue с модулем CSS - передать переменную между CSS и JS - PullRequest
Новая
       49

Vue с модулем CSS - передать переменную между CSS и JS

0 голосов
/ 10 сентября 2018
Модуль

css позволяет использовать переменную как в css, так и в js. 

// use in temaplate
...
...<p :class="{ [$style.red]: isRed }">Am I red?</p>

// use in js 
...
...
<script>
export default {
    created () {
        console.log(this.$style.red)
        // -> "red_1VyoJ-uZ"
        // an identifier generated based on filename and className.
    }
}
</script>

/// use in css preprocessor
...
...
<style lang="stylus" module>
.red {
  color: red;
}
</style>

Мы можем получить переменную независимо от шаблона, js или css. Но если у нас есть некоторые функции, такие как:

нажмите и измените все основные цвета веб-сайта, которые определены в CSS.

Можем ли мы изменить переменную в js?

1 Ответ

0 голосов
/ 10 сентября 2018

Модуль CSS - это файл CSS, в котором все имена классов и имена анимаций по умолчанию имеют локальную область действия

Поэтому используйте их, когда хотите быть уверенными, что стиль компонента не будет переопределен.

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

Шаблон: 

<template>
  <div>
   <div :class="[module]">I am a div</div>
   <button @click="make_blue_class">Make it blue</button>
   <button @click="make_red_class">Make it red</button>
  </div>
</template>

Сценарий: 

  data: () => ({
    module_class: 'red'
  }),

  computed: {
    module: {
      get() {
        return this.$style[this.module_class]
      },
      set(new_class) {
        this.module_class = new_class
      }
    }
  },
  methods: {
    make_blue_class() {
      this.module_class = 'blue'
    },
    make_red_class() {
      this.module_class = 'red'
    }
  }

Стиль: 

  .red {
    background: red;
  }
  .blue {
    background: blue;
  }

Смотрите это в действии здесь

...