Vue 3，用于监听某一个实例宽高 ，解决v-show下，读取宽高为0和两端自适应等问题

不知道你是否面临过这样一个问题，当用display来实现某组件的显示和隐藏时，会导致你所监听的实例宽高为0（监听事件：通过ref获取实例宽高）。

  const btnSlider = ref(null) // 获得对应实例，这里记得在setuo()中return出去
  const getBtnSlider = () => {
     
    return unref(btnSlider)
  }
  const getBtnSize = () => {
      // 用来获取当前滑动按钮的宽度或长度
    const btnSlider = getBtnSlider()
    if (btnSlider) {
     
      btnSize.value = btnSlider[
        `client${
       unref(vertical) ? 'Height' : 'Width'}`]
    }
  }

同时你的监听事件写在mounted中，弊端有是仅仅只会触发一次，如果该组件初始就是display：none,可想而知，宽高获取为0。

所以我们想到监听，我们都知道，window有一个resize监听事件，用于当窗口发生变化时，可以执行对应回调函数，这个方法不错，但是如何监听某个单个实例呢？

网上搜素，你会发现有很多监听的API，本人就不多做叙述了，我用的是

npm install -s element-resize-detector

那我是如何实现的呢，为了组件通用，这里我用了vue自定义指令directive。

• 创建指令对象

import elementResizeDetectorMaker from "element-resize-detector";

let observer
const oldValue = {
     
  width: 0,
  height: 0
}
const resizeListen = {
     
  mounted (el, binding) {
     
    observer = elementResizeDetectorMaker()
    observer.listenTo(el, function(element) {
     
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      if (oldValue.width !== width || oldValue.height !== height) {
      // 数值重复不回调值
        oldValue.width = width
        oldValue.height = height
        binding.value(oldValue)
      }
    })
  },
  unmounted (el) {
     
    if (observer) {
     
      observer.removeListener(el)
    }
  }
}

export default resizeListen

• 绑定指令
  

• 使用指令
  

  const getResize = val => {
     
    sliderSize.value = unref(vertical) ? val.height : val.width
  }