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 屏幕大小改變