国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何在Vue里建立長按指令

jimhs / 1326人閱讀

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

您是否曾想過按住按鈕幾秒鐘才能在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 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指令中

在創建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 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);
        
    }
})

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

要警告用戶，我們將以下內容添加到bind函數：

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

最后，這個指令也適用于觸控設備。所以我們為 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組件：

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

成功 !!!

插件：LogRocket，一個用于網絡應用的DVR(錄像機)

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

在這里試一試吧。

附：代碼示范來源

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113755.html

相關文章

  • 如何在Vue里建立長按指令

    摘要：首先，我們必須聲明自定義指令的名稱。這基本上注冊了一個名為的全局自定義指令接下來，我們使用一些參數添加函數，這允許我們引用元素指令綁定，獲取傳遞給指令的值并標識使用該指令的組件。 showImg(https://segmentfault.com/img/bVbfzuo?w=828&h=838); 您是否曾想過按住按鈕幾秒鐘才能在Vue應用程序中執行某個功能？ 您是否曾想在應用程序上創建...

    guqiu 評論0 收藏0

  • 移動端VUE點擊、滑動和長按等事件處理（自定義指令）

    摘要：問題移動設備上的觸摸事件如何利用它們三個來處理點擊長按滑動等操作，以及如何在測試用例中模擬它們的操作參考了實現方法上這位大哥的思路移動設備的點擊優化參考了感謝解決使用自定義指令來干這件事來記錄開始點擊的位置和時間，并在這里邊判斷長按操作來確 問題： 移動設備上的觸摸事件：touchstart、touchmove、touchend如何利用它們三個來處理點擊、長按、滑動等操作，以及如何在測...

    niuxiaowei111 評論0 收藏0

  • vue 在移動端體驗上的優化解決方案

    摘要：去年年底自己搭了一個在移動端的開發框架，感覺體驗不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗優化的實戰。去年年底自己搭了一個vue在移動端的開發框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發框架做了以下優化 自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態管理緩存組件 better-sc...

    godlong_X 評論0 收藏0

發表評論

0條評論

jimhs

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<