项目中自定义指令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%