VUE長按事件需求詳解
更新時間：2017年10月18日 11:31:27 作者：一曲笙簫
這篇文章主要為大家詳細介紹了為大家詳細幾種長按事件的需求，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在開發(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ù)量
clearInterval(vm.Loop);//再次清空定時器，防止重復注冊定時器
$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ù)量
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);
}
//改變點擊數(shù)
},100);
},
clearLoop:function(){
clearInterval(vm.Loop);
}
}
})
這個Demo是在移動端測試的，因此使用的是touch事件。方法很簡單，touchstart的時候去注冊個Interval定時器，touchend的時候再把定時器清除掉，這樣就能實現(xiàn)長按持續(xù)累加或者累減的效果。
需求二：長按延時事件觸發(fā)
這類需求也比較簡單，和需求一類似。這里拿需求一舉例，只需在touchstart添加setTimeout計時器延時事件執(zhí)行，touchend清除計時器即可。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用Vue和Firebase實現(xiàn)后臺數(shù)據(jù)存儲的示例代碼
在現(xiàn)代 web 應用開發(fā)中,前端和后端的無縫協(xié)作至關重要,借助 Firebase 等云計算解決方案,前端開發(fā)者可以輕松實現(xiàn)數(shù)據(jù)存儲與實時更新,本文將為大家詳細介紹如何利用 Vue 3 的 Composition API 和 Firebase 實現(xiàn)后臺數(shù)據(jù)存儲,需要的朋友可以參考下2024-10-10
當市面上主流的組件庫不能滿足我們業(yè)務需求的時候,那么我們就有必要開發(fā)一套屬于自己團隊的組件庫,下面這篇文章主要給大家介紹了一個基于vue3+ts+vite項目搭建的相關資料,需要的朋友可以參考下2022-05-05
解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題
這篇文章主要介紹了解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在本篇內(nèi)容里小編給大家講的是關于vue組件命名和props命名的相關知識點內(nèi)容，有興趣的朋友們可以學習下。2019-09-09
使用elementUI實現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實現(xiàn)將圖片上傳到本地的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決)
這篇文章主要介紹了npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了Element?table?上下移需求的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07