vue 监听dom元素的宽高变化

最新推荐文章于 2024-07-24 03:12:57 发布
最新推荐文章于 2024-07-24 03:12:57 发布
阅读量694 收藏 1
点赞数
文章标签： vue.js javascript 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41984913/article/details/132381793
版权

vue 监听dom元素的宽高变化

1、准备一个插件

npm install element-resize-detector

2、使用

 mounted() {
    // 直接导入使用，也可以在main.js中引入
    const elementResizeDetectorMaker = require('element-resize-detector');
    // 创建实例，无参数
    const erd = elementResizeDetectorMaker();
    // 创建实例带参数
    // const erdUltraFast = elementResizeDetectorMaker({
    //   strategy: 'scroll',
    //   callOnAdd: true,
    //   debug: true
    // });
    //监听class为top的元素 大小变化
    erd.listenTo(document.querySelector('.top'),(element)=>{
      const width = element.offsetWidth;
      const height = element.offsetHight;
      this.selectWidth= (width - 100 ) + 'px'
    })
  },
~李恩赐~
关注
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
dxn16638400024的博客
11-25 2204
另外，你也可以创建一个自定义指令来监听DOM元素的宽高变化。来监听绑定指令的DOM元素的宽高变化。当宽高变化时，会调用指令绑定值所指定的方法。来监听DOM元素的宽高变化。访问DOM元素进行观察。当宽高变化时，会调用。以上示例演示了如何在Vue组件中通过。以上示例演示了如何创建一个自定义指令。来监听DOM元素的宽高变化。希望以上代码示例对你有所帮助！在Vue中，你可以使用。
vue 监听元素高度的变化_vue监听dom大小改变案例
weixin_34246474的博客
12-23 3438
需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变(没有图，朋友的问题，大体画一下)类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决...
vue监听dom大小改变案例
10-15
主要介绍了vue监听dom大小改变案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue监听ref绑定元素高度变化时
最新发布
qq_42463588的博客
07-24 611
在Vue中，监听一个元素的高度变化可以通过几种方式实现。如果你使用的是Vue 2，你可以使用来监听DOM的变化。Vue 3引入了Composition API，提供了reactive和ref等响应式API，可以更简单地实现这一功能。
监听DOM元素高度变化
风小猪的博客
04-14 1094
参考链接：https://legacy.reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node。时获取到该节点的实际高度，但是如果这个节点的高度动态改变，则不能实时监听到该节点的高度。需要根据某个DOM元素的高度，控制另一个DOM元素的显隐。通过回调形式的ref能在。点击增加时，并不能监听到该节点高度的变化，不会显示“高度超过30px”这句话。点击增加时会监听到DOM高度的变化，从而显示“高度超过30px”这句话。
vue 监听dom元素尺寸大小改变
qq_58340302的博客
10-08 1422
1、安装插件，npm install element-resize-detector。方法：使用element-resize-detector插件来实现。
VUE实时监听元素距离顶部高度的操作
10-15
由于这种批量更新的机制，直接在数据变化后立即获取新生成的DOM元素可能会导致获取不到，因为它尚未被渲染到页面上。这就涉及到Vue中一个特殊的实例方法——$nextTick。$nextTick是一个工具函数，可以确保在下次DOM...
在vue中获取dom元素内容的方法
08-30
"在 Vue 中获取 DOM 元素内容的方法" 在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。 使用 ref 属性获取 DOM ...
vue中for循环出来的dom元素如何监听各自的宽高变化
weixin_48800288的博客
05-04 4502
vue中监听dom元素的宽高变化，以执行对应的操作。尤其适用于v-for循环出来的dom元素的宽高变化监听，使用vue的自定义指令来进行监听
VUE监听（动态/实时）获取元素的宽度变化
陈大文的博客
12-18 2251
1920*1080的云图效果能自适应显示，所以得实时获取屏幕的宽度，然后用屏幕的宽度和1920的宽度进行对比，计算出占比，然后用CSS3的transform scale来实现自适应。在utils文件下创建directive，然后directive文件夹下创建一个resizeObserver.js文件。是可以监听到DOM元素，宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。第二步：在directive文件夹再创建一个index.js文件，目的是为了集中注册自定义指令。
【vue使用自定义指令directives监听元素宽度和高度的变化】
Min_Fox的博客
06-19 1869
vue使用自定义指令directives监听元素宽度和高度的变化
Vue中 引入使用 element-resize-detector 监听 Dom 元素 宽度、高度 变化
明天也要努力的博客
11-13 3315
很多做pc端平台的小伙伴都遇到过这样一个问题：在做侧边栏菜单时会有一个收缩和展开的一个功能，在伸缩的过程中右边的页面的宽度就会随之改变。我上网查了查 ，也动手试了试 window.onresize = ()=>{}。却不尽人意，因为它只能检测浏览器大小的变化，完全跟我们的需求不沾边。为解决类似此问题，我们可使用 element-resize-detector。
Vue--监听元素宽高变化
这里是迷阵的博客耶
04-15 4011
解决方案 1、使用element-resize-detector插件 2、使用自定义指令 element-resize-detector插件 npm install element-resize-detector 自定义指令 <template> <transition> <div v-resize="DomResize"> </div> </transition> </template> <script&
【Vue】监听div宽高的变化（动态渲染echarts宽高案例）
y_coder的博客
01-23 1905
是一个现代的JavaScript API，它允许你监听元素的大小变化。// entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息。// 在这里可以触发自定义的处理逻辑，例如将宽高信息传递给 Vue 组件的方法。的回调函数中，我们可以获取目标元素的新宽度和高度，并在。// 在这里可以执行你想要的操作，比如更新组件的状态。// 在组件销毁时停止监听，防止内存泄漏。元素的宽度和高度的变化，你可以使用。// 获取要监听的 div 元素。// 开始监听目标元素的大小变化。
vue3监听某个dom元素宽高变化
wang_zhiwei0728的博客
12-19 3554
如果要在最后一次进行操作的话可以加一个定时器。先清除上一次的定时器，最后再执行一次定时器，这样就会在最后的宽高执行了。适用与需要监听的dom元素在改变宽高时有过度效果的情况下。vue3监听需要读取dom的ref实例。
vue监听dom元素高度变化
06-09
要在 Vue 中监听 DOM 元素高度的变化，您可以使用 Vue 的 `$nextTick` 方法和 `Intersection Observer API`。 首先，在模板中，您需要使用一个具有固定高度的外层元素包裹您要监听高度变化的元素，例如： ```html <template> <div class="container"> <div class="content" ref="myContent"></div> </div> </template> <style> .container { height: 200px; overflow: auto; } .content { height: 400px; } </style> ``` 上面的代码中，我们在外层使用了一个具有固定高度和滚动条的容器，并在内部添加了一个高度为 400px 的 `<div>` 元素。 接下来，在 Vue 实例中，您需要通过 `$refs` 来获取要监听高度变化的元素，并使用 `Intersection Observer API` 来监听该元素的变化，例如： ```js export default { mounted() { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.$nextTick(() => { console.log(this.$refs.myContent.clientHeight) }); } }); }); observer.observe(this.$refs.myContent); } } ``` 上面的代码中，我们在 Vue 实例的 `mounted` 生命周期钩子中创建了一个 `IntersectionObserver`，并通过 `$refs` 获取了要监听高度变化的元素。然后，我们使用 `IntersectionObserver` 监听该元素的变化，并在元素进入视口时，使用 `$nextTick` 方法获取元素的新高度，并打印到控制台中。 需要注意的是，`$nextTick` 方法会在 DOM 更新后执行回调函数，以确保获取到的元素高度是最新的。这是因为 Vue 的更新是异步的，在修改 DOM 后，您无法立即获取到最新的 DOM 元素高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值