动态监听元素尺寸变化element-resize-detecto

适用于 表格宽度自适应 echarts 宽高计算等

1、引入插件element-resize-detector

npm install element-resize-detector

2、(1)main.js全局引入

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

2、(2)使用页面引入

import ElementResizeDetectorMaker from "element-resize-detector"

<template>
  <div ref="wrapper" class="test-page" />
</template>

<script>
import ElementResizeDetectorMaker from 'element-resize-detector';
const erd = ElementResizeDetectorMaker();
export default {
  name: 'TestPage',
  data() {
    return {
      nameWidth: 100
    };
  },
  mounted() {
    this.$nextTick(() => {
      erd.listenTo(this.$refs.wrapper, (ele) => {
        console.log('=======offsetWidth', ele.offsetWidth);
        console.log('=======offsetHeight', ele.offsetHeight);
        console.log('=======clientWidth', ele.clientWidth);
        this.nameWidth = ele.clientWidth;
        //...元素尺寸变化调用其他方法
        //  this.resize()
      });
    });
  },
  beforeDestroy() {
    erd.uninstall(this.$refs.wrapper);
  }
};
</script>

页面销毁时beforeDestroy, 记得要卸载