input表单输入限制

  2. const trigger = (el, type) => {
  3.   const event = new Event(type)
  4.   el.dispatchEvent(event)
  5. }
  6. // 输入限制
  7. const inputLimit = {
  8.   bind: function (el, binding, vnode) {
  9.     const type = binding.value || 'number';
  10.     const input = el.getElementsByTagName('input')[0]
  11.     const regMap = {
  12.       number: () => {
  13.         let newString = String(input.value);
  14.         console.log(newString, type);
  15.         input.value = newString.replace(/[^\d]/g, '')
  16.         trigger(input, "input")
  17.       },
  18.       zh: () => {
  19.         //  只能输入中文
  20.         let newString = String(input.value);
  21.         input.value = newString.replace(/[^\u4E00-\u9FA5]/g, '')
  22.         trigger(input, "input")
  23.       },
  24.       integer: () => {
  25.         let newString = String(input.value);
  26.         newString = newString.replace(/[^\d]/g, '')
  27.         newString = Number(newString)
  28.         input.value = newString
  29.         trigger(input, "input")
  30.       },
  31.     }
  32.     const handle = regMap[type]
  33.     input.addEventListener('keyup', handle)
  34.     input.addEventListener('blur', handle)
  35.     el.$bindInput = input
  36.     el.$bindInput.handle = handle
  37.   },
  38.   unbind: function (el) {
  39.     el.$bindInput.removeEventListener('keyup', el.$bindInput.handle)
  40.     el.$bindInput.removeEventListener('blur', el.$bindInput.handle)
  41.   }
  42. }
  44. export default inputLimit

图片懒加载

  1. const LazyLoad = {
  2.     // 初始化
  3.     init(el, val, def) {
  4.         el.setAttribute("data-src", val);
  5.         el.setAttribute("src", def);
  6.     },
  7.     // 利用IntersectionObserver监听el
  8.     observe(el) {
  9.         var io = new IntersectionObserver((entries) => {
  10.             const realSrc = el.dataset.src;
  11.             if (entries[0].isIntersecting) {
  12.                 if (realSrc) {
  13.                     el.src = realSrc;
  14.                     el.removeAttribute("data-src");
  15.                 }
  16.             }
  17.         });
  18.         io.observe(el);
  19.     },
  20.     // 监听scroll事件
  21.     listenerScroll(el) {
  22.         const handler = LazyLoad.throttle(LazyLoad.load, 300);
  23.         LazyLoad.load(el);
  24.         window.addEventListener("scroll", () => {
  25.             handler(el);
  26.         });
  27.     },
  28.     // 加载真实图片
  29.     load(el) {
  30.         const windowHeight = document.documentElement.clientHeight;
  31.         const elTop = el.getBoundingClientRect().top;
  32.         const elBtm = el.getBoundingClientRect().bottom;
  33.         const realSrc = el.dataset.src;
  34.         if (elTop - windowHeight < 0 && elBtm > 0) {
  35.             if (realSrc) {
  36.                 el.src = realSrc;
  37.                 el.removeAttribute("data-src");
  38.             }
  39.         }
  40.     },
  41.     // 节流
  42.     throttle(fn, delay) {
  43.         let timer;
  44.         let prevTime;
  45.         return function (...args) {
  46.             const currTime = Date.now();
  47.             const context = this;
  48.             if (!prevTime) prevTime = currTime;
  49.             clearTimeout(timer);
  51.             if (currTime - prevTime > delay) {
  52.                 prevTime = currTime;
  53.                 fn.apply(context, args);
  54.                 clearTimeout(timer);
  55.                 return;
  56.             }
  58.             timer = setTimeout(function () {
  59.                 prevTime = Date.now();
  60.                 timer = null;
  61.                 fn.apply(context, args);
  62.             }, delay);
  63.         };
  64.     },
  65. };
  67. const LazyLoadDirective = {
  68.     bind(el, binding) {
  69.         const oldValue = binding.oldValue;
  70.         if (!oldValue) {
  71.             const defaultSrc = require('./loading.gif');
  72.             LazyLoad.init(el, binding.value, defaultSrc);
  73.         }
  74.     },
  75.     update(el, binding) {
  76.         const oldValue = binding.oldValue;
  77.         if (!oldValue) {
  78.             const defaultSrc = require('./loading.gif');
  79.             LazyLoad.init(el, binding.value, defaultSrc);
  80.         }
  81.     },
  82.     inserted(el) {
  83.         if (IntersectionObserver) {
  84.             LazyLoad.observe(el);
  85.         } else {
  86.             LazyLoad.listenerScroll(el);
  87.         }
  88.     },
  89. }
  91. export default LazyLoadDirective;

简易防重点击

  1. const preventReClick = {
  2.     inserted: function (el, binding) {
  3.         el.addEventListener("click", () => {
  4.             if (!el.disabled) {
  5.                 el.disabled = true;
  6.                 setTimeout(() => {
  7.                     el.disabled = false;
  8.                 }, binding.value || 3000); // 传入绑定值使用，默认3000毫秒内不可重复触发
  9.             }
  10.         });
  11.     },
  12. };
  13. export default preventReClick;

简易文字水印

  1. const addWaterMarker = (str, parentNode, font, textColor) => {
  2.     // 水印文字，父元素，字体，文字颜色
  3.     let can = document.createElement("canvas");
  4.     parentNode.appendChild(can);
  5.     can.width = 200;
  6.     can.height = 150;
  7.     can.style.display = "none";
  8.     let cans = can.getContext("2d");
  9.     cans.rotate((-20 * Math.PI) / 180);
  10.     cans.font = font || "16px Microsoft JhengHei";
  11.     cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
  12.     cans.textAlign = "left";
  13.     cans.textBaseline = "Middle";
  14.     cans.fillText(str, can.width / 10, can.height / 2);
  15.     parentNode.style.backgroundImage =
  16.         "url(" + can.toDataURL("image/png") + ")";
  17. };
  19. const waterMarker = {
  20.     bind: function (el, binding) {
  21.         addWaterMarker(
  22.             binding.value.text,
  23.             el,
  24.             binding.value.font,
  25.             binding.value.textColor
  26.         );
  27.     },
  28. };
  30. export default waterMarker;

拖拽指令

  1. function extractHandle (handle) {
  2.     return handle && handle.$el || handle;
  3. }
  5. function getPosWithBoundaries (elementRect, boundingRect, left, top, boundingRectMargin) {
  6.     if (boundingRectMargin === void 0) {
  7.         boundingRectMargin = {};
  8.     }
  9.     let adjustedPos = {
  10.         left: left,
  11.         top: top
  12.     };
  13.     let height = elementRect.height,
  14.         width = elementRect.width;
  15.     let topRect = top,
  16.         bottomRect = top + height,
  17.         leftRect = left,
  18.         rightRect = left + width;
  19.     let marginTop = boundingRectMargin.top || 0,
  20.         marginBottom = boundingRectMargin.bottom || 0,
  21.         marginLeft = boundingRectMargin.left || 0,
  22.         marginRight = boundingRectMargin.right || 0;
  23.     let topBoundary = boundingRect.top + marginTop,
  24.         bottomBoundary = boundingRect.bottom - marginBottom,
  25.         leftBoundary = boundingRect.left + marginLeft,
  26.         rightBoundary = boundingRect.right - marginRight;
  28.     if (topRect < topBoundary) {
  29.         adjustedPos.top = topBoundary;
  30.     } else if (bottomRect > bottomBoundary) {
  31.         adjustedPos.top = bottomBoundary - height;
  32.     }
  33.     if (leftRect < leftBoundary) {
  34.         adjustedPos.left = leftBoundary;
  35.     } else if (rightRect > rightBoundary) {
  36.         adjustedPos.left = rightBoundary - width;
  37.     }
  38.     return adjustedPos;
  39. }
  41. const draggable = (Vue) => {
  42.     Vue.directive('draggable', {
  43.         update: function (el, binding) {
  44.             if (binding.value && binding.value.stopDragging) {
  45.                 return;
  46.             }
  47.             let handler = (binding.value && binding.value.handle && extractHandle(binding.value.handle)) || el;
  49.             if (binding && binding.value && binding.value.resetInitialPos) {
  50.                 initializeState();
  51.                 handlePositionChanged();
  52.             }
  53.             if (!handler.getAttribute("draggable")) {
  54.                 el.removeEventListener("mousedown", el["listener"], false);
  55.                 handler.addEventListener("mousedown", mouseDown, false);
  56.                 handler.setAttribute("draggable", "true");
  57.                 el["listener"] = mouseDown;
  58.                 initializeState();
  59.                 handlePositionChanged();
  60.             }
  62.             function mouseMove (event) {
  63.                 event.preventDefault();
  64.                 let stopDragging = binding.value && binding.value.stopDragging;
  66.                 if (stopDragging) {
  67.                     return;
  68.                 }
  69.                 let state = getState();
  71.                 if (!state.startDragPosition || !state.initialMousePos) {
  72.                     initializeState(event);
  73.                     state = getState();
  74.                 }
  75.                 let dx = event.clientX - state.initialMousePos.left;
  76.                 let dy = event.clientY - state.initialMousePos.top;
  77.                 let currentDragPosition = {
  78.                     left: state.startDragPosition.left + dx,
  79.                     top: state.startDragPosition.top + dy
  80.                 };
  82.                 // console.log(state.initialMousePos.top);
  83.                 let boundingRect = getBoundingRect();
  84.                 let elementRect = el.getBoundingClientRect();
  86.                 if (boundingRect && elementRect) {
  87.                     currentDragPosition = getPosWithBoundaries(elementRect, boundingRect, currentDragPosition.left, currentDragPosition.top, binding.value.boundingRectMargin);
  88.                 }
  90.                 // 鼠标拖拽边界判断
  91.                 if (currentDragPosition.top < 0) {
  92.                     currentDragPosition.top = 0;
  93.                 } else if (currentDragPosition.top > window.innerHeight - 80) {
  94.                     currentDragPosition.top = window.innerHeight - 80;
  95.                 }
  96.                 if (currentDragPosition.left < 286 - elementRect.width) {
  97.                     currentDragPosition.left = 286 - elementRect.width;
  98.                 } else if (currentDragPosition.left > window.innerWidth - 80) {
  99.                     currentDragPosition.left = window.innerWidth - 80;
  100.                 }
  101.                 // if (elementRect.right >= 0 && elementRect.bottom >= 740
  102.                 //     && event.clientX > 0 && event.clientY > 0
  103.                 //     && elementRect.top <= window.innerHeight && event.clientY < window.innerHeight
  104.                 //     && elementRect.left <= window.innerWidth && event.clientX < window.innerWidth)
  105.                 // {
  106.                 // }
  107.                 setState({
  108.                     currentDragPosition: currentDragPosition
  109.                 });
  110.                 updateElementStyle();
  111.                 handlePositionChanged(event);
  112.             }
  114.             function getBoundingRect () {
  115.                 if (!binding.value) {
  116.                     return;
  117.                 }
  118.                 return binding.value.boundingRect ||
  119.                     binding.value.boundingElement &&
  120.                     binding.value.boundingElement.getBoundingClientRect();
  121.             }
  123.             function updateElementStyle () {
  124.                 let state = getState();
  126.                 if (!state.currentDragPosition) {
  127.                     return;
  128.                 }
  129.                 el.style.position = "fixed";
  130.                 el.style.left = state.currentDragPosition.left + "px";
  131.                 el.style.top = state.currentDragPosition.top + "px";
  132.                 el.style.transform = '';
  133.             }
  135.             function mouseUp () {
  136.                 let currentRectPosition = getRectPosition();
  138.                 setState({
  139.                     initialMousePos: undefined,
  140.                     startDragPosition: currentRectPosition,
  141.                     currentDragPosition: currentRectPosition
  142.                 });
  143.                 document.removeEventListener("mousemove", mouseMove, false);
  144.                 document.removeEventListener("mouseup", mouseUp, false);
  145.             }
  147.             function mouseDown (event) {
  148.                 setState({
  149.                     initialMousePos: getInitialMousePosition(event)
  150.                 });
  151.                 handlePositionChanged(event);
  152.                 document.addEventListener("mousemove", mouseMove, false);
  153.                 document.addEventListener("mouseup", mouseUp, false);
  154.             }
  156.             function getInitialMousePosition (event) {
  157.                 return event && {
  158.                     left: event.clientX,
  159.                     top: event.clientY
  160.                 };
  161.             }
  163.             function getRectPosition () {
  164.                 let clientRect = el.getBoundingClientRect();
  166.                 if (!clientRect.height || !clientRect.width) {
  167.                     return;
  168.                 }
  169.                 return {
  170.                     left: clientRect.left,
  171.                     top: clientRect.top
  172.                 };
  173.             }
  175.             function initializeState (event) {
  176.                 let state = getState();
  177.                 let initialRectPositionFromBinding = binding && binding.value && binding.value.initialPosition;
  178.                 let initialRectPositionFromState = state.initialPosition;
  179.                 let startingDragPosition = getRectPosition();
  180.                 let initialPosition = initialRectPositionFromBinding || initialRectPositionFromState || startingDragPosition;
  182.                 setState({
  183.                     initialPosition: initialPosition,
  184.                     startDragPosition: initialPosition,
  185.                     currentDragPosition: initialPosition,
  186.                     initialMousePos: getInitialMousePosition(event)
  187.                 });
  188.                 updateElementStyle();
  189.                 setPositionToCenter();
  190.             }
  192.             function setState (partialState) {
  193.                 let prevState = getState();
  194.                 let state = Object.assign({}, prevState, partialState);
  196.                 handler.setAttribute("draggable-state", JSON.stringify(state));
  197.             }
  199.             function handlePositionChanged (event) {
  200.                 let state = getState();
  201.                 let posDiff = {
  202.                     x: 0,
  203.                     y: 0
  204.                 };
  206.                 if (state.currentDragPosition && state.startDragPosition) {
  207.                     posDiff.x = state.currentDragPosition.left - state.startDragPosition.left;
  208.                     posDiff.y = state.currentDragPosition.top - state.startDragPosition.top;
  209.                 }
  210.                 let currentPosition = state.currentDragPosition && Object.assign({}, state.currentDragPosition);
  212.                 binding.value && binding.value.onPositionChange && state && binding.value.onPositionChange(posDiff, currentPosition, event);
  213.             }
  215.             function getState () {
  216.                 return JSON.parse(handler.getAttribute("draggable-state")) || {};
  217.             }
  219.             function setPositionToCenter () {
  220.                 el.style.left = '50%';
  221.                 el.style.top = '50%';
  222.                 el.style.transform = 'translate(-50%, -50%)';
  223.             }
  225.             el.timer = null;
  226.             window.addEventListener('resize', () => {
  227.                 clearTimeout(el.timer);
  228.                 el.timer = setTimeout( () => {
  229.                     setPositionToCenter();
  230.                 },500);
  231.             }, false);
  232.         }
  233.     });
  234. };
  236. export default draggable;