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

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

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

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

實(shí)現(xiàn)效果圖：

實(shí)現(xiàn)思路：

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

代碼

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

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

項(xiàng)目場景

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

實(shí)現(xiàn)思路

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

在這里插入圖片描述

實(shí)現(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('實(shí)現(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)建計(jì)時(shí)器（ 2秒后執(zhí)行函數(shù) ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, 2000)
      }
    }
    // 取消計(jì)時(shí)器
    let cancel = (e) => {
      console.log(e)
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 運(yùn)行函數(shù)
    const handler = (e) => {
      binding.value(e)
    }
    // 添加事件監(jiān)聽器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消計(jì)時(shí)器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 當(dāng)傳進(jìn)來的值更新的時(shí)候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

export default press

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

您可能感興趣的文章: