专栏首页grain先森前端-用 Vue 编写一个长按指令

前端-用 Vue 编写一个长按指令

英文:Obaseki Nosa   译文:kingrychen github.com/OFED/translation/issues/3

有没有想过只需按住一个按钮几秒钟就能在你的 Vue 应用中触发一个功能?

有没有想过创建一个按钮,按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?

想过?太好了,英雄所见略同。

本文就是讲解如何在按下(或者按住)一个按钮时,既执行一个函数,又清除输入。

首先,我会讲解如何使用纯 JS 实现。而后也会创建一个 Vue 指令。

请系好安全带。好戏在后头呢。

原理

要实现长按,用户需要按下并按住按钮几秒钟。

想通过代码模拟这一效果,我们需要在鼠标“点击”按下按钮时,启动一个计时器监听用户按下的时长,如果时间超过我们期望的时长,就执行相应的函数。

非常简单!然而,我们需要知道用户何时按住按钮。

如何实现

当用户点击按钮时,在点击事件之前会触发另外两个事件: mousedown 和 mouseup。

当用户按下按钮时触发 mousedown 事件,用户松开按钮时调用 mouseup 事件。

我们需要做的是:

  1. mousedown 事件触发时,启动计时器。
  2. 一旦 mouseup 事件在预期的 2 秒前被触发,就清除计时器,不要执行相应的函数。就当作一个普通的点击事件。

只要计时器在我们预设的时间内没有被清除,即 mouseup 事件没有被触发——那么可以断定用户没有释放按钮。因此,可以判定为一次长按,可以执行关联的函数。

实践

让我们深入代码,完成这一功能。

首先,我们必须定义三件事,即:

  1. 一个 变量 用于存储计时器。
  2. 一个 启动 功能函数,用于启动计时器。
  3. 一个 取消 功能函数,用于取消计时器。

变量

这个变量主要用来保存 setTimeout 的值,以便当鼠标 mouseup 事件触发时我们可以取消它。

let pressTimer = null;

我们把变量值设置为 null 是为了在执行取消操作前,检查这个变量的值判断当前是否有一个正在运行的计时器。

启动函数

这个函数包括一个 setTimeout,它是 JavaScript 中的一个基本方法,允许在特定时间之后执行一个函数。

注意,click 事件执行的过程中,会触发另外两个事件。但是我们需要启动计时器的是 mousedown 事件。如果只是点击事件,不需要启动计时器。

// 创建计时器 ( 1s之后执行函数 ) let start = (e) => { // 如果是点击事件,不启动计时器 if (e.type === 'click' && e.button !== 0) { return; } // 在启动一个定时器之前确保没有正在运行的计时器 if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行任务 !!! }, 1000) } }

取消函数

这个函数见名知意,用来取消启动函数创建的 setTimeout。

要取消 setTimeout ,可以使用 JavaScript 中的 clearTimeout 方法,它主要用来清除 setTimeout() 方法设置的计时器。

在使用 clearTimeout 之前,需要检查 pressTimer 变量是否为 null。如果没有为 null,意味着有一个正在运行的计时器。因此,我们需要先清除它,并且将 pressTimer 变量设置为 null。

let cancel = (e) => { // 检查 pressTimer 的值是否为 null if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } }

一旦 mouseup 事件触发,这个函数就会被调用。

设置触发器

剩下的就是将事件监听器添加到想要长按效果的按钮上。

addEventListener("mousedown", start); addEventListener("click", cancel);

以上代码合到一起是这样:

// 定义变量 let pressTimer = null; // 创建计时器( 1秒后执行函数 ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行任务 !!! }, 1000) } } // 停止计时器 let cancel = (e) => { // 检查是否有正在运行的计时器 if ( pressTimer !== null ) { clearTimeout(pressTimer); pressTimer = null; } } // 选择 id 为 longPressButton 的元素 let el = document.getElementById('longPressButton'); // 添加事件监听器 el.addEventListener("mousedown", start); // 长按事件取消,取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel);

用 Vue 指令包装

创建 Vue 指令时,可以创建全局或局部指令,本文中,我们采用全局指令。

首先,我们必须声明自定义指令的名称。

Vue.directive('longpress', { })

这就注册了一个名为 v-longpress 的全局自定义指令。

接下来,我们添加带参数的 bind 钩子函数,它允许我们引用指令绑定的元素,获取传递给指令的值,并标识指令使用的组件。

Vue.directive('longpress', { bind: function(el, binding, vNode) { } })

接下来,我们在 bind 函数中添加长按功能的代码。

Vue.directive('longpress', { bind: function(el, binding, vNode) { // 定义变量 let pressTimer = null; // 定义函数处理程序 // 创建计时器( 1秒后执行函数 ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行任务 !!! }, 1000) } } // 取消计时器 let cancel = (e) => { // 检查是否有正在运行的计时器 if ( pressTimer !== null ) { clearTimeout(pressTimer); pressTimer = null; } } // 添加事件监听器 el.addEventListener("mousedown", start); // 取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); } })

接下来,我们需要添加一个函数来运行传递给 longpress 指令的方法。

Vue.directive('longpress', { bind: function(el, binding, vNode) { // 定义变量 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("click", cancel); el.addEventListener("mouseout", cancel); } })

现在,可以在 Vue 应用中使用这个指令了,除非使用者给指令传入的值不是一个函数。因此,我们需要通过警告反馈给使用者。

为了反馈给使用者,我们在 bind 函数中添加了以下内容:

// 确保提供的表达式是函数 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); }

最后,如果这个指令也适用于触屏设备,那会是极好的。因此,我们添加了 touchstart、touchend 和 touchcancel 事件监听器。

最终代码如下:

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); } })

现在可以在 Vue 组件里使用了:

<template>     <div>         <button v-longpress="incrementPlusTen" @click="incrementPlusOne">{{value}}</button>     </div> </template> <script> export default { data() { return { value: 10 } }, methods: { // 增加1 incrementPlusOne() { this.value++ }, // 增加10 incrementPlusTen() { this.value += 10 } } } </script>

. . .

如果你想知道更多关于 自定义指令、可用的 钩子函数、可以传递到这个钩子函数中的 参数、函数简写 的信息, 参照 @vuejs 官方文档,作者做了很好的解释。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6知识点补充

    ECMAScript 6.0(简称ES6),作为下一代JavaScript的语言标准正式发布于2015 年 6 月,至今已经发布3年多了,但是因为蕴含的语法之广...

    grain先森
  • 前端- CSS 的空格处理

    上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。为了便于识别,这里使用半圆形符号◡表示空格。

    grain先森
  • 彻底明白闭包!

    那么 JavaScript 解析器是如何执行这段代码的呢?今天我们再一步一步解释一下上面代码的执行过程。

    grain先森
  • xgboost的原理没你想像的那么难

    xgboost 已然火爆机器学习圈,相信不少朋友都使用过。要想彻底掌握xgboost,就必须搞懂其内部的模型原理。这样才能将各个参数对应到模型内部,进而理解参数...

    用户1332428
  • xgboost的原理没你想像的那么难

    作者:milter 链接:https://www.jianshu.com/p/7467e616f227

    zenRRan
  • python函数详解

        *args接收全部位置参数,聚合为元祖 **kwargs接收全部关键字参数,聚合为字典

    py3study
  • Flink核心概念:系统架构、时间处理、状态与检查点

    上图的Flink示例程序对一个数据流做简单处理,整个过程包括了输入(Source)、转换(Transformation)和输出(Sink)。程序由多个DataS...

    PP鲁
  • Scala中的偏函数

    艺术地说,Scala中的Partial Function就是一个“残缺”的函数,就像一个严重偏科的学生,只对某些科目感兴趣,而对没有兴趣的内容弃若蔽履。Part...

    张逸
  • Python爬虫爬取知乎小结

    最近学习了一点网络爬虫,并实现了使用Python来爬取知乎的一些功能,这里做一个小的总结。网络爬虫是指通过一定的规则自动的从网上抓取一些信息的程序或脚本。我们知...

    小小科
  • Python爬虫爬取知乎小结

    最近学习了一点网络爬虫,并实现了使用Python来爬取知乎的一些功能,这里做一个小的总结。网络爬虫是指通过一定的规则自动的从网上抓取一些信息的程序或脚本。我们知...

    小小科

扫码关注云+社区

领取腾讯云代金券