vue實現(xiàn)按鈕的長按功能

更新時間：2022年01月26日 15:45:02 作者：生活只會欺負(fù)窮人，愛情也是

這篇文章主要介紹了vue實現(xiàn)按鈕的長按功能,點擊按鈕實現(xiàn)長按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過實例代碼給大家分享實現(xiàn)思路，感興趣的朋友一起看看吧

先給大家介紹下vue實現(xiàn)按鈕的長按功能，效果圖如下：

實現(xiàn)效果圖：

實現(xiàn)思路：

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

代碼

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('在這里執(zhí)行長按事件')
        window.isClick = false
      }, 500)
    },
    //手釋放，如果在500毫秒內(nèi)就釋放，則取消長按事件，此時可以執(zhí)行onclick應(yīng)該執(zhí)行的事件
    gotouchend() {
 
      if (window.isClick) {
        console.log('在這里執(zhí)行點擊事件')
      }
    //如果手指有移動，則取消所有事件，此時說明用戶只是要移動而不是長按
    gotouchmove() {
      console.log('手指移動了')
      window.isClick = false
    }
  // 項目銷毀前清除定時器
  beforeDestroy() {
    clearTimeout(this.timeOut)
  }
}

style（去除長按出現(xiàn)的文字復(fù)制影響）

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

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

項目場景

點擊按鈕實現(xiàn)長按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件

實現(xiàn)思路

首先，需要創(chuàng)建一個計時器，在2 秒后開始執(zhí)行函數(shù)，用戶按下按鈕時觸發(fā) mousedown 事件，開始計時；
當(dāng)鼠標(biāo)移開按鈕時開始調(diào)用 mouseout事件
第一種情況，當(dāng) mouseup 事件 2 秒內(nèi)被觸發(fā)了，需要清除計時器，相當(dāng)于進(jìn)行了普通的點擊事件
第二種情況，當(dāng)計時器沒有在 2 秒內(nèi)清除，那么這就可以判定為一次長按，可以執(zhí)行長按的邏輯了。
如果在移動端使用，使用的就是 touchstart，touchend 事件了實現(xiàn)效果

在這里插入圖片描述

實現(xiàn)代碼

<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('實現(xiàn)了長按哦！??！')
    },
  }
}
</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
    // 創(chuàng)建計時器（ 2秒后執(zhí)行函數(shù) ）
    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
      }
    }
    // 運行函數(shù)
    const handler = (e) => {
      binding.value(e)
    }
    // 添加事件監(jiān)聽器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消計時器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 當(dāng)傳進(jìn)來的值更新的時候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

export default press

到此這篇關(guān)于vue實現(xiàn)按鈕的長按功能的文章就介紹到這了,更多相關(guān)vue按鈕長按內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: