element-resize-detector用来监听div宽度,vue组件利用v-if销毁重建后导致监听失效的解决

element-resize-detector的使用请点击该链接.

问题场景描述:在该页面中监听div宽度

  var elementResizeDetectorMaker = require('element-resize-detector')
  // 监听页面宽度变化
 	 var erd = elementResizeDetectorMaker({
  		  strategy: "scroll"
 	 })
	 erd.listenTo($('#djla'), function (element) {
          var width = element.offsetWidth
     debugger
        });

当该页面作为组件被其他页面引用,需要对该页面使用初始化,利用v-if销毁组件,在重置组件的时候,再次进入该页面导致监听失效,已经不进debugger代码.

解决方案:将监听防止在created钩子函数中,并使用this.$nextTick(() => {})

created: function () {
this.$nextTick(() => {
 	 var erd = elementResizeDetectorMaker({
  		  strategy: "scroll"
 	 })
	 erd.listenTo($('#djla'), function (element) {
          var width = element.offsetWidth
     debugger
        });
})
}