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怎么实现按钮的长按功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。