根据浏览器大小呈现条件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结果与客户结果不符。使用安装的钩子来设置断点，而不是创建断点