Question

我已经在我的PWA上设置了暗模式最佳实践。

当我添加“暗模式退出”开关时-只有一些VueTinySlider VueMaterial卡更新为我的主题。最后一张卡未更新，并保持白色。

这是我如何通过vue设置暗模式的方法：

darkmode: {
  get() {
    return this.$store.state.darkmode;
  },
  set() {
    this.$store.commit('toggleDarkmode');
  }
}

我正在使用：

VueTinySlider - v0.1.35
VueMaterial - v1.0.0-beta-11

我在做什么错了？

我希望所有卡都将更新以匹配所应用的主题。

Answer 1

哦，我遇到了这个问题。当loop=true

时，VueTinySlider中似乎有一个错误

在为我的PWA设计暗模式时。我最终迷上了Vue的updated钩。

您可以在此处查看API：https://vuejs.org/v2/api/#updated

我更新了Card.vue组件以更新卡片样式并应用正确的主题。这应该起作用：

updated() {
    const currentTheme = this.darkmode ? 'dark' : 'light'
    const oldTheme = this.darkmode ? 'light' : 'dark'

    if (this.$refs.tinySlider) {
      const cards = this.$refs.tinySlider.$el.getElementsByClassName(`md-card md-theme-${oldTheme}`)

      while (cards.length > 0) {
        for (let card of cards) {
          card.classList.remove(`md-theme-${oldTheme}`)
          card.classList.add(`md-theme-${currentTheme}`)
        }
      }
    }
  },

实施暗模式时，如何使用VueMaterial卡修复VueTinySlider

1 个答案: