vue實現按鈕的長按功能

阿新 • • 發佈：2022-01-27

先給大家介紹下實現按鈕的長按功能，效果圖如下：

實現效果圖：

vue實現按鈕的長按功能

實現思路：

給需要操作的 dom 元素新增touchstart(點選開始)、touchend(點選結束)、touchmove(手指移動)事件
在使用touchstart(點選開始)事件的時候設定定時器，在指定時間內如果不做其他操作就視為長按事件，執行長按事件的同時需要設定當前不是單擊事件，以防止touchend(點選結束)執行的時候同時出現長按事件和單擊事件
在 touchend(點選結束)裡面清除定時器，並判斷是不是單擊事件
在 touchmove(手指移動)裡面清除定時器，並設定當前不是單擊事件

程式碼

HTML

<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend" class="div">按鈕</div>

export default {
  data() {
    return {}
  },methods: {
    // 手指按下事件
    gotouchstart() {
      window.isClick = true
      clearTimeout(this.timeOut)
      this.timeOut = setTimeout(function() {
        console.log('在這裡執行長按事件')
        window.isClick = false
      },500)
    },//手釋放，如果在500毫秒內就釋放，則取消長按事件，此時可以執行onclick應該執行的事件
    gotouchend() {
 
   iGgUBKsu 
   if (window.isClick) {
        console.log('在這裡執行點選事件')
      }
    //如果手指有移動，則取消所有事件，此時說明使用者只是要移動而不是長按
    gotouchmove() {
      console.log('手指移動了')
      window.isClick = false
    }
  // 專案銷燬前清除定時器
  beforeDestroy() {
    clearTimeout(this.timeOut)
  }
}

style（去除長按出現的文字複製影響）

 -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

補充：下面看下Vue使用自定義指令實現按鈕長按提示功能，超簡單！

專案場景

點選按鈕實現長按，使用者需要按下按鈕幾秒鐘，然後觸發相應的事件

實現思路

首先，需要建立一個計時器，在2 秒後開始執行函式，使用者按下按鈕時觸發 mousedown 事件，開始計時；
當滑鼠移開按鈕時開始呼叫 mouseout事件
第一種情況，當 mouseup 事件 2 秒內被觸發了，需要清除計時器，相當於進行了普通的點選事件
第二種情況，當計時器沒有在 2 秒內清除，那麼這就可以判定為一次長按，可以執行長按的邏輯了。
如果在移動端使用，使用的就是 touchstart，touchend 事件了實現效果

在這裡插入圖片描述

實現程式碼

<template>
  <div>
  	 <div class="btn-copy"><el-button v-press="handleClickLong">長按</el-button></div>
  </div>
</template>

<script>
import press from '../../directive/test/press'
export default {
  directives: {
    press
  },data(){
    riGgUBKsueturn{
    }
  },methods:{
    handleClickLong () {
      alert('實現了長按哦！！！')
    },}
}
</script>
iGgUBKsu
<style lang="s">
</style>

press.js檔案如下：

const press = {
  bind: function (el,binding,vNode) {
    console.log(el,vNode)
    // el就是dom
    if (typeof binding.value !== 'function') {
      throw 'callback must be a function'
    }
    // 定義變數
    let pressTimer = null
    // 建立計時器（ 2秒後執行函式 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        },2000)
      }
    }
    // 取消計時器
    let cancel = (e) => {
      console.log(e)
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 執行函式
    const handler = (e) => {
      binding.value(e)
    }
    // 新增事件監聽器
    el.addEventListener('mousedown',start)
    el.addEventListener('touchstart',start)
    // 取消計時器
    el.addEventListener('click',cancel)
    el.addEventListener('mouseout',cancel)
    el.addEventListener('touchend',cancel)
    el.addEventListener('touchcancel',cancel)
  },// 當傳進來的值更新的時候觸發
  componentUpdated(el,{ value }) {
    el.$value = value
  },// 指令與元素解綁的時候，移除事件繫結
  unbind(el) {
    el.removeEventListener('click',el.handler)
  },}

export default press

到此這篇關於vue實現按鈕的長按功能的文章就介紹到這了,更多相關vue按鈕長按內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！