vue监听浏览器窗口大小变化,做对应的操作

最新推荐文章于 2024-08-06 17:44:12 发布
最新推荐文章于 2024-08-06 17:44:12 发布
阅读量6.8k 收藏 10
点赞数 4
分类专栏： 日常问题记录 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzz00008LN/article/details/115563647
版权
本文介绍如何在Vue应用中利用浏览器的resize事件监听窗口大小变化，并在尺寸改变时更新相应变量，以实现页面的响应式布局。创建时无法获取正确的文档尺寸，需在mounted阶段进行。
摘要由CSDN通过智能技术生成

页面初始化mounted的时候，通过document.body.clientWidth和document.body.clientHeight获取到浏览器的宽和高，然后通过 window.onresize 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。
（created()的时候不行，因为此时document还没有生成）

<template>
  <section class="p-10">
    <h1> {
   {
    screenWidth }} × {
   {
最低0.47元/天 解锁文章
一梦晓三生
关注
专栏目录
Vue监听浏览器窗口变化
who_become_gods的博客
03-24 956
<template> <section class="p-10"> <h1> {{ screenWidth }} × {{ screenHeight }} </h1> </section> </template> <script> export default { data() { ...
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
10-18
今天小编就为大家分享一篇Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-06 664
要监听div宽度的变化，可以使用接口。允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这种方法比使用更专注于尺寸变化，且不受元素属性变化的影响。
Vue 实时监听窗口变化 windowresize的两种方法
10-17
主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue,js 监听window窗口尺寸变化
草木疏博客
10-26 9524
vue,js,window窗口尺寸变化
Vue监听浏览器窗口的变化
Gpointy的博客
07-26 4490
【代码】Vue监听浏览器窗口的变化。
vue实时监听窗口宽度变化
xiaoqin5的博客
07-20 2669
上面的方案每隔0.4秒会获取一次屏幕的宽度，并将宽度值赋值给data中的screenWide，就可以直接通过this.screenWide获取了。既然可以监听到窗口screenWidth值的变化，就可以根据这个值设定不同的自适应方案了！
学习使用js监测浏览器窗口大小变化
徊忆羽菲
06-06 1716
在JavaScript中，可以通过监听resize事件来检测浏览器窗口的大小变化。以下是一个简单的示例代码，用于检测浏览器窗口大小的变化并在控制台输出新的窗口尺寸：
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
09-04
在网页开发中，我们经常需要监听浏览器窗口大小的变化，以便动态调整页面元素的布局或尺寸。`resize`事件就是用于捕获这一行为的关键JavaScript事件。然而，当涉及到框架（frame）或者iframe时，直接在主页面中使用`...
vue 实现根据窗口大小自适应图片预览
weixin_50290666的博客
06-02 1718
使用计算属性实现图片预览场景，图片的大小根据视窗大小自适应变化。
javascript 浏览器窗口大小改变事件
03-26
NULL 博文链接：https://272426068.iteye.com/blog/1143976
vue监听dom大小改变案例
11-19
需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下） 类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决方法把 1、使用element-resize-detector var elementResizeDetectorMaker = require("element-resize-detector
使用vue.js在页面内组件监听scroll事件的方法
10-18
第二步：在Vue实例的`mounted`生命周期钩子中使用`this.$refs`获取到对应的DOM元素，并为该元素添加一个滚动事件监听器。这里需要注意的是，应该使用`this.box.addEventListener`来为DOM元素添加事件监听器，而不是`...
vue项目如何监听窗口变化
weixin_43550562的博客
03-01 1835
获取窗口宽度：document.body.clientWidth 监听窗口变化：window.onresize 同时回顾一下JS里这些方法： 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document....
vue监听浏览器窗口发生变化
qq_43651168的博客
10-21 2621
vue监听浏览器窗口发生变化
React监听浏览器窗口大小的改变
w319502537的博客
04-13 7627
React监听浏览器窗口大小的改变
监听浏览器窗口大小发生变化触发事件
weixin_30482383的博客
01-12 340
window.onresize = function(){ } 转载于:https://www.cnblogs.com/jddk/p/8274676.html
vue监听浏览器窗口变化
07-24
// 监听窗口变化 window.addEventListener('resize', this.updateWindowSize); }, beforeDestroy() { // 在组件销毁前移除事件监听 window.removeEventListener('resize', this.updateWindowSize); }, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值