項目中自定義指令v-resize監聽瀏覽器高度

npm install element-resize-detector

var erdUltraFast = elementResizeDetectorMaker({
  strategy: "scroll" //<- 推薦 超快滾動模式
});

// 自定義vue指令 v-resize
import { debounce } from 'lodash-es'
import elementResizeDetector from 'element-resize-detector'
 //函數去抖，也就是說當調用動作n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。
const _bind = (el, binding) => {
  let debounceMillisecond = parseFloat(binding.arg)
  debounceMillisecond = debounceMillisecond > 0 ? debounceMillisecond : 300
//防抖動debounce有三個參數
/*
*1.binding.value 綁定的元素
*2.空閑的時間，貌似是多少秒后再執行
*3.配置參數
*/
  el._v_resize = debounce(binding.value, debounceMillisecond, {
    'leading': true, //超時之前
    'trailing': true //超時之后
  })
}
export default {
  bind (el, binding) {
    _bind(el, binding)
    // Scroll strategy is not supported on IE9. it will change to object strategy automatically.
//為了兼容ie9
    el._v_resize_detector = el._v_resize_detector || elementResizeDetector({ strategy: 'scroll' })
//監聽el的寬度和高度
    el._v_resize_detector.listenTo(el, element => {
      el._v_resize({
        width: el.offsetWidth,
        height: el.offsetHeight
      })
    })
  },
  update (el, binding) {
    if (binding.value !== binding.oldValue) {
      delete el._v_resize
      _bind(el, binding)
    }
  },
  unbind (el, binding) {
    el._v_resize_detector.uninstall(el)
    delete el._v_resize_detector
    delete el._v_resize
  }
}

 自定義的使用

最外層的div的高度為height：100%