vue监听屏幕变化做适配

1、data定义屏幕大小

data(){
    return{
         screenWidth: null,  //屏幕尺寸
    }
}

2、页面获取屏幕尺寸的值

mounted () {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {   //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  }

3、监听，改变内容

  watch: {
    //  监听屏幕大小变化
    screenWidth(val,oldVal){
      if (val < 961) {
        console.log('小于961px')
      } else {
        console.log('大于960px')
      }
      // immediate: true
    },
  },

参考文章：(10条消息) Vue如何监视屏幕尺寸变化_qq_47452289的博客-CSDN博客_vue 屏幕大小改变