vue项目中监听div的宽高变化

最新推荐文章于 2026-03-30 02:54:22 发布

原创最新推荐文章于 2026-03-30 02:54:22 发布 · 1.3w 阅读

标签

#vue监听元素宽高 #vue监听div宽高实现自适应

收录于

❤️❤️--vue2核心技术栈专栏收录该内容

53 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中如何使用element-resize-detector插件来监听div的宽高变化，从而实现元素的自适应屏幕宽高。通过在组件的mounted阶段进行配置，可以轻松达到动态调整的效果。若遇到监听失效问题，可参考相关文章解决。

又是一个新知识点，撸起袖子开始干！！！

1、在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器，官网在这 >>> https://www.npmjs.com/package/element-resize-detector

npm install element-resize-detector

2、使用（简洁明了）--直接在mounted使用

  mounted(){
    // 直接导入使用，也可以在main.js中引入
    //elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
    var elementResizeDetec

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

suoh's Blog

关注关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

详解Vue组件实现tips的总结

08-28

主要介绍了详解Vue组件实现tips的总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

【Python】利用Python实现微信公众号文章的定时自动发布

最新发布

weixin_30399821的博客

03-30

452

本文详细介绍了如何利用Python实现微信公众号文章的定时自动发布，包括环境配置、核心功能实现、定时任务设置及部署优化。通过Python脚本和APScheduler，用户可以解放人力，确保文章准时发布，提升运营效率。特别适合需要规律更新的个人博主和团队运营场景。

前端_Tips（持续更新中）

Rainbow_bead的博客

10-21

1020

一些重要又容易遗忘的属性或方法，或是遇到的 Bug 或 Tips 分享；

监听某个DIV的宽高变化

qq_40535197的博客

10-16

3626

监听某个DIV的尺寸变化背景： vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，但是用window带的resize，只能监听浏览器窗口大小变化，像侧边导航隐藏的这种情况不能人echarts重置。为了监听某元素区域的变化而使echarts的尺寸重置，我第一时间想到的是resize事件，但是实际试了试，发现并不能起到我想要的效果，加在DIV上的resize事件根本不能触发，后来百度了一下，发现resize只能加在window对象上，并

vue监听一个div的宽度改变

weixin_42576186的博客

01-08

2110

首先，你需要在 Vue 实例中定义一个计算属性，用于获取 div 的宽度。然后，你可以使用 Vue 的 $watch 函数来监听这个计算属性的变化。例如： <template> <div ref="myDiv">Some content</div> </template> <script> export default { d...

vue中怎么实时监听div元素盒子的宽高

m0_72883244的博客

07-20

8709

vue项目中监听div宽高变化，并且重新加载图表

weixin_48556408的博客

11-18

1513

安装依赖插件 npm install element-resize-detector --save 当前页面引入或者全局引入 import elementResizeDetectorMaker from "element-resize-detector"; 使用：在mounted（）函数中获取当前div的宽高，重置echarts图表。 mounted() { const that = this; const erd = elementResizeDetectorMaker(.

vue监听页面大小变化重新刷新布局

weixin_30835933的博客

01-24

5216

在项目中由于某些div元素在布局的时候需要初始化宽高，因为当浏览器缩小屏幕的时候需要重新刷新页面视图。分析思路：　　1、在store中创建state，用于保存当前浏览器的宽、高值。　　2、在mounted中，使用window.onresize，监听页面大小是否发生变化。若发生变化则，则this.$store.commit修改store中的的宽、高；　　3、在computed中获取...

resize-observer-polyfill的使用 vue监听页面元素变化

M__O__M的博客

02-21

3041

resize-observer-polyfill的使用 vue监听页面元素变化。

小白学习Vue实用实战实例小技巧小tips（一）

小菜鸡程序媛的挣扎史

09-06

575

目录 1、v-cloak解决插值表达式闪烁的问题。 2、插入html代码并显示成html元素。 3、简写methods的方法 4、点击事件层级（冒泡） 5、动态class样式 6、动态style样式 7、单向绑定和双向绑定 8、v-for循环的索引 9、v-for中 key属性的运用 10、v-if 和 v-show的区别 11、增删改查功能设计 12、时间格式化过滤器 ...

【Vue】监听div宽高的变化（动态渲染echarts宽高案例）

y_coder的博客

01-23

2731

是一个现代的JavaScript API，它允许你监听元素的大小变化。// entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息。// 在这里可以触发自定义的处理逻辑，例如将宽高信息传递给 Vue 组件的方法。的回调函数中，我们可以获取目标元素的新宽度和高度，并在。// 在这里可以执行你想要的操作，比如更新组件的状态。// 在组件销毁时停止监听，防止内存泄漏。元素的宽度和高度的变化，你可以使用。// 获取要监听的 div 元素。// 开始监听目标元素的大小变化。

Vue3中自定义指令监听元素尺寸变化

xuefeng11111的博客

10-28

5632

vue对元素的宽高变化看了一下，基本都是用的定时器解决的，刚好看到JS的一个属性方法，可以专门监测元素的尺寸变化 CDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver 实现代码如下 directives: { resize: { mounted(el, binding) { // 这里使用debounce防抖处理，防抖的延时时间可以通过自定义指令的参数传过来，如`v-resize:300`表示300m.

VUE2.0 tips整理

webhhhhhh的博客

02-24

1182

（6）解决echarts绘制散点图数据过多时，hover到散点上数据消失的问题。（2）解决echarts数据重绘的时候，数据源已变但legend并没有改变。（4）echarts设置legend为省略号，当鼠标移动上去显示完整名字。（3）echarts设置没有数据的时候，显示“暂无数据”（5）echarts给y轴设置最大值。

监听DIV元素尺寸变化

Jeff的博客

08-18

6727

web开发过程中为了更好的实现元素自适应效果，往往需要监听DIV的尺寸变化。而DIV元素不像window对象，是没有resize事件的，我们无法直接监听DIV的resize事件。因此在需要对DIV元素进行监听时，需要采用一些特定方法完成size的监听。...

Vue组件小tips

叶鹤的博客

09-13

611

Vue组件小tip

vue3监听div高宽变化自定义分析

qq_45820271的博客

04-05

1959

对一个监听div变化的自定义vue指令的分析

vue监听div的高度变化

Pert的博客

07-21

2506

el-table

VUE监听（动态/实时）获取元素的宽度变化

陈大文的博客

12-18

3447

1920*1080的云图效果能自适应显示，所以得实时获取屏幕的宽度，然后用屏幕的宽度和1920的宽度进行对比，计算出占比，然后用CSS3的transform scale来实现自适应。在utils文件下创建directive，然后directive文件夹下创建一个resizeObserver.js文件。是可以监听到DOM元素，宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。第二步：在directive文件夹再创建一个index.js文件，目的是为了集中注册自定义指令。

监测div大小变化_js监听div元素的宽高变化

weixin_39524959的博客

12-21

5539

一、js监听window变化的方法1、onsize只能监听window对象的变化(1)、 window对象原生、jQuery方法//原生写法window.onsize = function(){console.log("11");}//jquery写法$(window).resize(function(){console.log("22");})//注意：浏览器窗口大小改变时，这段代码会执行多次，...