Vue如何监视屏幕尺寸变化

Vue如何监视屏幕尺寸变化

1、在data中定义一个值记录屏幕尺寸

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

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

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

3、如果要根据屏幕尺寸大小做操作的时候就用watch监听

watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < 1550) {
          console.log('屏幕宽度小于1550px')
        } else {
          console.log('屏幕宽度大于1550px')
        }
      },
      immediate: true
    },
  }