15.编写 长按事件 指令

废话不多说,直接写代码,兼容pc和mobile

Vue.directive('longpress', {
    bind: function(el, binding, vNode) {
 
        // 确保提供的表达式是函数
        if (typeof binding.value !== 'function') {
            // 获取组件名称
            const compName = vNode.context.name;
            // 将警告传递给控制台
            let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;
            if (compName) { warn += `Found in component '${compName}' `}
 
            console.warn(warn);
        }
 
        // 定义变量
        let pressTimer = null;
 
        // 定义函数处理程序
        // 创建计时器( 1秒后执行函数 )
        let start = (e) => {
 
            if (e.type === 'click' && e.button !== 0) {
                return;
            }
 
            if (pressTimer === null) {
                pressTimer = setTimeout(() => {
                    // 执行函数
                    handler();
                }, 1000)
            }
        }
 
        // 取消计时器
        let cancel = (e) => {
 
            // 检查计时器是否有值
            if ( pressTimer !== null ) {
                clearTimeout(pressTimer);
                pressTimer = null;
            }
        }
 
        // 运行函数
        const handler = (e) => {
            // 执行传递给指令的方法
            binding.value(e)
        }
 
        // 添加事件监听器
        el.addEventListener("mousedown", start);
        el.addEventListener("touchstart", start);
 
        // 取消计时器
        el.addEventListener("click", cancel);
        el.addEventListener("mouseout", cancel);
        el.addEventListener("touchend", cancel);
        el.addEventListener("touchcancel", cancel);
    }
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 艺术都是相通的。 尝试用国画的技巧来画水彩。 采用的是干画法,所以边缘有些死板,毕竟水彩纸的晕染效果没宣纸那么好。...
    文朴阅读 3,816评论 22 58
  • 至今我见过的脑出血患者中,他算是恢复特别快,完全看不出有任何后遗症的。 发病两周后,可以独自从家走到这里。趿拉着拖...
    尝一阅读 287评论 0 0
  • * 黑云第三 到了前厅,一位长者焦急地在厅中来回踱着步,鬓边已经有了些许白发,正是吏部尚书颜安,见一袭白衣走来,抬...
    未辞AZ阅读 377评论 0 1