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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(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è)按鈕，通過(guò)按一次（或按住按鈕的整個(gè)輸入）來(lái)清除單個(gè)輸入？

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

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

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

那么，讓我們開始吧。

原理

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

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

非常簡(jiǎn)單！但是，我們需要知道用戶何時(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í)間之前沒(méi)有被清除，我們就會(huì)發(fā)現(xiàn)mouseup事件沒(méi)有被觸發(fā) - 我們可以說(shuō)用戶沒(méi)有釋放按鈕。因此，它被認(rèn)為是長(zhǎng)按，然后我們可以繼續(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里建立長(zhǎng)按指令-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://jinyejixie.com/article6/dehoog.html

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

廣告

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