VUE long press event requirement example sharing

This article mainly introduces the needs of several long press events in detail for everyone. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

In development, there is often a need for long press events. Here I will briefly introduce the requirements for several long press events.

Requirement 1: Long press the numbers to add up or down

HTML：

<p class="mui-numbox" data-numbox-step=&#39;10&#39; data-numbox-min=&#39;0&#39; data-numbox-max=&#39;100&#39;>
   <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart="Loop_Sub(item.CartID)" @touchend="clearLoop()">-</button>
   <input class="mui-numbox-input" type="number" :value="item.Cart_Nums"/>
   <button class="mui-btn mui-numbox-btn-plus" type="button" @touchstart="Loop_Add(item.CartID)" @touchend="clearLoop()">+</button>
</p>

JS :

var vm = new Vue({     
　　el: "#vue-container",
  data:{
　　　　Loop:null
　　},
　　methods:{//长按添加数量
　　　　Loop_Add:function(ID){
　　　　　　//设置数量
　　　　　　clearInterval(vm.Loop);//再次清空定时器，防止重复注册定时器
　　　　　　$target=$(event.target).parent().find('input');
　　　　　　vm.Loop=setInterval(function(){
　　　　　　$num=$target.val();
　　　　　　$target.val(parseInt($num)+1);
　　　　　　},100);
　　　　},
　　　　//长按减少数量
  　　Loop_Sub:function(ID){
　　　　　　//设置数量
　　　　　　clearInterval(vm.Loop);//再次清空定时器，防止重复注册定时器
　　　　　　$target=$(event.target).parent().find('input');
　　　　　　vm.Loop=setInterval(function(){
　　　　　　　　$num=$target.val();
　　　　　　　　if($num>0){
　　　　　　　　　　$target.val(parseInt($num)-1);
　　　　　　　　}else{
　　　　　　　　　　clearInterval(vm.Loop);
　　　　　　　　}
      　　//改变点击数
　　　　　　},100);
　　　　},
　　　　clearLoop:function(){
　　　　　　clearInterval(vm.Loop);
　　　　}
　　}
})

This demo was tested on the mobile terminal, so the touch event is used. The method is very simple. Register an Interval timer when you touchstart, and clear the timer when you touchend. In this way, you can achieve the effect of continuous accumulation or decrement of long press.

Requirement two: Long press delay event trigger

This type of requirement is also relatively simple, similar to requirement one. Take requirement 1 as an example. Just add a setTimeout timer to touchstart to delay event execution, and touchend to clear the timer.

Related recommendations:

Vue implements the method example of vertically centering long images on top and short images vertically centering

vue uses axios Detailed explanation of cross-domain request data examples

How to use Vue high-order components

The above is the detailed content of VUE long press event requirement example sharing. For more information, please follow other related articles on the PHP Chinese website!