1、在开发中时长遇到按钮重复点击或者多次点击的情况
比如创建订单或者其他情况，当然也可以通过设置变量开关，禁止状态，这里就分享一个 节流的指令
1VUE3好像指令的生命周期和组件的生命周期同步了 2//立即执行版本，点击后会执行一次，然后进入定时器 3export const throttle = { 4 inserted: function(el, binding) { 5 let timer = null 6 el.addEventListener('click', handClick, false) 7 function handClick() { 8 if (timer) { 9 return 10 } 11 // 当指令传参时 12 let arg = binding.arg 13 binding.value(arg) 14 timer = setTimeout(() => { 15 clearTimeout(timer) 16 timer = null 17 }, 2000) 18 } 19 el._handClick_ = handClick 20 }, 21 unbind: function(el) { 22 //销毁时 清除事件 23 if (el._handClick_) { 24 el.removeEventListener('click', el._handClick_, false) 25 el._handClick_ = null 26 delete el._handClick_ 27 } 28 } 29}
2、使用 注册就不写了
1<div v-throttle:1="toHandle" ></div> 2 v-throttle:1 是传了个参数，当然可以不传 v-throttle="toHandle" 3 v-throttle="toHandle(1)",这种写法是绑定了个表达式,不是函数
2、拖拽指令
1export const drag = { 2 inserted: function(el, binding) { 3 const willChange = getComputedStyle(el).willChange 4 const position = getComputedStyle(el).position 5 const transform = getComputedStyle(el).transform 6 7 // 盒子宽高 8 let width = el.offsetWidth 9 let height = el.offsetHeight 10 11 // 设备 宽高 getPageX，getPageY 为设备宽高 12 let pageWidth = getPageX() 13 let pageHeight = getPageY() 14 // 记录手指按下位置 15 let dX,dY 16 17 if (['absolute', 'fixed'].indexOf(position) === -1) { 18 el.style.position = 'absolute' 19 } 20 21 el.style.willChange = 22 willChange === 'auto' ? 'left,top' : `${willChange},left,top` 23 24 el.style.transform = 25 transform === 'none' ? 'translateZ(0)' : `${transform} translateZ(0)` 26 27 function start(e) { 28 let box = el.getBoundingClientRect() 29 let touchMsg = e.changedTouches[0] 30 dX = touchMsg.pageX - box.left 31 dY = touchMsg.pageY - box.top 32 33 el.addEventListener('touchmove',move, false) 34 el.addEventListener('touchcancel',cancel, false) 35 } 36 37 function move(eMove) { 38 let moveMsg = eMove.changedTouches[0] 39 let top = moveMsg.pageY - dY 40 let left = moveMsg.pageX - dX 41 // 边界值限定 42 let maxLeft = pageWidth - width 43 let maxTop = pageHeight - height 44 45 el.style.top = top > maxTop ? maxTop + 'px' : (top > 1 ? top + 'px' : '0px') 46 el.style.left = left > maxLeft ? maxLeft + 'px' : (left > 1 ? left + 'px' : '0px') 47 48 eMove.preventDefault() 49 } 50 function cancel() { 51 el.removeEventListener('touchstart',start, false) 52 el.removeEventListener('touchmove',move, false) 53 el.removeEventListener('touchcancel',cancel, false) 54 } 55 56 el.addEventListener('touchstart',start,false) 57 el.__dragTouchstartHandler__ = start 58 }, 59 unbind: function(el) { 60 if (el.__dragTouchstartHandler__) { 61 el.removeEventListener('touchstart', el.__dragTouchstartHandler__, false) 62 el.__dragTouchstartHandler__ = null 63 delete el.__dragTouchstartHandler__ 64 } 65 66 } 67}
整体思路： 1、移动端并没有手指按下点到父元素的距离（offsetTop），只有距离页面的 X,Y，所以 用按下点到页面的距离 - 元素距离顶部距离 = 按下点到父元素距离 2、移动时、用移动点位距离 - 按下点到父元素距离 = 定位位置 3、最后 preventDefault()阻止默认行为 4、后面就是指令解绑了