Rumah  >  Artikel  >  hujung hadapan web  >  VUE长按事件需求实例分享

VUE长按事件需求实例分享

小云云
小云云asal
2018-01-09 13:41:362270semak imbas

本文主要为大家详细介绍了为大家详细几种长按事件的需求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求。

 需求一:长按数字累加或者累减

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(&#39;input&#39;);
      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(&#39;input&#39;);
      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);
    }
  }
})

 这个Demo是在移动端测试的,因此使用的是touch事件。方法很简单,touchstart的时候去注册个Interval定时器,touchend的时候再把定时器清除掉,这样就能实现长按持续累加或者累减的效果。

需求二:长按延时事件触发

这类需求也比较简单,和需求一类似。这里拿需求一举例,只需在touchstart添加setTimeout计时器延时事件执行,touchend清除计时器即可。

相关推荐:

vue实现长图垂直居上短图垂直居中的方法实例

vue使用axios跨域请求数据实例详解

Vue高阶组件的使用方法

Atas ialah kandungan terperinci VUE长按事件需求实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn