Можно ли указать на класс? - PullRequest
Новая
       3

Можно ли указать на класс?

0 голосов
/ 16 декабря 2018

У меня есть приложение Vue (всеобъемлющий элемент с несколькими дочерними компонентами), к которому я хотел бы добавить ночной режим.Мне бы хотелось, чтобы этот ночной режим управлялся централизованно, где соответствующий стиль применялся бы к элементам, которые необходимо переключить в ночной / дневной режим.

Если у меня есть элемент (он находится в DOM как частькомпонента, который был визуализирован, поэтому не доступен напрямую для родительского компонента и, следовательно, не может быть привязан через v-bind) 

<div class="night-day">hello</div>

и два класса 

.night {
  background-color: black;
  color: red
}

.day {
  background-color: white;
  color: black
}

возможно ли иметьnight-day указывает на day или night (в зависимости от некоторых условий)?

Ответы [ 4 ]

0 голосов
/ 16 декабря 2018

Использование шины событий

Вы можете использовать привязку класса , чтобы связать класс CSS со свойством, управляемым обработчиком события. 

// MyComponent.vue
<template>
  <div class="daynightdemo" :class="{ night: isNight }">
    ...
  </div>
</template>

<script>
import { eventBus } from '@/eventBus'

export default {
  data() {
    return {
      isNight: false
    };
  },
  mounted() {
    this.setNightDay = value => {
      this.isNight = value === "night";
    };
    eventBus.$on("nightDay", this.setNightDay);
  },
  beforeDestroy() {
    eventBus.$off("nightDay", this.setNightDay);
  }
}
</script>

Вы упомянулишина событий периодически вызывается с setInterval.В этом примере вызов будет выглядеть примерно так: 

// App.vue
export default {
  mounted() {
    let isNight = true;
    setInterval(() => {
      eventBus.$emit("nightDay", isNight ? "night" : "day");
      isNight = !isNight;
    }, LONG_INTERVAL);
  }
};

демо с шиной событий

Использование Vuex

Использование Vuex , шаблон будет несколько упрощен, устраняя необходимость регистрации и отмены регистрации обратного вызова: 

// MyComponent.vue
<template>
  <div class="daynightdemo" :class="{ night: $store.state.isNight }">
    <h1>isNight: {{ $store.state.isNight }}</h1>
  </div>
</template>

// App.vue
export default {
  mounted() {
    setInterval(() => {
      this.$store.state.isNight = !this.$store.state.isNight;
    }, 2000);
  }
}

демо с Vuex

0 голосов
/ 16 декабря 2018

вы можете использовать v-bind:class ( привязка класса ) из vue для этого.Нравится: 

 <div class="static" v-bind:class="{ night: isNight, day: !isNight }"></div>
0 голосов
/ 16 декабря 2018

Вы можете рассмотреть использование переменных CSS, которые вы изменяете в своем коде JS (setinterval).По сути, у вас будет что-то вроде этого: 

<div class="night-day">hello</div>


.night-day {
  background-color: var(--bc,black);
  color: var(--c,red)
}

И внутри вашего JS у вас будет что-то вроде этого: 

var bc= ["black", "white"]
var c= ["red", "black"]

....
document.querySelector('.night-day').style.setProperty("--bc", bc[i]);
document.querySelector('.night-day').style.setProperty("--c",  c[i]);

...

Где i - это индекс, который вы можете изменить на основеваши условия:

0 голосов
/ 16 декабря 2018

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

<body class="dark-theme">
    <div class="container">
        Content...
    </div>
</body>

.container {
  background-color: white;
  color: black
}

.dark-theme .container {
  background-color: black;
  color: red
}

Переключение .dark-theme на body, в данном случае, переключится между темой по умолчанию и темной темой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...