VUE-Long-Press-Event-Anforderungsbeispiel zum Teilen

Dieser Artikel stellt hauptsächlich die Bedürfnisse mehrerer langer Presseveranstaltungen im Detail vor. Interessierte Freunde können darauf verweisen.

In der Entwicklung besteht häufig Bedarf an langen Presseveranstaltungen. Hier werde ich kurz die Anforderungen für mehrere lange Presseveranstaltungen vorstellen.

Anforderung 1: Drücken Sie lange auf die Zahl, um sie zu addieren oder zu subtrahieren

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

Diese Demo wurde auf der mobilen Seite getestet, verwendet also Touch-Events. Die Methode ist sehr einfach. Registrieren Sie einen Intervall-Timer, wenn Sie auf „Start“ tippen, und löschen Sie den Timer, wenn Sie „End“ berühren. Auf diese Weise können Sie den Effekt einer kontinuierlichen Akkumulation oder Dekrementierung durch langes Drücken erzielen.

Anforderung zwei: Langes Drücken verzögert den Ereignisauslöser

Diese Art von Anforderung ist ebenfalls relativ einfach, ähnlich wie Anforderung eins. Nehmen Sie als Beispiel Anforderung 1. Fügen Sie einfach einen setTimeout-Timer zu touchstart hinzu, um die Ereignisausführung zu verzögern, und touchend, um den Timer zu löschen.

Verwandte Empfehlungen:

Beispiel für die Methode von vue, lange Bilder oben und kurze Bilder vertikal zentriert zu zentrieren

vue verwendet Axios Detaillierte Erläuterung von Beispielen für domänenübergreifende Anforderungsdaten

So verwenden Sie hochrangige Vue-Komponenten

Das obige ist der detaillierte Inhalt vonVUE-Long-Press-Event-Anforderungsbeispiel zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!