VUE长按事件需求详解

 更新时间:2017年10月18日 11:31:27   作者:一曲笙箫  
这篇文章主要为大家详细介绍了为大家详细几种长按事件的需求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

HTML:

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
   <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>
</div>

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);
    }
  }
})

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue的h5日历组件实现详解

    vue的h5日历组件实现详解

    这篇文章主要为大家详细介绍了vue的h5日历组件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 封装一个更易用的Dialog组件过程详解

    封装一个更易用的Dialog组件过程详解

    这篇文章主要为大家介绍了封装一个更易用的Dialog组件过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • 简单聊聊Vue中的计算属性和属性侦听

    简单聊聊Vue中的计算属性和属性侦听

    计算属性用于处理复杂的业务逻辑,vue提供了检测数据变化的一个属性watch可以通过newVal获取变化之后的值,这篇文章主要给大家介绍了关于Vue中计算属性和属性侦听的相关资料,需要的朋友可以参考下
    2021-10-10
  • Vue3使用ref解决GetElementById为空的问题

    Vue3使用ref解决GetElementById为空的问题

    今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下
    2023-12-12
  • vue3中storeToRefs让store中的结构出来的数据也能变成响应式(推荐)

    vue3中storeToRefs让store中的结构出来的数据也能变成响应式(推荐)

    这篇文章主要介绍了vue3中storeToRefs让store中的结构出来的数据也能变成响应式,本文通过实例代码给大家介绍的分需要的朋友可以参考下
    2024-09-09
  • vue router 通过路由来实现切换头部标题功能

    vue router 通过路由来实现切换头部标题功能

    在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口。这篇文章主要介绍了vue-router 通过路由来实现切换头部标题 ,需要的朋友可以参考下
    2019-04-04
  • vue2 拖动排序 vuedraggable组件的实现

    vue2 拖动排序 vuedraggable组件的实现

    这篇文章主要介绍了vue2 拖动排序 vuedraggable组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue如何调用浏览器分享功能详解

    vue如何调用浏览器分享功能详解

    这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue2.0 实现页面缓存和不缓存的方式

    Vue2.0 实现页面缓存和不缓存的方式

    今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue3+Element Plus实现el-table跨行显示(非脚手架)

    Vue3+Element Plus实现el-table跨行显示(非脚手架)

    这篇文章主要介绍了Vue3+Element Plus实现el-table跨行显示(非脚手架),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09

最新评论