15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

vue 监听浏览器窗口宽度变化

梁鹏翱| 发布于 2021-11-23 09:13:36| 602阅读| 0点赞| 0评论
举报

vue 监听浏览器窗口宽度变化

首先在data中定义要监听的属性,因为watch侦听器监听的是data中的属性,不能直接监听window

export default {
 data () {
    return {
         creenWidth: document.body.clientWidth,
   }
  }
}

 在mouted当中调用window.onresize()事件,onresize事件会在窗口或框架被调整大小时触发

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

最后在watch监听data中的creenWidth属性就可以了

screenWidth: {
     immediate: true,
     handler(newValue) {
      console.log(newValue)
     }
   }
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部