Как исправить VueTinySlider с картами VueMaterial при реализации Darkmode - PullRequest
Новая
       14

Как исправить VueTinySlider с картами VueMaterial при реализации Darkmode

0 голосов
/ 23 октября 2019

Я установил лучшие практики темного режима на своем PWA.

Когда я добавляю в опцию Отключение темного режима - только некоторые из моих карт VueTinySlider VueMaterial обновляются до моей темы. Последняя карта не обновляется и остается белой.

Вот как я получаю и устанавливаю darkmode с помощью vue: 

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

Я использую: 

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

Что я делаю не так?

Я ожидаю, что все карты будут обновлены в соответствии с примененной темой.

1 Ответ

0 голосов
/ 23 октября 2019

О, я сталкивался с этой проблемой. Кажется, что может быть ошибка в VueTinySlider, когда loop=true

При разработке darkmode для моего PWA. В итоге я зацепился за крючок updated в Vue.

Вы можете проверить 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}`)
        }
      }
    }
  },
...