俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

用 Vue 编写一个长按指令

用 Vue 编写一个长按指令

2018/08/22 · JavaScript · Vue

原文出处: Obaseki Nosa   译文出处:kingrychen   

图片 1

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

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

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

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

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

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

您是否曾想过按住按钮几秒钟才能在Vue应用程序中执行某个功能?

原理

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

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

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

您是否曾想在应用程序上创建一个按钮,通过按一次来清除单个输入?

如何实现

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

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

我们需要做的是:

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

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

如果你曾有过这些想法,很好,我也是。那么恭喜你看到了这篇文章。

实践

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

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

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

本文将解释如何通过按下按钮来执行功能和删除输入。

变量

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

let pressTimer = null;

1
let pressTimer = null;

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

首先,我将解释如何在VanillaJS中实现这一目标。然后,为它创建一个Vue指令。

启动函数

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建计时器 ( 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 } }

1
2
3
4
5
6
7
let cancel = (e) => {
    // 检查 pressTimer 的值是否为 null
    if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
    }
}

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

为了实现长按,用户需要按住按钮几秒钟。

设置触发器

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

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

1
2
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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 定义变量
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);

要在代码中复制它,我们需要在按下鼠标“单击”按钮时监听,启动计时器,不管我们希望用户在执行函数之前按住按钮,并在时间设置之后执行该功能。

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:用 Vue 编写一个长按指令

您可能还会对下面的文章感兴趣: