根據瀏覽器大小渲染條件 vue 組件

Question

我正在尋找在 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 不是“節點”類型。

我不知道解決辦法是什么

我們應該如何使用響應式組件？

我不想在這種情況下使用媒體查詢。

謝謝你

Answer 1

我會說問題是您的 SSR 結果與客戶結果不匹配。 使用 mounted hook 來設置你的斷點而不是創建