//#region ====================== v-resize ======================
|
const resizeMap = new WeakMap();
|
const ob = new ResizeObserver((entries) => {
|
for (const entry of entries) {
|
// 获取dom元素的回调
|
const handler = resizeMap.get(entry.target);
|
//存在回调函数
|
if (handler) {
|
// 将监听的值给回调函数
|
handler({
|
width: entry.borderBoxSize[0].inlineSize,
|
height: entry.borderBoxSize[0].blockSize,
|
});
|
}
|
}
|
});
|
|
const resizeDirective = (el, callback) => {
|
resizeMap.set(el, callback);
|
ob.observe(el);
|
}
|
|
const clearResizeDirective = (el) => {
|
ob.unobserve(el);
|
}
|
var elementResizeDirective = (app) => {
|
app.directive('resize', {
|
mounted(el, binding) {
|
//将dom与回调的关系塞入map
|
resizeMap.set(el, binding.value);
|
//监听el元素的变化
|
ob.observe(el);
|
},
|
unmounted(el) {
|
//取消监听
|
ob.unobserve(el);
|
},
|
});
|
};
|
|
//#endregion
|
