。
这里监听元素宽度变化时为了,实时改变echarts的宽度,顺带把高度也监听一下:
可以在全局注册自定义指令,也可以在组件内注册
这里在组件内注册:
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__); } } },
和data、mounted同级
页面内绑定:
<div id="overviewChart" v-resize="DomResize"></div>
DomResize方法:
DomResize(data){ let {width,height} = data; console.log("width:",width,"height:",height," dom尺寸方式改变"); if(this.myChart){ this.myChart.resize() } },
。