您是否曾想過按住按鈕幾秒鐘才能在Vue應用程序中執行某個功能？
您是否曾想在應用程序上創建一個按鈕，通過按一次（或按住按鈕的整個輸入）來清除單個輸入？
如果你曾有過這些想法，很好，我也是。那么恭喜你看到了這篇文章。
本文將解釋如何通過按下（或按住）按鈕來執行功能和刪除輸入。
首先，我將解釋如何在VanillaJS中實現這一目標。然后，為它創建一個Vue指令。
那么，讓我們開始吧。
原理
為了實現長按，用戶需要按住按鈕幾秒鐘。
要在代碼中復制它，我們需要在按下鼠標“單擊”按鈕時監聽，啟動計時器，不管我們希望用戶在執行函數之前按住按鈕，并在時間設置之后執行該功能。
非常簡單！但是，我們需要知道用戶何時按住該按鈕。
怎么做
當用戶單擊按鈕時，在單擊事件之前會觸發另外兩個事件： mousedown 和 mouseup 。
當用戶按下鼠標按鈕時會調用 mousedown 事件，而當用戶釋放該按鈕時會調用mouseup事件。
我們需要做的就是：
發生mousedown事件后啟動計時器。
清除該計時器，并且在2secs標記之前觸發mouseup事件后不執行該函數。即完整點擊事件。
只要計時器在到達那個時間之前沒有被清除，我們就會發現mouseup事件沒有被觸發 - 我們可以說用戶沒有釋放按鈕。因此，它被認為是長按，然后我們可以繼續執行所述功能。
實際操作
讓我們深入研究代碼并完成這項工作。
首先，我們必須定義3件事，即：
variable 用于存儲計時器。
start 函數啟動計時器。
cancel 函數取消定時器
變量
這個變量基本上保存了setTimeout的值，所以我們可以在發生mouseup事件時取消它。
let pressTimer = null;
我們將變量設置為null，這樣我們就可以檢查變量，以便知道當前是否有一個活動定時器，然后才能取消它。
啟動功能
該函數由setTimeout組成，它基本上是Javascript中的一種方法，它允許我們在函數中聲明的特定持續時間之后執行函數。
請記住，在創建click事件的過程中，會觸發兩個事件。但我們需要啟動計時器的是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) }}取消功能
這個函數基本上就是名字所說的，取消了調用start函數時創建的setTimeout。
要取消setTimeout，我們將在javascript中使用 clearTimeout 方法，該方法基本上清除了使用setTimeout（）設置的計時器方法。
在使用clearTimeout之前，我們首先需要檢查 pressTimer 變量是否設置為null。如果它未設置為null，則表示存在活動計時器。所以，我們需要清除計時器，你猜對了，將 pressTimer 變量設置為 null 。
let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null }}一旦 mouseup 事件被觸發，就會調用此函數。
設置觸發器
剩下的就是將事件監聽器添加到要添加長按效果的按鈕上。
addEventListener("mousedown", start);addEventListener("click", cancel);總而言之，我們有：
// Define variablelet pressTimer = null;// Create timeout ( run function after 1s )let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Execute something !!! }, 1000); }}// Cancel Timeoutlet cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer); pressTimer = null; }}// select element with id longPressButtonlet el = document.getElementById('longPressButton');// Add Event listenersel.addEventListener("mousedown", start);// Cancel timeouts if this events happenel.addEventListener("click", cancel);el.addEventListener("mouseout", cancel);將它全部包裝在Vue指令中
在創建Vue指令時，Vue允許我們在組件的全局或本地定義指令，但在本文中我們將使用全局路由。
讓我們構建完成此任務的指令。
首先，我們必須聲明自定義指令的名稱。
Vue.directive('longpress', { }這基本上注冊了一個名為 v-longpress的全局自定義指令.
接下來，我們使用一些參數添加bind hook函數 ，這允許我們引用元素指令綁定，獲取傳遞給指令的值并標識使用該指令的組件。
Vue.directive('longpress', { bind: function (el, binding, vNode) { }}接下來，我們在bind函數中添加我們的長按javascript代碼。
Vue.directive('longpress', { bind: function (el, binding, vNode) { // Define variable let pressTimer = null // Define funtion handlers // Create timeout ( run function after 1s ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Execute something !!! }, 1000) } } // Cancel Timeout let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // Add Event listeners el.addEventListener("mousedown", start); // Cancel timeouts if this events happen el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); }})接下來，我們需要添加一個函數來運行將傳遞給 longpress 指令的方法。
// Long Press vue directiveVue.directive('longpress', { bind: function (el, binding, vNode) { // Define variable let pressTimer = null // Define funtion handlers // Create timeout ( run function after 1s ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Execute function handler() }, 1000) } } // Cancel Timeout let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // Run Function const handler = (e) => { // Execute method that is passed to the directive binding.value(e) } // Add Event listeners el.addEventListener("mousedown", start); // Cancel timeouts if this events happen el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); }})現在我們可以在我們的Vue應用程序中使用該指令，該指令將正常工作，直到用戶添加的值不是指令值中的函數。所以我們必須通過在發生這種情況時警告用戶來防止這種情況。
要警告用戶，我們將以下內容添加到bind函數：
// Make sure expression provided is a functionif (typeof binding.value !== 'function') { // Fetch name of component const compName = vNode.context.name // pass warning to console let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be` if (compName) { warn += `Found in component '${compName}' ` } console.warn(warn)}最后，這個指令也適用于觸控設備。所以我們為 touchstart ， touchend ＆ touchcancel 添加事件監聽器。
把所有東西放在一起：
Vue.directive('longpress', { bind: function (el, binding, vNode) { // Make sure expression provided is a function if (typeof binding.value !== 'function') { // Fetch name of component const compName = vNode.context.name // pass warning to console let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be` if (compName) { warn += `Found in component '${compName}' ` } console.warn(warn) } // Define variable let pressTimer = null // Define funtion handlers // Create timeout ( run function after 1s ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Run function handler() }, 1000) } } // Cancel Timeout let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // Run Function const handler = (e) => { binding.value(e) } // Add Event listeners el.addEventListener("mousedown", start); el.addEventListener("touchstart", start); // Cancel timeouts if this events happen el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); el.addEventListener("touchend", cancel); el.addEventListener("touchcancel", cancel); }})現在引用我們的Vue組件：
<template> <div> <button v-longpress="incrementPlusTen" @click="incrementPlusOne">{{value}}</button> </div></template><script>export default { data() { return { value: 10 } }, methods: { // Increment value plus one incrementPlusOne() { this.value++ }, // increment value plus 10 incrementPlusTen() { this.value += 10 } }}</script>如果您希望了解有關自定義指令的更多信息，可以使用的鉤子函數，可以傳遞給此鉤子函數的參數，函數縮寫。偉大的家伙@vuejs在解釋它這里方面做得很好。
成功 !!!
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
