Partage d'exemples d'exigences d'événement de pression longue VUE

Cet article présente principalement en détail les besoins de plusieurs événements de presse longs pour tout le monde. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Dans le développement, des événements de presse longs sont souvent nécessaires. Ici, je vais présenter brièvement les exigences pour plusieurs événements de presse longs.

Condition 1 : Appuyez longuement sur le numéro pour ajouter ou soustraire

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

Cette démo a été testée côté mobile, elle utilise donc des événements tactiles. La méthode est très simple. Enregistrez une minuterie d'intervalle lorsque vous touchez le démarrage et effacez la minuterie lorsque vous touchez la fin. De cette façon, vous pouvez obtenir l'effet d'une accumulation continue ou d'une décrémentation d'une pression longue.

Exigence deux : Déclencheur d'événement de retard d'appui long

Ce type d'exigence est également relativement simple, similaire à la première exigence. Prenons l'exemple de l'exigence 1. Ajoutez simplement un minuteur setTimeout à touchstart pour retarder l'exécution de l'événement et touchend pour effacer le minuteur.

Recommandations associées :

Exemple de la méthode de vue consistant à centrer verticalement les images longues en haut et les images courtes centrées verticalement

vue utilise axios Explication détaillée des exemples de données de requêtes inter-domaines

Comment utiliser les composants d'ordre supérieur de Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!