window有resize事件，但某些时候我们想监听某个div的resize，这个时候可以使用 ResizeObserver。
以下出自 mdn 文档：
ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。
备注： 内容盒是盒模型放置内容的部分，这意味着边框盒减去内边距和边框的宽度就是内容盒。边框盒包含内容、内边距和边框。有关进一步阐述，参见盒模型。
ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。
详细文档请查阅 ResizeObserver。
使用分三步
// 1.指定resize事件
let resizeFn = (entries，observer)=>{// 注意这里有参数，包含一些位置，盒子大小信息，对 ResizeObserver 自身的引用
console.log('div宽高变化将触发此方法')
}
let resizeObserver = new ResizeObserver(resizeFn) // 注意初始会调用一次 resizeFn
// 2.指定该resize事件的触发dom
let resizeBox = document.getElementById('myDom')
resizeObserver.observe(resizeBox);
// 3.结束对指定dom的监听。
resizeObserver.unobserve(resizeBox)
ResizeObserver 实例化函数参数文档，也就是上面的 entries，observer - 看这里，我目前感觉用不用都可以，因为也可以用其他方式获取这些信息。
使用案例
<template>
<div ref="resizeDivRefDom" class="resize-div">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'resizeDiv',
props: {
// 防抖时间
t: {
type: Number,
default: 50
},
// 初始第一次是否触发 resize 事件
firstTrigger: {
type: Boolean,
default: true
}
},
data() {
return {
resizeObserver: null,
tickTimer: null,
firstTime: true, // 标记是否初始渲染
domWh: { // 当前 dom 信息
width: 0,
height: 0
}
}
},
methods: {
// 根据需求，可以获取任意信息
getDomInfo(dom) {
return {
width: dom.clientWidth,
height: dom.clientHeight
}
},
emitEvent() {
// console.log('resizeDiv resize...')
let resizeBox = this.$refs['resizeDivRefDom']
let oldDomInfo = this.domWh
let newDomInfo = this.domWh = this.getDomInfo(resizeBox)
this.$emit('resize', {
resizeBox, // 当前 resize 的dom信息
oldDomInfo, // resize 前的宽高信息
newDomInfo // resize 后的宽高信息
})
},
event_resize() {
clearTimeout(this.tickTimer)
this.tickTimer = setTimeout(() => {
if (this.firstTime && !this.firstTrigger) { // 初始不触发
this.domWh = this.getDomInfo(this.$refs['resizeDivRefDom']) // 初始存储宽高信息
} else {
this.emitEvent()
}
this.firstTime = false // 初次渲染成功
}, this.t)
},
addEvents() {
this.removeEvents()
let resizeBox = this.$refs['resizeDivRefDom']
// 1.指定resize事件
this.resizeObserver = new ResizeObserver(this.event_resize) // 会在绘制前和布局后调用 resize 事件，因此不用提前调用 event_resize 方法
// 2.指定该resize事件的触发dom
this.resizeObserver.observe(resizeBox);
},
removeEvents() {
let resizeBox = this.$refs['resizeDivRefDom']
resizeBox && this.resizeObserver?.unobserve(resizeBox)
// 清除定时器
clearTimeout(this.tickTimer)
},
init() {
this.addEvents()
},
},
mounted() {
this.init()
},
beforeDestroy() {
this.removeEvents()
}
}
</script>
<style scoped>
.resize-div {
width: 100%;
height: 100%;
}
</style>
使用
<template>
<div class="mybox" style="height: 20vh;width:100%;">
<rDiv :firstTrigger="false" @resize="divResizeFn">
<div>盒子 resize</div>
</rDiv>
</div>
</template>
...
import resizeDiv from '@/components/resizeDiv/index.vue'
export default {
components: {
rDiv: resizeDiv,
},
...
这里使用vue封装了个 resizeDiv 组件，当外层div盒子宽高发生变化将触发resize事件。
扩展 - 实现 echarts 的 resize
vue项目中可以封装为指令，结合 echarts 实现 echarts resize，这样比监听 window 的 resize 精确得多，这里就不贴代码了，代码很简单，参考上面分分钟写出来，大家自己写吧。
组件使用
image.png
使用 v-resize 监听 echart 容器是否宽高发生变化，发生变化后执行该 chart 的resize 事件。【注意：v-resize 是自己写的全局指令，很简单，参考上面代码自行实现。】
image.png
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/53e0fd3bf961，转载请注明出处，谢谢。
网友评论