1.创建sizeDirect.js文件
// 相对map 不回造成内存泄露
const map = new WeekMap()
// ob监听
const ob = new ResizeObserver((entries) => {
for (const entry of entries) {
// 处理元素对应的回调
const handler = map.get(entry.target)
if (handler) {
const box = entry.borderBoxSize[0]
handler({
width: box.inlineSize,
height: box.blockSize,
})
}
}
})
export default {
inserted(el, binding) {
// 监听el元素尺度的变化
map.set(el, binding.value)
},
unbind(el) {
// 取消监听
ob.unobserve(el)
},
}
2.在main.js全局注册或者组件内注册
import sizeDirect from "@/utils/sizeDirect.js"
Vue.directive('ob-size',sizeDirect)
3.在页面使用
<div v-ob-size="handleSizeChange"></div>
handleSizeChange(size){
console.log(size)
}