vue怎么實現按鈕的長按功能

這篇文章主要介紹“vue怎么實現按鈕的長按功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么實現按鈕的長按功能”文章能幫助大家解決問題。

效果圖如下：

實現效果圖：

實現思路：

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

代碼

HTML

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

JS

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() {
 
      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(){
    return{
    }
  },
  methods:{
    handleClickLong () {
      alert('實現了長按哦！！！')
    },
  }
}
</script>

<style lang="scss">
</style>

press.js文件如下：

const press = {
  bind: function (el, binding, vNode) {
    console.log(el, binding, 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怎么實現按鈕的長按功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。