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");

      })
    }
  });
}

 

posted @ 2020-12-03 12:29  古墩古墩  Views(6994)  Comments(1Edit  收藏  举报