美文网首页
vue监听屏幕宽度变化

vue监听屏幕宽度变化

作者: 吴小冷 | 来源:发表于2022-07-14 11:08 被阅读0次

不多说,直接上代码 dddd

data(){
   retrun {
      screenWidth:null,
      dialogWidth:0,
   }
},
mounted() {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
},
watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < 800) {
          this.dialogWidth = '400px'
          //此刻屏幕宽度小于800
        } else {
          this.dialogWidth = '800px'
          //此刻屏幕宽度大于800
        }
      },
    },
  },

相关文章

网友评论

      本文标题:vue监听屏幕宽度变化

      本文链接:https://www.haomeiwen.com/subject/aviqirtx.html