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

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

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

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

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

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

那么，讓我們開始吧。

原理

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

要在代碼中復制它，我們需要在按下鼠標“單擊”按鈕時監(jiān)聽，啟動計時器，不管我們希望用戶在執(zhí)行函數(shù)之前按住按鈕，并在時間設(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;

分享名稱：詳解如何在Vue里建立長按指令-創(chuàng)新互聯(lián)
當前鏈接：http://chinadenli.net/article6/dehoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、建站公司、關(guān)鍵詞優(yōu)化、網(wǎng)站導航、網(wǎng)站設(shè)計、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)