vue 监听元素高度的变化_vue中监听元素的宽高变化(强大的自定义指令)

js中可以给window去绑定缩放事件，从而去监听窗口大小的变化:

window.addEventListener('resize', () => {})

但是有时候窗口的大小并不会变化，变的是元素的大小，好像是没有方法是可以直接监听元素的大小变化的，那如果有这个需求呢？

这次超人鸭也从一个真实需求讲解，如何去监听一个元素的宽高变化，看图:

image.png

在切换侧边栏的收缩时，右边的内容的宽度就会变化，此时我右边是echart，echarts在初始化画完之后，当容器改变大小的时候，echart并不会响应式的重新画图，需要我们手动去调用绘制echart的方法，所以，监听元素的宽度变化是关键。

下面超人鸭介绍使用自定义指令的方式，去监听元素的宽高变化:

directives: { // 使用局部注册指令的方式

resize: { // 指令的名称

bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象

let width = '', height = '';

function isReize() {

const style = document.defaultView.getComputedStyle(el);

if (width !== style.width || height !== style.height) {

binding