vue 监听dom元素的宽高变化

1、准备一个插件

npm install element-resize-detector

2、使用

monted(){
	// 直接导入使用,也可以在main.js中引入
	var elementResizeDetectorMaker = require("element-resize-detector")
	// 创建实例,无参数
	var erd = elementResizeDetectorMaker();
	// 创建实例带参数
	var erdUltraFast = elementResizeDetectorMaker({
		strategy: "scroll",
        callOnAdd: true,
        debug: true
	});
  	//监听id为test的元素 大小变化
  	erd.listenTo(document.getElementById("test"), function(element) {
    	var width = element.offsetWidth;
    	var height = element.offsetHeight;
    	console.log("Size: " + width + "x" + height);
	});
}

转载自:一叶知秋_038b
https://www.jianshu.com/p/b9004cb2fa2c

非常感谢这位大哥

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在 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 元素度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值