VUE長按事件需求詳解
在開發(fā)中常常會有長按事件的需求,這里我簡單的介紹幾種長按事件的需求。
需求一:長按數(shù)字累加或者累減

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:{//長按添加數(shù)量
Loop_Add:function(ID){
//設(shè)置數(shù)量
clearInterval(vm.Loop);//再次清空定時器,防止重復(fù)注冊定時器
$target=$(event.target).parent().find('input');
vm.Loop=setInterval(function(){
$num=$target.val();
$target.val(parseInt($num)+1);
},100);
},
//長按減少數(shù)量
Loop_Sub:function(ID){
//設(shè)置數(shù)量
clearInterval(vm.Loop);//再次清空定時器,防止重復(fù)注冊定時器
$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);
}
//改變點擊數(shù)
},100);
},
clearLoop:function(){
clearInterval(vm.Loop);
}
}
})
這個Demo是在移動端測試的,因此使用的是touch事件。方法很簡單,touchstart的時候去注冊個Interval定時器,touchend的時候再把定時器清除掉,這樣就能實現(xiàn)長按持續(xù)累加或者累減的效果。
需求二:長按延時事件觸發(fā)
這類需求也比較簡單,和需求一類似。這里拿需求一舉例,只需在touchstart添加setTimeout計時器延時事件執(zhí)行,touchend清除計時器即可。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue和Firebase實現(xiàn)后臺數(shù)據(jù)存儲的示例代碼
在現(xiàn)代 web 應(yīng)用開發(fā)中,前端和后端的無縫協(xié)作至關(guān)重要,借助 Firebase 等云計算解決方案,前端開發(fā)者可以輕松實現(xiàn)數(shù)據(jù)存儲與實時更新,本文將為大家詳細介紹如何利用 Vue 3 的 Composition API 和 Firebase 實現(xiàn)后臺數(shù)據(jù)存儲,需要的朋友可以參考下2024-10-10
解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題
這篇文章主要介紹了解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
使用elementUI實現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實現(xiàn)將圖片上傳到本地的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決)
這篇文章主要介紹了npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

