Vue uses custom directives to monitor DOM element changes

Hits: 0

Registration Instructions:

This is the same level as methods and mounted

directives:{
       resize : { // the name of the directive 
        bind(el, binding) { // el is the element to bind, and binding is the object bound to the directive 
          console .log(el, "binding" ,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});   // key (this is a function passed in, so execute this function)
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 300 );
        },
        unbind(el) {
          console .log(el, "unbind" );
          clearInterval(el.__vueSetInterval__);
        }
      }
    },

In-page binding function:

DomResize(data) {
    let {width,height} = data;
    console .log( "width:" ,width, "height:" ,height, "dom size change" );
}

Output DOM changes in a function:

DomResize(data) {
    let {width,height} = data;
    console .log( "width:" ,width, "height:" ,height, "dom size change" );
}

You may also like...

Leave a Reply

Your email address will not be published.