美文网首页
vue监听页面宽度高度

vue监听页面宽度高度

作者: Wanlly | 来源:发表于2021-12-18 17:39 被阅读0次

    监听窗口变化:window.onresize
    JS的一些方法:
    网页可见区域宽:document.body.clientWidth
    网页可见区域高:document.body.clientHeight
    网页可见区域宽:document.body.offsetWidth (包括边线的宽)
    网页可见区域高:document.body.offsetHeight (包括边线的宽)

    data () {
    return {
    screenWidth: document.body.clientWidth
    }
    },
    mounted () {
    const that = this
    window.onresize = () => {
    return (() => {
    window.screenWidth = document.body.clientWidth
    that.screenWidth = window.screenWidth
    })()
    }
    },
    watch:{
    screenWidth(val){
    // 为了避免频繁触发resize函数导致页面卡顿,使用定时器
    if(!this.timer){
    // 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
    this.screenWidth = val
    this.timer = true
    let that = this
    setTimeout(function(){
    // 打印screenWidth变化的值
    console.log(that.screenWidth)
    that.timer = false
    },400)
    }
    }
    }

    相关文章

      网友评论

          本文标题:vue监听页面宽度高度

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