vue自定义元素大小监听指令

元素大小监听指令

//元素大小监听指令
const map = new WeakMap();

const ob = new ResizeObserver((entries) => {
  for (const entry of entries) {
    //运行entry.target 对应的回调函数
    const handler = map.get(entry.target);
    if (typeof handler === 'function') {
      handler({
        width: entry.borderBoxSize[0].inlineSize,
        height: entry.borderBoxSize[0].blockSize,
      })
    }
  }
})

// 在这里插入代码片
export default {
  mounted(el, binding) {
    //监听el 元素尺寸变化
    map.set(el, binding.value)
  },
  unmonunted(el) {
    ob.unobserve(el)
  }
}