根据浏览器大小渲染条件 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 来设置你的断点而不是创建