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을 예로 들어 보겠습니다. 이벤트 실행을 지연하려면 touchstart에 setTimeout 타이머를 추가하고, 타이머를 지우려면 touchend를 추가하세요.

관련 추천:

긴 이미지의 세로 센터링과 짧은 이미지의 세로 센터링을 구현하는 방법에 대한 Vue 예

vue Axios를 사용하여 도메인 간 데이터를 요청하는 자세한 예

Vue high 사용 방법 -부품 주문

위 내용은 VUE 길게 누르기 이벤트 요구사항 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!