Vue之自定义移动端长按事件

自定义移动端长按事件

1.longTouch.js

const on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false)
            }
        }
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler)
            }
        }
    }
})();

function touchstart(e, el) {
    let touches = e.touches[0];
    let tapObj = el.tapObj;
    tapObj.pageX = touches.pageX;
    tapObj.pageY = touches.pageY;
    tapObj.clientX = touches.clientX;
    tapObj.clientY = touches.clientY;
    el.time = +new Date()
}
function touchend(e, el) {
    let touches = e.changedTouches[0];
    let tapObj = el.tapObj;
    el.time = +new Date() - el.time;
    el.endTime = '';
    tapObj.distanceX = tapObj.pageX - touches.pageX;
    tapObj.distanceY = tapObj.pageY - touches.pageY;
    let isLongTap = el.time > 300 && Math.abs(tapObj.distanceX) < 10 && Math.abs(tapObj.distanceY) < 10;
    if (!isLongTap || el.endTime) return
    el.documentHandler(e)
}

export default {
    bind(el, binding) {
        on(el, 'touchstart', e => {
            touchstart(e, el)
        });
        on(el, 'touchend', e => {
            touchend(e, el)
        });
        el.tapObj = {};
        el.bindingFn = binding.value;
        el.documentHandler = function() {
            el.bindingFn(el)
        }
    },
}

2.在页面中使用

在组件中使用 v-v-longTouch="joinMyStock" 属性

全局加载在main.js中引入import longTouch from "./lib/js/longTouch";

按需加载在所需组件内引入 directives: { longTouch }

函数方法之joinMyStock获取当前元素属性

joinMyStock(el){  //加入自选
    this.$dialog.confirm({
        title:'提示',
        message:`是否将 ${el.getAttribute('name')} (${el.getAttribute('symbol')}) 加入自选?`
    }).then(() => {
        window.console.log('是')
    },() => {})
}

3.语法小记

• 自定义指令

    当前对象为 el