vue监听元素高度指令

js文件

// 监听元素高度变化
let resize = {
  bind(el,binding) {
    let width = '', height = '';
    function isResize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value();
      }
      width = style.width;
      height = style.height;
    }
    el._vueSetInterval_ = setInterval(isResize,100);
  },
  unbind(el) {
    clearInterval(el._vueSetInterval_);
  }
}
export default resize;

引入

  import resize from '../../../../utils/myresize'

注册指令

  directives:{
    resize
  },

使用

<div class="dataCloud-data-filter" v-resize = "resetTableHeight"></div>

    resetTableHeight(){// 该元素高度变化时改变ivu-table-body高度
      if(document.getElementsByClassName('dataCloud-data-filter')[0]){
        this.clientHeight = document.getElementsByClassName('dataCloud-data-filter')[0].clientHeight
        document.getElementsByClassName('ivu-table-body')[0].style.height = `calc(100vh - ${this.clientHeight + 143}px)`
      }
    },