Question

我有一个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（取决于某些条件）？

Answer 1

我认为解决多个主题问题的最佳方法是在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将在默认主题和黑暗主题之间切换。

Answer 2

您可以在vue中使用v-bind:class（Class binding）。喜欢：

 <div class="static" v-bind:class="{ night: isNight, day: !isNight }"></div>

Answer 3

您可以考虑使用在JS代码（setinterval）中更改的CSS变量。基本上，您将拥有以下内容：

<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是可根据您的条件更改的索引：

Answer 4

使用事件总线

您可以使用class binding将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);
  }
};

demo with event bus

使用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);
  }
}

demo with Vuex

是否可以指向课程？

4 个答案:

使用事件总线

使用Vuex