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

      })
    }
  });
}

 

。