VUE-dom宽度的实时监听

插件安装
npm install element-resize-detector --save
页面引入和使用
import elementResizeDetectorMaker from 'element-resize-detector'

<div v-show="addressOpen" ref="boxRef" class="look-address-div">{{ lookGoodsAddress }}</div>
<div v-show="!addressOpen" class="look-address">{{ lookGoodsAddress }}</div>
mounted() {
  const erd = elementResizeDetectorMaker()
  const boxRef = this.$refs.boxRef
  // const boxRef = document.getElementsByClassName('look-address-div')[0]
  erd.listenTo(boxRef, (element) => {
    console.log(element.clientWidth,this,'宽度变化了')
    if (element.clientWidth<210) {
      this.addressOpen = true
    } else {
      this.addressOpen = true
    }
  })
}

注意点
1,元素显示隐藏建议用v-show ,不要用v-if,因为v-if显示隐藏是将元素整个添加或删除,而v-show隐藏则是相当于该元素添加了display:none,元素还在;
2,使用ref而非 class,避免类名重复导致一些低级错误的发生;