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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了云城免費(fèi)建站歡迎大家使用！

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

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

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

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

那么，讓我們開始吧。

原理

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

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

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

怎么做

當(dāng)用戶單擊按鈕時(shí)，在單擊事件之前會(huì)觸發(fā)另外兩個(gè)事件： mousedown 和 mouseup 。

當(dāng)用戶按下鼠標(biāo)按鈕時(shí)會(huì)調(diào)用 mousedown 事件，而當(dāng)用戶釋放該按鈕時(shí)會(huì)調(diào)用mouseup事件。

我們需要做的就是：

發(fā)生mousedown事件后啟動(dòng)計(jì)時(shí)器。

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

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

實(shí)際操作

讓我們深入研究代碼并完成這項(xiàng)工作。

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

variable 用于存儲(chǔ)計(jì)時(shí)器。

start 函數(shù)啟動(dòng)計(jì)時(shí)器。

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

變量

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

let pressTimer = null;

新聞名稱：詳解如何在Vue里建立長按指令-創(chuàng)新互聯(lián)
URL地址：http://weahome.cn/article/dehoog.html