Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊思路詳解
更新時(shí)間：2023年12月07日 16:01:31 作者：GoodTimeGGB
這篇文章主要介紹了Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊,實(shí)現(xiàn)思路大概是通過加一個(gè)本地緩存的時(shí)間戳，通過時(shí)間戳計(jì)算指定時(shí)間內(nèi)不能點(diǎn)擊按鈕，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧
1、業(yè)務(wù)需求
需要加一個(gè)按鈕，調(diào)用第三方API，按鈕十分鐘之內(nèi)只能點(diǎn)擊一次，刷新頁面也只能點(diǎn)擊一次
2、思路
加一個(gè)本地緩存的時(shí)間戳，通過時(shí)間戳計(jì)算指定時(shí)間內(nèi)不能點(diǎn)擊按鈕
3、實(shí)現(xiàn)
1）vue頁面
<template>
<el-row :gutter="15">
<el-col :span="4">
<el-button
type="danger"
icon="el-icon-download"
@click="getData"
:loading="getDataLoading">獲取數(shù)據(jù)</el-button>
</el-col>
</el-row>
</template>
<script type="text/ecmascript-6">
import { GetDataInfo } from '@/api/xxx'
export default {
data () {
return {
getDataLoading: false,
}
},
methods: {
// 獲取數(shù)據(jù)按鈕，10分鐘內(nèi)執(zhí)行一次(本地緩存)
async getData () {
const storedTime = localStorage.getItem('lastClickGetDataTime')
const currentTime = Date.now() // 時(shí)間戳(秒級(jí))
if (!storedTime || (currentTime - storedTime) / 1000 / 60 >= 10) {
// 如果存儲(chǔ)的時(shí)間不存在或者距離上次點(diǎn)擊時(shí)間超過10分鐘，則執(zhí)行按鈕點(diǎn)擊操作
this.getDataLoading = true
try {
await GetDataInfo({})
} catch (error) {
this.getDataLoading = false
}
this.getDataLoading = false
localStorage.setItem('lastClickGetDataTime', currentTime)
} else {
// 距離上次點(diǎn)擊時(shí)間小于10分鐘，不做任何操作或給出提示
this.$message({
message: '請(qǐng)?jiān)谑昼姾笤冱c(diǎn)擊按鈕',
type: 'warning',
})
}
},
},
}
</script>// 注：指定時(shí)間可以根據(jù)需要更新，比如1分鐘內(nèi)只能點(diǎn)擊一次，只需要將循環(huán)部分改為
if (!storedTime || (currentTime - storedTime) / 1000 >= 60)
2） 效果
希望以上內(nèi)容能夠幫助你使用Vue + Element 實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊。
到此這篇關(guān)于Vue + Element 實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊的文章就介紹到這了,更多相關(guān)vue Element按鈕指定間隔時(shí)間點(diǎn)擊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-10-10
Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了如何獲取vue單文件自身源碼路徑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
在Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟
在工作中遇到需要前端上傳excel文件獲取到相應(yīng)數(shù)據(jù)處理之后傳給后端并且展示上傳文件的數(shù)據(jù),所以本文就來給大家介紹一下Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟,需要的朋友可以參考下2023-08-08
Vue.js中自定義Markdown插件實(shí)現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個(gè)插件來解析<references>標(biāo)簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標(biāo)簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧2024-07-07