Vue如何實(shí)現(xiàn)禁止短時(shí)間連續(xù)點(diǎn)擊事件

發(fā)布時(shí)間：2020-11-12 15:04:32 來(lái)源：億速云閱讀：1375 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章為大家展示了Vue如何實(shí)現(xiàn)禁止短時(shí)間連續(xù)點(diǎn)擊事件，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

如果連續(xù)點(diǎn)擊提交按鈕，可能會(huì)重復(fù)提交數(shù)據(jù)，導(dǎo)致出錯(cuò)，解決的方法可以使用disabled限制點(diǎn)擊，感覺(jué)體驗(yàn)不是太好，所有給大家分享下面的方法

<el-button @click="throttle()">測(cè)試</el-button> 
export default {
 data(){
  return {
   lastTime:0 //默認(rèn)上一次點(diǎn)擊時(shí)間為0 
  }
 }
}

methods:{
 throttle(){
  //獲取當(dāng)前時(shí)間的時(shí)間戳
  let now = new Date().valueOf();
  //第一次點(diǎn)擊
  if(this.lastTime == 0){
   console.log('觸發(fā)事件');
   this.lastTime = now;
  }else{
   if((now-this.lastTime) > 2000){
    //重置上一次點(diǎn)擊時(shí)間，2000是我自己設(shè)置的2秒間隔，根據(jù)自己的需要更改
    this.lastTime = now;
    console.log('間隔大于2秒，觸發(fā)方法');
    //添加自己要調(diào)用的方法
   }else{
    console.log('不觸發(fā)');
   }
  }
  },
}

這種方法雖然很好，但是遇到請(qǐng)求超時(shí)的情況可能不是太好處理（網(wǎng)絡(luò)原因、數(shù)據(jù)太大）?？紤]通過(guò)后端是否返回res來(lái)控制。方法還有待提高！僅供參考~

補(bǔ)充知識(shí)：解決vuex中module過(guò)多時(shí)，需一個(gè)個(gè)引入的問(wèn)題

在項(xiàng)目開(kāi)發(fā)中，使用vuex，如果項(xiàng)目過(guò)大，vuex就需要模塊化，但是如果module分的過(guò)多，我們就需要在store的index.js中一個(gè)個(gè)引入，這樣未免太麻煩，所以webpack出來(lái)了個(gè)配置，可以解決這個(gè)問(wèn)題，無(wú)需多次引入，懶癌患者福音，

以下是解決方案

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
 const value = modulesFiles(modulePath)
 modules[moduleName] = value.default
 return modules
}, {})
const store = new Vuex.Store({
 modules,
 getters
})
export default store

配置了這個(gè)后就無(wú)需一個(gè)個(gè)引入模塊了；

上述內(nèi)容就是Vue如何實(shí)現(xiàn)禁止短時(shí)間連續(xù)點(diǎn)擊事件，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

Vue如何實(shí)現(xiàn)禁止短時(shí)間連續(xù)點(diǎn)擊事件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽