vue实现按钮的长按功能 vue实现按钮的长按功能

先给大家介绍下vue实现按钮的长按功能，效果图如下：
实现效果图：
文章图片

实现思路：

给需要操作的 dom 元素添加touchstart(点击开始)、touchend(点击结束)、touchmove(手指移动)事件
在使用touchstart(点击开始)事件的时候设置定时器，在指定时间内如果不做其他操作就视为长按事件，执行长按事件的同时需要设定当前不是单击事件，以防止touchend(点击结束)执行的时候同时出现长按事件和单击事件
在 touchend(点击结束)里面清除定时器，并判断是不是单击事件
在 touchmove(手指移动)里面清除定时器，并设定当前不是单击事件

代码 HTML

按钮

export default {data() {return {}},methods: {// 手指按下事件gotouchstart() {window.isClick = trueclearTimeout(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)}}

【vue实现按钮的长按功能】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 事件了实现效果

文章图片

实现代码

press.js文件如下：

const press = {bind: function (el, binding, vNode) {console.log(el, binding, vNode)// el就是domif (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 = https://www.it610.com/article/value},// 指令与元素解绑的时候，移除事件绑定unbind(el) {el.removeEventListener('click', el.handler)},}export default press

到此这篇关于vue实现按钮的长按功能的文章就介绍到这了,更多相关vue按钮长按内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！