VUE 長押しイベント要件の共有例

この記事では、主にいくつかの長押しイベントのニーズを詳しく紹介します。興味のある方は参考にしていただければ幸いです。

開発では、長押しイベントが必要になることがよくあります。ここで、いくつかの長押しイベントの要件を簡単に紹介します。

要件 1: 数字を長押しして加算または減算します

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

このデモはモバイル側でテストされているため、タッチ イベントが使用されます。方法は非常に簡単で、タッチスタートでインターバルタイマーを登録し、タッチエンドでタイマーをクリアすることで、連続的に加算または減算する効果を得ることができます。

要件 2: 長押し遅延イベントトリガー

このタイプの要件も、要件 1 と同様、比較的単純です。要件 1 を例に挙げます。setTimeout タイマーを touchstart に追加してイベントの実行を遅延し、touchend を追加してタイマーをクリアします。

関連する推奨事項:

vue 長い画像の垂直方向のセンタリングと短い画像の垂直方向のセンタリングを実装する方法の例

vue axios を使用してドメイン間でデータをリクエストする詳細な例

Vue high の使用方法-コンポーネントを注文します

以上がVUE 長押しイベント要件の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。