您是否曾想過按住按鈕幾秒鐘才能在Vue應用程序中執(zhí)行某個功能？

您是否曾想在應用程序上創(chuàng)建一個按鈕，通過按一次（或按住按鈕的整個輸入）來清除單個輸入？

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

本文將解釋如何通過按下（或按住）按鈕來執(zhí)行功能和刪除輸入。

首先，我將解釋如何在VanillaJS中實現(xiàn)這一目標。然后，為它創(chuàng)建一個Vue指令。

那么，讓我們開始吧。

原理

為了實現(xiàn)長按，用戶需要按住按鈕幾秒鐘。

要在代碼中復制它，我們需要在按下鼠標“單擊”按鈕時監(jiān)聽，啟動計時器，不管我們希望用戶在執(zhí)行函數(shù)之前按住按鈕，并在時間設置之后執(zhí)行該功能。

非常簡單！但是，我們需要知道用戶何時按住該按鈕。

怎么做

當用戶單擊按鈕時，在單擊事件之前會觸發(fā)另外兩個事件： mousedown 和 mouseup 。

當用戶按下鼠標按鈕時會調(diào)用 mousedown 事件，而當用戶釋放該按鈕時會調(diào)用mouseup事件。

我們需要做的就是：

發(fā)生mousedown事件后啟動計時器。

清除該計時器，并且在2secs標記之前觸發(fā)mouseup事件后不執(zhí)行該函數(shù)。即完整點擊事件。

只要計時器在到達那個時間之前沒有被清除，我們就會發(fā)現(xiàn)mouseup事件沒有被觸發(fā) - 我們可以說用戶沒有釋放按鈕。因此，它被認為是長按，然后我們可以繼續(xù)執(zhí)行所述功能。

實際操作

讓我們深入研究代碼并完成這項工作。

首先，我們必須定義3件事，即：

variable 用于存儲計時器。

start 函數(shù)啟動計時器。

cancel 函數(shù)取消定時器

變量

這個變量基本上保存了setTimeout的值，所以我們可以在發(fā)生mouseup事件時取消它。

let pressTimer = null;

我們將變量設置為null，這樣我們就可以檢查變量，以便知道當前是否有一個活動定時器，然后才能取消它。

啟動功能

該函數(shù)由setTimeout組成，它基本上是Javascript中的一種方法，它允許我們在函數(shù)中聲明的特定持續(xù)時間之后執(zhí)行函數(shù)。

請記住，在創(chuàng)建click事件的過程中，會觸發(fā)兩個事件。但我們需要啟動計時器的是mousedown事件。因此，如果是單擊事件，我們不需要啟動計時器。

// Create timeout ( run function after 1s )let start = (e) => {    // Make sure the event trigger isn't a click event  if (e.type === 'click' && e.button !== 0) {    return;  }  // Make sure we don't currently have a setTimeout running  // before starting another  if (pressTimer === null) {    pressTimer = setTimeout(() => {      // Execute soemthing !!!    }, 1000)  }}

取消功能