vue 节流、拖拽指令 3年前

1、在开发中时长遇到按钮重复点击或者多次点击的情况

比如创建订单或者其他情况，当然也可以通过设置变量开关，禁止状态，这里就分享一个 节流的指令

copy
VUE3好像指令的生命周期和组件的生命周期同步了
//立即执行版本，点击后会执行一次，然后进入定时器
export const throttle = {
    inserted: function(el, binding) {
        let timer = null
        el.addEventListener('click', handClick, false)
        function handClick() {
            if (timer) {
                return
            }
            // 当指令传参时 
            let arg = binding.arg
            binding.value(arg)
            timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null
            }, 2000)
        }
        el._handClick_ = handClick
    },
    unbind: function(el) {
        //销毁时 清除事件
        if (el._handClick_) {
            el.removeEventListener('click', el._handClick_, false)
            el._handClick_ = null
            delete el._handClick_
        }
    }
}

2、使用 注册就不写了

copy
<div v-throttle:1="toHandle" ></div>
    v-throttle:1 是传了个参数，当然可以不传 v-throttle="toHandle"
    v-throttle="toHandle(1)",这种写法是绑定了个表达式,不是函数

2、拖拽指令

copy
export const drag = {
    inserted: function(el, binding) {
        const willChange = getComputedStyle(el).willChange
        const position = getComputedStyle(el).position
        const transform = getComputedStyle(el).transform

        // 盒子宽高
        let width = el.offsetWidth
        let height = el.offsetHeight

        // 设备 宽高 getPageX，getPageY 为设备宽高
        let pageWidth = getPageX()
        let pageHeight = getPageY()
        // 记录手指按下位置
        let dX,dY

        if (['absolute', 'fixed'].indexOf(position) === -1) {
            el.style.position = 'absolute'
        }

        el.style.willChange =
        willChange === 'auto' ? 'left,top' : `${willChange},left,top`

          el.style.transform =
        transform === 'none' ? 'translateZ(0)' : `${transform} translateZ(0)`

        function start(e) {
            let box = el.getBoundingClientRect()
            let touchMsg = e.changedTouches[0]
            dX = touchMsg.pageX - box.left
            dY = touchMsg.pageY - box.top

            el.addEventListener('touchmove',move, false)
            el.addEventListener('touchcancel',cancel, false)
        }

        function move(eMove) {
            let moveMsg = eMove.changedTouches[0]
            let top = moveMsg.pageY - dY
            let left = moveMsg.pageX - dX
            // 边界值限定
            let maxLeft = pageWidth - width
            let maxTop = pageHeight - height

            el.style.top =  top > maxTop ? maxTop + 'px' : (top > 1 ? top + 'px' : '0px')
            el.style.left = left > maxLeft ? maxLeft + 'px' : (left > 1 ? left + 'px' : '0px')

            eMove.preventDefault()
        }
        function cancel() {
            el.removeEventListener('touchstart',start, false)
            el.removeEventListener('touchmove',move, false)
            el.removeEventListener('touchcancel',cancel, false)
        }

        el.addEventListener('touchstart',start,false)
        el.__dragTouchstartHandler__ = start
    },
    unbind: function(el) {
        if (el.__dragTouchstartHandler__) {
            el.removeEventListener('touchstart', el.__dragTouchstartHandler__, false)
            el.__dragTouchstartHandler__ = null
            delete el.__dragTouchstartHandler__
        }

    }
}

整体思路： 1、移动端并没有手指按下点到父元素的距离（offsetTop），只有距离页面的 X,Y，所以 用按下点到页面的距离 - 元素距离顶部距离 = 按下点到父元素距离 2、移动时、用移动点位距离 - 按下点到父元素距离 = 定位位置 3、最后 preventDefault()阻止默认行为 4、后面就是指令解绑了