VUE中怎么实现一个长按事件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
需求一:长按数字累加或者累减
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中怎么实现一个长按事件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。