vue 浏览器宽度变化实时监听

唐月123456

已于 2023-09-15 14:26:08 修改

阅读量4.6k

点赞数

文章标签： vue.js javascript 前端浏览器宽度实时样式兼容容器

于 2023-09-14 17:53:51 首次发布

本文链接：https://blog.csdn.net/weixin_39054337/article/details/132887700

版权

监听页面宽度，调整显示样式

  data() {
    return {
      screenWidth: document.body.clientWidth
    }
  },

 watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function() {
          console.log(that.screenWidth)
          that.timer = false
        }, 400)
      }
    }
  },

  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },