Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解
更新時間：2023年12月07日 16:01:31 作者：GoodTimeGGB
這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳，通過時間戳計算指定時間內(nèi)不能點擊按鈕，具體實現(xiàn)代碼跟隨小編一起看看吧
1、業(yè)務(wù)需求
需要加一個按鈕，調(diào)用第三方API，按鈕十分鐘之內(nèi)只能點擊一次，刷新頁面也只能點擊一次
2、思路
加一個本地緩存的時間戳，通過時間戳計算指定時間內(nèi)不能點擊按鈕
3、實現(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() // 時間戳(秒級)
if (!storedTime || (currentTime - storedTime) / 1000 / 60 >= 10) {
// 如果存儲的時間不存在或者距離上次點擊時間超過10分鐘，則執(zhí)行按鈕點擊操作
this.getDataLoading = true
try {
await GetDataInfo({})
} catch (error) {
this.getDataLoading = false
}
this.getDataLoading = false
localStorage.setItem('lastClickGetDataTime', currentTime)
} else {
// 距離上次點擊時間小于10分鐘，不做任何操作或給出提示
this.$message({
message: '請在十分鐘后再點擊按鈕',
type: 'warning',
})
}
},
},
}
</script>// 注：指定時間可以根據(jù)需要更新，比如1分鐘內(nèi)只能點擊一次，只需要將循環(huán)部分改為
if (!storedTime || (currentTime - storedTime) / 1000 >= 60)
2） 效果
希望以上內(nèi)容能夠幫助你使用Vue + Element 實現(xiàn)按鈕指定間隔時間點擊。
到此這篇關(guān)于Vue + Element 實現(xiàn)按鈕指定間隔時間點擊的文章就介紹到這了,更多相關(guān)vue Element按鈕指定間隔時間點擊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
獲取路由詳細內(nèi)容信息是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于vue獲取路由詳細內(nèi)容信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的.本文重點給大家介紹Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
最近在做一些數(shù)據(jù)透析的項目需要用到報表圖，那么報表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue報錯Cannot?read?properties?of?undefined?(...)類型的解決辦法
這篇文章主要給大家介紹了關(guān)于vue報錯Cannot?read?properties?of?undefined?(...)類型的解決辦法,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)計算器計算效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
下面小編就為大家分享一篇解決vue頁面刷新或者后退參數(shù)丟失的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue video和vue-video-player實現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實現(xiàn)視頻鋪滿教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在開發(fā)現(xiàn)代?Web?應(yīng)用時,前端和后端通常分離部署在不同的服務(wù)器上,這就會引發(fā)跨域請求問題,所以本文將詳細介紹如何在?Vue?項目中使用?Axios?發(fā)起跨域請求時解決跨域問題的相關(guān)資料,需要的朋友可以參考下2024-09-09