Vue с модулем css - передача переменных между css и js

Модуль 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?

на самом деле $style.red: true просто добавляет класс красный к вашему элементу. И в вашем css вы можете сделать .red { color: red }

roli roli 10.09.2018 10:51
1
1
1 133
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

I am not sure what you asking for so I am assuming you want to dynamically change the css module class.

Шаблон:

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

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

Да, я хочу управлять переменной в js. В этом решении нам нужно сначала определить класс, но что, если переменная определяется пользователем? Я знаю, что мы можем использовать css var (), есть ли идея в модуле css?

KevinHu 11.09.2018 03:39

«Переменная определяется пользователем». Вы имеете в виду, что пользователь может определять класс? просто привяжите динамически переменную класса, объедините ее с $ style [user_value]

roli roli 11.09.2018 08:42

Я просто смешиваю класс и переменную, извините. Я хочу, чтобы пользователь мог управлять переменной основного цвета веб-сайта, определенной в css. Я думаю, что это еще можно выполнить с помощью css var (). Это не вопрос модуля css. извиняюсь@@

KevinHu 11.09.2018 09:42

Как это работает с несколькими классами? Скажите .red.container?

Douglas Gaskell 15.03.2019 18:53

вы просто добавляете массив class="[$style.red, $style.container]"

roli roli 15.03.2019 19:45

Другие вопросы по теме