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.value(); // 关键
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
}
//然后在html中
<div v-resize="resize"></div> // 绑定的resize是一个函数
//在methods中
resize() { // 当宽高变化时就会执行
//执行某些操作
}
- 上面就是实现的方法，下面讲一下这个自定义指令的实现:
- 首先我采用局部注册的方法，然后操作基本都放到bind这个钩子函数中,看一下官方的解释:bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。这个钩子函数只会执行一次，我们这个例子没有涉及到数据的变化，如果有涉及到数据的变化，就应该使用update:所在组件的 VNode 更新时调用
- 然后我定义两个变量用来存储宽高，并在isReize这个方法中去获取宽高，这里用到document.defaultView.getComputedStyle(el),这个方法可以获取元素的样式，不局限写在行内的style。然后去跟原来的宽高比较，如果不同就执行下面的 binding.value();
- binding.value就是我们在html中绑定给指令的值，<div v-resize="resize"></div>也就是resize，是个函数。这里很容易以为只能绑定字符串变量，但其实自定义指令的绑定值很强大，可以玩很多种花样，大家可以看看官方文档:自定义指令
- 最后我再下面赋值了定时器，每300毫秒去执行一次，在unbind这个钩子函数中清除定时器
到这里就实现了监听一个元素的宽高变化，并执行相应的操作，但如果是针对于echart，还需要在echart实例添加一个方法:
const myChart = echarts.init(document.getElementById(id))
****
myChart.resize()
超人鸭也是第一次尝试vue中的自定义指令，如果有更好的解决方法欢迎指教哦。
