vue 按钮,vue给按钮添加事件的方法
本文主要介绍vue对按钮长按功能的实现。点击按钮实现长按功能。用户需要按下按钮几秒钟，然后触发相应的事件。本文将通过示例代码与大家分享实现思路。有兴趣的朋友来看看吧。
首先介绍vue实现按钮的长按功能。效果图如下：
实现效果图：
实现思路：
向要操作的dom元素添加touchstart、touchend和touchmove事件。
使用touchstart事件时设置定时器，如果在规定时间内没有做其他事情，将被视为长按事件。当执行长按事件时，需要设置当前的非点击事件，以防止长按事件和点击事件在执行touchend时同时发生。
清除触摸中的计时器，并确定它是否是一个点击事件。
清除touchmove中的计时器，并设置非点击的当前事件。
代码
超文本标记语言
div @ touch start= gotouchstart @ touch move= gotouchmove @ touch end= gotouchend class= div button/div
射流研究…
导出默认值{
data() {
返回{}
},
方法：{
//手指按压事件
gotouchstart() {
window.isClick=true
clearTimeout(this.timeOut)
this . time out=setTimeout(function(){
Console.log(在此执行长按事件)
window.isClick=false
}, 500)
},
//手动释放。如果在500毫秒内释放，取消长按事件。这时候就可以执行onclick应该执行的事件了。
gotouchend() {
if (window.isClick) {
Console.log(在此处执行单击事件)
}
//如果手指动了，取消所有事件。此时意味着用户只是想移动而不是按住。
gotouchmove() {
Console.log(手指移动)
window.isClick=false
}
//在项目被销毁之前清除计时器
销毁前(){
clearTimeout(this.timeOut)
}
}
样式(去除长按造成的文本复制的影响)
-webkit-touch-callout:无；
-WebKit-用户选择：无；
-khtml-user-select:无；
-moz-user-select:无；
-ms-user-select:无；
用户选择：无；
补充：我们来看看Vue使用自定义指令实现按钮长按提示的功能。超级简单！
项目场景
点击按钮实现长按。用户需要按下按钮几秒钟，然后触发相应的事件。
实现思路
首先，您需要创建一个计时器，它将在2秒钟后开始执行该功能。当用户按下按钮时，mousedown事件将被触发，计时器将启动。当鼠标移动按钮时，在第一种情况下会调用mouseout事件。当mouseup事件在2秒内被触发时，定时器需要清零，相当于普通点击事件的第二种情况。当定时器在2秒内没有清零时，可以判断为长按，可以执行长按的逻辑。如果在移动端使用，会使用touchstart，touchend event实现效果。
实现代码
模板
差异
class= BTN-copy El-button v-press= handle click long 长按/el-button/div
/div
/模板
脚本
从导入印刷机././指令/测试/压力
导出默认值{
指令：{
压
},
data(){
返回{
}
},
方法：{
handleClickLong () {
alert(‘实现了长按！)
},
}
}
/脚本
样式lang=scss
/风格
press.js文件如下：
恒定压力={
bind: function (el，binding，vNode) {
console.log(el、binding、vNode)
//el是dom
if(绑定类型. value！==函数){
throw“回调必须是函数”
}
//定义变量
让pressTimer=null
//创建一个定时器(2秒后执行该函数)
let start=(e)={
如果(e.type===点击 e.button！==0) {
返回
}
if (pressTimer===null) {
按Timer=setTimeout(()={
处理程序()
}, 2000)
}
}
//取消计时器
let cancel=(e)={
console.log(e)
if(按Timer！==null) {
清除超时(按定时器)
pressTimer=null
}
}
//运行函数
常数处理程序=(e)=>
绑定值(e)
}
//添加事件监听器
l.addEventListener(mousedown ，start)
l.addEventListener(touchstart ，start)
//取消计时器
l.addEventListener(click ，cancel)
我。addevent侦听器( mouseit ，cancel)
l.addEventListener(touchend ，cancel)
我。添加事件侦听器(“轻触取消”，取消)
},
//当传进来的值更新的时候触发
componentUpdated(el，{ value })
他是谁？$value=值
},
//指令与元素解绑的时候，移除事件绑定
解除绑定(El)}
l.removeEventListener(click ，el.handler)
},
}
汇出预设出版社
到此这篇关于视图(视图)实现按钮的长按功能的文章就介绍到这了，更多相关视图(视图)按钮长按内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。