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)文章
使用Vue和Firebase實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ)的示例代碼
在現(xiàn)代 web 應(yīng)用開發(fā)中,前端和后端的無(wú)縫協(xié)作至關(guān)重要,借助 Firebase 等云計(jì)算解決方案,前端開發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與實(shí)時(shí)更新,本文將為大家詳細(xì)介紹如何利用 Vue 3 的 Composition API 和 Firebase 實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ),需要的朋友可以參考下2024-10-10
一個(gè)基于vue3+ts+vite項(xiàng)目搭建初探
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了一個(gè)基于vue3+ts+vite項(xiàng)目搭建的相關(guān)資料,需要的朋友可以參考下2022-05-05
解決vue項(xiàng)目input輸入框雙向綁定數(shù)據(jù)不實(shí)時(shí)生效問題
這篇文章主要介紹了解決vue項(xiàng)目input輸入框雙向綁定數(shù)據(jù)不實(shí)時(shí)生效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在本篇內(nèi)容里小編給大家講的是關(guān)于vue組件命名和props命名的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-09-09
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
npm install -g @vue/cli安裝vue腳手架報(bào)錯(cuò)問題(一般都能解決)
這篇文章主要介紹了npm install -g @vue/cli安裝vue腳手架報(bào)錯(cuò)問題(一般都能解決),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07