vue实时监听获取窗口的变化（适配多端）

已于 2023-07-25 17:54:48 修改
阅读量1.2k 收藏 2
点赞数
文章标签： vue.js javascript 前端
于 2023-07-13 16:34:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60687276/article/details/131705378
版权

js获取浏览器的的宽高有共有四种方法

   document.body.clientWidth   document.body.clientHeight  

  document.body.offsetWidth(包括边框线的宽度)   document.body.offsetHeight(包括边框线的高度)

进入页面我们把document.body.clientWidth的宽度赋值给data变量

 在mounted阶段触发监听并且将当前宽度赋值给变量

 频繁触发会导致卡顿所以增加定时器间隔0.5秒触发，并且赋值最新宽度，将timer赋值为false

 最后这样在页面上就可以拿到值了，就可以适应多端了。

.不尽人意
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue运用之resize监听窗口变化
日常笔记/总结/系列知识梳理
08-10 5万+
一、在Vue单个页面运用 <template> <div id="divId"> </div> </template> <script> export default { data() {
Vue 实时监听窗口变化 windowresize的两种方法
10-17
主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue如何实现实时监听页面宽度高度变化
最新发布
aaa123aaasqw的博客
03-26 678
话不多说直接上代码，自行研究。
Vue监听浏览器窗口的变化
Gpointy的博客
07-26 3735
【代码】Vue监听浏览器窗口的变化。
vue监听页面窗口变化
CuiAndHani的博客
09-09 7722
获取窗口宽度：document.body.clientWidth 监听窗口变化：window.onresize 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 我们将document.body.clientWidth赋值给data中自定义的变量
vue监听浏览器窗口发生变化
qq_43651168的博客
10-21 2564
vue监听浏览器窗口发生变化
监听浏览器窗口变化（缩放）
是大林的林吖-博客
10-13 1906
【代码】监听浏览器窗口变化（缩放）
Vue2实时监听表单变化的示例讲解
10-18
今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈VUE监听窗口变化事件的问题
08-27
下面小编就为大家分享一篇浅谈VUE监听窗口变化事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE实时监听元素距离顶部高度的操作
10-15
主要介绍了VUE实时监听元素距离顶部高度的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue监听浏览器窗口变化
lay7889的博客
12-01 918
vue监听浏览器窗口变化
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
10-15
主要介绍了解决vue单页面多个组件嵌套监听浏览器窗口变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
javascript 浏览器窗口大小改变事件
03-26
NULL 博文链接：https://272426068.iteye.com/blog/1143976
vue监听浏览器窗口大小变化,做对应的操作
一梦晓三生的博客
04-10 6769
页面初始化mounted的时候，通过`` document.body.clientWidth ``和`` document.body.clientHeight ``获取到浏览器的宽和高，然后通过 ``window.onresize`` 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。 （created()的时候不行，因为此时document还没有生成） <template> <section class="p-10"> <h1> {{ scree.
vue项目如何监听窗口变化
weixin_43550562的博客
03-01 1761
获取窗口宽度：document.body.clientWidth 监听窗口变化：window.onresize 同时回顾一下JS里这些方法： 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document....
vue监听页面
95后独自打拼的程序猿
06-02 2478
vue监听页面使用window.addEventListener('scroll', this.handleScroll)
Vue,js 监听window窗口尺寸变化
草木疏博客
10-26 9416
vue,js,window窗口尺寸变化
对vue-element-admin后台开源框架的解读---监听浏览器变化改变页面布局
即墨宇文的博客
06-11 907
1.监听浏览器窗口变化–mixins: [ResizeMixin] 监听页面路由，路由变化时如果设备是桌面端且侧边栏打开，就去vuex关闭侧边导航栏 import store from '@/store' const { body } = document const WIDTH = 992 watch: { $route(route) { if (this.device === 'mobile' && this.sidebar.opened) { st.
vue实时监听窗口宽度变化
xiaoqin5的博客
07-20 2111
上面的方案每隔0.4秒会获取一次屏幕的宽度，并将宽度值赋值给data中的screenWide，就可以直接通过this.screenWide获取了。既然可以监听到窗口screenWidth值的变化，就可以根据这个值设定不同的自适应方案了！
vue根据窗口大小适配
07-13
Vue可以根据窗口大小进行适配的方法有很多种。下面我介绍一种常用的方法： 1. 首先，你可以使用Vue的生命周期钩子函数`mounted`来监听窗口大小的变化。在mounted函数中添加以下代码： ```javascript mounted() { window.addEventListener('resize', this.handleResize); } ``` 2. 在Vue实例中添加一个`data`属性来存储窗口的宽度和高度： ```javascript data() { return { windowWidth: 0, windowHeight: 0 }; }, ``` 3. 在Vue实例中添加一个`methods`方法来处理窗口大小变化的逻辑： ```javascript methods: { handleResize() { this.windowWidth = window.innerWidth; this.windowHeight = window.innerHeight; // 在这里可以根据窗口大小进行适配的操作 } }, ``` 4. 最后，在需要适配的地方使用`windowWidth`和`windowHeight`属性进行适配操作。例如，你可以在组件的模板中使用这些属性来动态设置样式或者进行其他操作。 ```html <template> <div :style="{'width': windowWidth + 'px', 'height': windowHeight + 'px'}"> <!-- 这里是适配后的内容 --> </div> </template> ``` 通过以上步骤，你就可以在Vue中根据窗口大小进行适配了。当窗口大小发生变化时，`handleResize`方法会被调用，从而更新`windowWidth`和`windowHeight`属性，然后在模板中使用这些属性实现适配效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值