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)文章
Vue3使用ref解決GetElementById為空的問題
今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點,使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
vue3中storeToRefs讓store中的結(jié)構(gòu)出來的數(shù)據(jù)也能變成響應(yīng)式(推薦)
這篇文章主要介紹了vue3中storeToRefs讓store中的結(jié)構(gòu)出來的數(shù)據(jù)也能變成響應(yīng)式,本文通過實例代碼給大家介紹的分需要的朋友可以參考下2024-09-09
vue router 通過路由來實現(xiàn)切換頭部標(biāo)題功能
在做單頁面應(yīng)用程序時,一般頁面布局頭尾兩塊都是固定在布局頁面,中間為是路由入口。這篇文章主要介紹了vue-router 通過路由來實現(xiàn)切換頭部標(biāo)題 ,需要的朋友可以參考下2019-04-04
vue2 拖動排序 vuedraggable組件的實現(xiàn)
這篇文章主要介紹了vue2 拖動排序 vuedraggable組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue3+Element?Plus實現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實現(xiàn)el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09

