VUE長(zhǎng)按事件需求詳解
在開發(fā)中常常會(huì)有長(zhǎng)按事件的需求，這里我簡(jiǎn)單的介紹幾種長(zhǎng)按事件的需求。
需求一：長(zhǎng)按數(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:{//長(zhǎng)按添加數(shù)量
Loop_Add:function(ID){
//設(shè)置數(shù)量
clearInterval(vm.Loop);//再次清空定時(shí)器，防止重復(fù)注冊(cè)定時(shí)器
$target=$(event.target).parent().find('input');
vm.Loop=setInterval(function(){
$num=$target.val();
$target.val(parseInt($num)+1);
},100);
},
//長(zhǎng)按減少數(shù)量
Loop_Sub:function(ID){
//設(shè)置數(shù)量
clearInterval(vm.Loop);//再次清空定時(shí)器，防止重復(fù)注冊(cè)定時(shí)器
$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);
}
//改變點(diǎn)擊數(shù)
},100);
},
clearLoop:function(){
clearInterval(vm.Loop);
}
}
})
這個(gè)Demo是在移動(dòng)端測(cè)試的，因此使用的是touch事件。方法很簡(jiǎn)單，touchstart的時(shí)候去注冊(cè)個(gè)Interval定時(shí)器，touchend的時(shí)候再把定時(shí)器清除掉，這樣就能實(shí)現(xiàn)長(zhǎng)按持續(xù)累加或者累減的效果。
需求二：長(zhǎng)按延時(shí)事件觸發(fā)
這類需求也比較簡(jiǎn)單，和需求一類似。這里拿需求一舉例，只需在touchstart添加setTimeout計(jì)時(shí)器延時(shí)事件執(zhí)行，touchend清除計(jì)時(shí)器即可。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家介紹了封裝一個(gè)更易用的Dialog組件過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性watch可以通過(guò)newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下2021-10-10
Vue3使用ref解決GetElementById為空的問(wèn)題
今天遇到一個(gè)問(wèn)題,就是在Vue3組件中需要獲取template中的元素節(jié)點(diǎn),使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問(wèn)題,需要的朋友可以參考下2023-12-12
vue3中storeToRefs讓store中的結(jié)構(gòu)出來(lái)的數(shù)據(jù)也能變成響應(yīng)式(推薦)
這篇文章主要介紹了vue3中storeToRefs讓store中的結(jié)構(gòu)出來(lái)的數(shù)據(jù)也能變成響應(yīng)式,本文通過(guò)實(shí)例代碼給大家介紹的分需要的朋友可以參考下2024-09-09
vue router 通過(guò)路由來(lái)實(shí)現(xiàn)切換頭部標(biāo)題功能
在做單頁(yè)面應(yīng)用程序時(shí)，一般頁(yè)面布局頭尾兩塊都是固定在布局頁(yè)面，中間為是路由入口。這篇文章主要介紹了vue-router 通過(guò)路由來(lái)實(shí)現(xiàn)切換頭部標(biāo)題 ,需要的朋友可以參考下2019-04-04
vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)
這篇文章主要介紹了vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用瀏覽器分享的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue2.0 實(shí)現(xiàn)頁(yè)面緩存和不緩存的方式
今天小編就為大家分享一篇Vue2.0 實(shí)現(xiàn)頁(yè)面緩存和不緩存的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue3+Element?Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09