vue 自定义指令监听盒子宽高变化

要监听盒子宽高变化，可以使用 Vue 自定义指令中的 `bind` 和 `update` 钩子函数，以及 `ResizeObserver` API。

首先在 `bind` 钩子函数中，创建一个 `ResizeObserver` 实例，并将它绑定到当前元素上，用来监听元素的宽高变化。

然后在 `update` 钩子函数中，当元素的宽高变化时，触发回调函数进行相应的处理，例如更新数据或执行某些操作。

以下是一个简单的示例代码：

Vue.directive('resize', {
  bind(el, binding) {
    const resizeObserver = new ResizeObserver(entries => {
      const { width, height } = entries[0].contentRect
      binding.value({ width, height })
    })
    resizeObserver.observe(el)
  },
  update(el, binding) {
    const { width, height } = el.getBoundingClientRect()
    binding.value({ width, height })
  }
})

然后在模板中使用自定义指令，绑定需要监听的元素，并传入回调函数进行处理：

<template>
  <div v-resize="onResize"></div>
</template>

<script>
export default {
  methods: {
    onResize({ width, height }) {
      // 处理宽高变化
    }
  }
}
</script>