vue自定义指令：v-resize

效果：实时获取元素的宽高

指令封装：

const map = new WeakMap()
const ob = new ResizeObserver(entries => {
  for (const entry of entries) {
    const handler = map.get(entry.target)
    if (handler) {
      const { inlineSize, blockSize } = entry.contentBoxSize[0]
      handler({ width: inlineSize, height: blockSize })
    }
  }
})
Vue.directive('resize', {
  bind(el, binding) {
    map.set(el, binding.value)
    ob.observe(el)
  },
  unbind(el) {
    ob.unobserve(el)
  }
})

使用：

<div v-resize="handleSizeChange" style="height: 100px; background: red"></div>

  methods: {
    handleSizeChange(option) {
      console.log('handleSizeChange', option)
    }
  }

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~