Detailed explanation of the packaging of common global custom instructions for Vue2

import copy from "./copy";
import longpress from "./longpress"
import debounce from "./debounce";
import emoji from "./emoji";
import LazyLoad from "./LazyLoad";
import permission from "./permission";
import waterMarker from "./waterMarker";
import draggable from "./draggable";
import empty from "./empty";
const directives = {
  copy,longpress,debounce,emoji,LazyLoad,permission,waterMarker,draggable,empty
};
export default {
  install(Vue) {
    (directives).forEach((key) => {
      (key, directives[key]);
    });
  },
};

// Introduce global custom commandsimport directive from './directive'
(directive)

export default {
 bind(el, { value }) {
   el.$value = value;
    = () => {
     if (!el.$value) {
       // When the value is empty, give a prompt.  Can be carefully designed according to the project UI       ("No copy content");
       return;
     }
     // Dynamically create textarea tags     const textarea = ("textarea");
     // Set the textarea to readonly to prevent the keyboard from being automatically evoked under iOS, and to move the textarea out of the visual area      = "readonly";
      = "absolute";
      = "-9999px";
     // Assign the value to copy to the value attribute of the textarea tag      = el.$value;
     // Insert textarea into body     (textarea);
     // Select the value and copy     ();
     const result = ("Copy");
     if (result) {
       ("Copy successfully"); // Can be carefully designed according to the project UI     }
     (textarea);
   };
   // // Bind click event is the so-called one-click copy   ("click", );
 },
 // Triggered when the value passed in is updated componentUpdated(el, { value }) {
   el.$value = value;
 },
 // When the command is unbinded with the element, remove the event binding unbind(el) {
   ("click", );
 },
};

<button v-copy="copyContent">Click to copy</button>

data(){
 return {
   copyContent: "Copyed information",
 }
}

export default {
 bind: function (el, binding, vNode) {
   //Judge type   if (typeof  !== "function") {
     throw "callback must be a function";
   }
   // Define variables   let pressTimer = null;
   // Create a timer and execute it after two seconds   let start = (e) => {
     if ( === "click" &&  !== 0) {
       return;
     }
     if (pressTimer === null) {
       pressTimer = setTimeout(() => {
         handler();
       }, 2000);
     }
   };
   // Cancel the timer   let cancel = (e) => {
     if (pressTimer !== null) {
       clearTimeout(pressTimer);
       pressTimer = null;
     }
   };
   // Run the function   const handler = (e) => {
     (e);
   };
   // Add event listener   ("mousedown", start);
   ("touchstart", start);
   // Cancel the timer   ("click", cancel);
   ("mouseout", cancel);
   ("touchend", cancel);
   ("touchcancel", cancel);
 },
 // Triggered when the value passed in is updated componentUpdated(el, { value }) {
   el.$value = value;
 },
 // When the command is unbinded with the element, remove the event binding unbind(el) {
   ("click", );
 },
};

<!-- longpress Must be a function -->
<button v-longpress="longpress">Press for two seconds</button>

export default {
    inserted: function(el,binding) {
        let timer;
        ("click", () => {
            if(timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                ()
            },1000)
        })
    }
}

<!-- Anti-shake -->
<button v-debounce="debounceClick">点击Anti-shake</button>

 debounceClick() {
    ("It should only be triggered once");
  },

let findEle = (parent, type) => {
return () === type
  ? parent
  : (type);
};

const trigger = (el, type) => {
const e = ("htmlEvents");
(type, true, true);
(e);
};

export default {
bind: function (el, binding, vnode) {
  // Regular rules can be customized according to requirements  // var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g;
  var regRule = /[^\u4E00-\u9FA5\dA-Za-z]|/g; // Only enter Chinese, English and numbers  let $inp = findEle(el, "input");
  el.$inp = $inp;
  $ = function () {
    let val = $;
    $ = (regRule, "");
    trigger($inp, "input");
  };
  $("keyup", $);
},
unbind: function (el) {
  el.$("keyup", el.$);
},
};

 <!-- Limit input types -->
<input type="text" v-model="value" v-emoji>

export default {
  install(Vue, options) {
    const defaultSrc = ; 
    ("lazy", {
      bind(el, binding) {
        (el, , defaultSrc);
      },
      inserted(el) {
        if (IntersectionObserver) {
          (el);
        } else {
          (el);
        }
      },
    });
  },
  // Initialization  init(el, val, def) {
    ("data-src", val);
    ("src", def);
  },
  // Use IntersectionObserver to listen on el  observe(el) {
    var io = new IntersectionObserver((entries) => {
      const realSrc = ;
      if (entries[0].isIntersecting) {
        if (realSrc) {
           = realSrc;
          ("data-src");
        }
      }
    });
    (el);
  },
  // Listen to scroll events  listenerScroll(el) {
    const handler = (, 300);
    (el);
    ("scroll", () => {
      handler(el);
    });
  },
  // Load real pictures  load(el) {
    const windowHeight = ;
    const elTop = ().top;
    const elBtm = ().bottom;
    const realSrc = ;
    if (elTop - windowHeight < 0 && elBtm > 0) {
      if (realSrc) {
         = realSrc;
        ("data-src");
      }
    }
  },
  // throttling  throttle(fn, delay) {
    let timer;
    let prevTime;
    return function (...args) {
      const currTime = ();
      const context = this;
      if (!prevTime) prevTime = currTime;
      clearTimeout(timer);

      if (currTime - prevTime > delay) {
        prevTime = currTime;
        (context, args);
        clearTimeout(timer);
        return;
      }

      timer = setTimeout(function () {
        prevTime = ();
        timer = null;
        (context, args);
      }, delay);
    };
  },
};

function checkArray(key) {
  let arr = ["1", "2", "3", "4"];
  let index = (key);
  if (index > -1) {
    return true; // Permissions  } else {
    return false; // No permission  }
}

export default {
  inserted: function (el, binding) {
    let permission = ; // Get the value of v-permission    if (permission) {
      let hasPermission = checkArray(permission);
      if (!hasPermission) {
        // No permissions to remove Dom elements         && (el);
      }
    }
  },
};

<!-- show -->
  <button v-permission="'1'">Permission Button1</button>

  <!-- 不show -->
  <button v-permission="'10'">Permission Button2</button></div>

function addWaterMarker(str, parentNode, font, textColor) {
  // Watermark text, parent element, font, text color  var can = ("canvas");
  (can);
   = 200;
   = 150;
   = "none";
  var cans = ("2d");
  ((-20 * ) / 180);
   = font || "16px Microsoft JhengHei";
   = textColor || "rgba(180, 180, 180, 0.3)";
   = "left";
   = "Middle";
  (str,  / 10,  / 2);
   = "url(" + ("image/png") + ")";
}
export default {
    bind: function (el, binding) {
        addWaterMarker(, el, , )
    },
}

<div v-waterMarker="{text:'bjg All rights reserved',textColor:'rgba(180, 180, 180, 0.4)'}"></div>

export default {
 inserted: function (el) {
    = "move";
    = function (e) {
     let disx =  - ;
     let disy =  - ;
      = function (e) {
       let x =  - disx;
       let y =  - disy;
       let maxX =
          -
         parseInt((el).width);
       let maxY =
          -
         parseInt((el).height);
       if (x < 0) {
         x = 0;
       } else if (x > maxX) {
         x = maxX;
       }

       if (y < 0) {
         y = 0;
       } else if (y > maxY) {
         y = maxY;
       }

        = x + "px";
        = y + "px";
     };
      = function () {
        =  = null;
     };
   };
 },
};

<div class="el-dialog" v-draggable></div>

// Determine whether the object or array is emptyfunction isEmpty(obj) {
 if ((obj)) {
   return  === 0;
 } else if (typeof obj === "object") {
   return (obj).length === 0;
 }
 return true; // Other types are empty by default}
export default {
 inserted: function (el, binding) {
   const value = ;
   if (isEmpty(value)) {
      = "none";
   }
 },
};