vue使用自定义指令监听元素宽、高变化
。
这里监听元素宽度变化时为了,实时改变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() } },
埋点的自定义指令:
// 注册埋点指令 export function signDirective(Vue){ Vue.directive("MD", { bind( el, binding ){ let trigger = binding.trigger.value || 'click';//触发方式 el.addEventListener(trigger, ()=>{ console.log(binding,"binding"); }) } }); }
。