Отобразить условный vue компонент на основе размера браузера - PullRequest
Новая
       3

Отобразить условный vue компонент на основе размера браузера

0 голосов
/ 22 февраля 2020

Я ищу способ использования адаптивного компонента в vue js (nuxt).

Я создал это mixin , но я получаю ошибку: 

export const mediaQuery = {
  data() {
    return {
      breakpoints: {
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200
      },
      windowWidth: 0,
      currentBreakpoint: ''
    }
  },
  created() {
    if (process.browser) {
      this.setWindowWidth()
      this.setCurrentBreakpoint()

      window.addEventListener('resize', () => {
        this.setWindowWidth()
        this.setCurrentBreakpoint()
      })
    }
  },
  computed: {
    smPlus() {
      return this.windowWidth >= this.breakpoints.sm
    },
    smMinus() {
      return this.windowWidth < this.breakpoints.md
    },
    mdPlus() {
      return this.windowWidth >= this.breakpoints.md
    },
    mdMinus() {
      return this.windowWidth < this.breakpoints.lg
    },
    lgPlus() {
      return this.windowWidth >= this.breakpoints.lg
    },
    lgMinus() {
      return this.windowWidth < this.breakpoints.xl
    },
    xlPlus() {
      return this.windowWidth >= this.breakpoints.xl
    }
  },
  methods: {
    setWindowWidth() {
      this.windowWidth = window.innerWidth
    },
    setCurrentBreakpoint() {
      if (this.windowWidth < this.breakpoints.sm) {
        this.currentBreakpoint = 'xs'
      } else if (
        this.windowWidth >= this.breakpoints.sm &&
        this.windowWidth < this.breakpoints.md
      ) {
        this.currentBreakpoint = 'sm'
      } else if (
        this.windowWidth >= this.breakpoints.md &&
        this.windowWidth < this.breakpoints.lg
      ) {
        this.currentBreakpoint = 'md'
      } else if (
        this.windowWidth >= this.breakpoints.lg &&
        this.windowWidth < this.breakpoints.xl
      ) {
        this.currentBreakpoint = 'lg'
      } else if (this.windowWidth >= this.breakpoints.xl) {
        this.currentBreakpoint = 'xl'
      }
    }
  }
}

это ошибка: Не удалось выполнить «insertBefore» на «Узле»: параметр 1 не относится к типу «Узел».

, и я не знаю, что такое решение

полностью, как мы должны использовать отзывчивые компоненты?

я не хочу использовать медиа-запрос в этой ситуации.

спасибо

1 Ответ

0 голосов
/ 24 февраля 2020

Я бы сказал, что проблема в том, что ваш результат SSR не совпадает с результатом клиента. используйте установленный крюк для установки точек останова вместо созданного

...