如何在Vue里建立長按指令

guqiu 發(fā)布于2019-08-26 12:15 / 2109人閱讀

摘要：首先，我們必須聲明自定義指令的名稱。這基本上注冊了一個名為的全局自定義指令接下來，我們使用一些參數(shù)添加函數(shù)，這允許我們引用元素指令綁定，獲取傳遞給指令的值并標(biāo)識使用該指令的組件。

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

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

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

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

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

那么，讓我們開始吧。

原理

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

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

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

怎么做

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

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

我們需要做的就是：

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

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

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

實際操作

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

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

variable 用于存儲計時器。

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

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

變量

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

let pressTimer = null;

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

啟動功能

該函數(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)
    }
}

取消功能

這個函數(shù)基本上就是名字所說的，取消了調(diào)用start函數(shù)時創(chuàng)建的setTimeout。

要取消setTimeout，我們將在javascript中使用 clearTimeout 方法，該方法基本上清除了使用setTimeout（）設(shè)置的計時器方法。

在使用clearTimeout之前，我們首先需要檢查 pressTimer 變量是否設(shè)置為null。如果它未設(shè)置為null，則表示存在活動計時器。所以，我們需要清除計時器，你猜對了，將 pressTimer 變量設(shè)置為 null 。

let cancel = (e) => {
    // Check if timer has a value or not
    if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
    }
}

一旦 mouseup 事件被觸發(fā)，就會調(diào)用此函數(shù)。

設(shè)置觸發(fā)器

剩下的就是將事件監(jiān)聽器添加到要添加長按效果的按鈕上。

addEventListener("mousedown", start);
addEventListener("click", cancel);

總而言之，我們有：

// Define variable
let 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 Timeout
let cancel = (e) => {

    // Check if timer has a value or not
    if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
    }
}

// select element with id longPressButton
let el = document.getElementById("longPressButton");

// Add Event listeners
el.addEventListener("mousedown", start);

// Cancel timeouts if this events happen
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);

將它全部包裝在Vue指令中

在創(chuàng)建Vue指令時，Vue允許我們在組件的全局或本地定義指令，但在本文中我們將使用全局路由。

讓我們構(gòu)建完成此任務(wù)的指令。

首先，我們必須聲明自定義指令的名稱。

Vue.directive("longpress", {
  
}

這基本上注冊了一個名為 v-longpress的全局自定義指令.

接下來，我們使用一些參數(shù)添加bind hook函數(shù) ，這允許我們引用元素指令綁定，獲取傳遞給指令的值并標(biāo)識使用該指令的組件。

Vue.directive("longpress", {
  bind: function (el, binding, vNode) {
    
  }
}

接下來，我們在bind函數(shù)中添加我們的長按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);
    }
})

接下來，我們需要添加一個函數(shù)來運行將傳遞給 longpress 指令的方法。

// Long Press vue directive
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 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);
        
    }
})

現(xiàn)在我們可以在我們的Vue應(yīng)用程序中使用該指令，該指令將正常工作，直到用戶添加的值不是指令值中的函數(shù)。所以我們必須通過在發(fā)生這種情況時警告用戶來防止這種情況。

要警告用戶，我們將以下內(nèi)容添加到bind函數(shù)：

// 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)
}

最后，這個指令也適用于觸控設(shè)備。所以我們?yōu)?touchstart ， touchend ＆ touchcancel 添加事件監(jiān)聽器。

把所有東西放在一起：

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);
    }
})

現(xiàn)在引用我們的Vue組件：

如果您希望了解有關(guān)自定義指令的更多信息，可以使用的鉤子函數(shù)，可以傳遞給此鉤子函數(shù)的參數(shù)，函數(shù)縮寫。偉大的家伙@vuejs在解釋它這里方面做得很好。

成功 !!!

插件：LogRocket，一個用于網(wǎng)絡(luò)應(yīng)用的DVR(錄像機)

LogRocket是一個前端日志記錄工具，可讓您像在自己的瀏覽器中一樣重放問題。LogRocket不是猜測錯誤發(fā)生的原因，也不是要求用戶提供屏幕截圖和日志轉(zhuǎn)儲，而是讓您重播會話以快速了解出現(xiàn)了什么問題。它適用于任何應(yīng)用程序，無論框架如何，并且具有從Redux，Vuex和@ngrx / store記錄其他上下文的插件。
除了記錄Redux操作和狀態(tài)之外，LogRocket還記錄控制臺日志，JavaScript錯誤，堆棧跟蹤，帶有標(biāo)題+正文的網(wǎng)絡(luò)請求/響應(yīng)，瀏覽器元數(shù)據(jù)和自定義日志。它還使用DOM來記錄頁面上的HTML和CSS，重新創(chuàng)建即使是最復(fù)雜的單頁應(yīng)用程序的像素完美視頻。

在這里試一試吧。

附：代碼示范來源

GPU云服務(wù)器云服務(wù)器如何在云vps上建立數(shù)據(jù)庫如何在云主機上建立數(shù)據(jù)庫如何在阿里云服務(wù)器上面建立網(wǎng)站如何在云服務(wù)器上建立數(shù)據(jù)庫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108339.html

發(fā)表評論

登陸后可評論

0條評論

guqiu

男|高級講師

我要關(guān)注我要私信

TA的文章

jsp代碼實例第102課

閱讀 2578·2021-11-23 09:51
一周的前端面試

閱讀 3126·2019-08-30 15:54
使用 CSS 計數(shù)器

閱讀 1080·2019-08-30 14:14
absolute和relative的位置關(guān)系與偽元素

閱讀 3551·2019-08-30 13:59
火狐使用阿里云OOS上傳圖片報錯：“XML 解析錯誤：找不到根元素”

閱讀 1409·2019-08-29 17:09
瀏覽器和兼容問題

閱讀 1470·2019-08-29 16:24
小豬喬治和border-radius

閱讀 2855·2019-08-29 15:43
重拾css(5)——瀏覽器默認樣式

閱讀 917·2019-08-29 12:45

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何在Vue里建立長按指令

相關(guān)文章