vue使用自定义指令监听Dom元素宽高变化

最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部

706f75a26845a2556c86483f3bce0fd.png

2268c66b04737e9ac271937b7744ac4.png

表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了
先自定义监听方法吧，如下：
现在组件内注册

directives:{
    resize: { // 指令的名称
        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
          console.log(el,"绑定",binding);
          let width = '', height = '';
          function isReize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
              binding.value({width:style.width,height:style.height});  // 关键(这传入的是函数,所以执行此函数)
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 300);
        },
        unbind(el) {
          console.log(el,"解绑");
          clearInterval(el.__vueSetInterval__);
        }
      }
 },

directives方法跟data，methods方法是平级的
需要监听的组件绑定这个方法，这里是监听表头的高度

2c7839e483b5f9d52721cbe066ec758.png

monResize(data){      
    let {width,height} = data;
    console.log("width:",width,"height:",height,"   dom尺寸方式改变");
},

这时就已经监听到的表头的宽高变化了，就可以拿出来用了