亲宝软件园·资讯

展开

vue按钮长按

生活只会欺负穷人,爱情也是 人气:0

先给大家介绍下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使用自定义指令实现按钮长按提示功能,超简单!

项目场景

点击按钮实现长按,用户需要按下按钮几秒钟,然后触发相应的事件

实现思路

在这里插入图片描述

实现代码

<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

加载全部内容

相关教程
猜你喜欢
用户评论