1、業務需求

需要加一個按鈕，調用第三方API，按鈕十分鐘之內只能點擊一次，刷新頁面也只能點擊一次

2、思路

加一個本地緩存的時間戳，通過時間戳計算指定時間內不能點擊按鈕

3、實現

1）vue頁面

<template>
  <el-row :gutter="15">
    <el-col :span="4">
      <el-button
      type="danger"
      icon="el-icon-download" 
      @click="getData"
      :loading="getDataLoading">獲取數據</el-button>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
import { GetDataInfo } from '@/api/xxx'

export default {
  data () {
    return {
      getDataLoading: false,
    }
  },
  methods: {
    // 獲取數據按鈕，10分鐘內執行一次(本地緩存)
    async getData () {
      const storedTime = localStorage.getItem('lastClickGetDataTime') 
      const currentTime = Date.now() // 時間戳(秒級)
      if (!storedTime || (currentTime - storedTime) / 1000 / 60 >= 10) {
        // 如果存儲的時間不存在或者距離上次點擊時間超過10分鐘，則執行按鈕點擊操作  
        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>

// 註：指定時間可以根據需要更新，比如1分鐘內只能點擊一次，只需要將迴圈部分改為

if (!storedTime || (currentTime - storedTime) / 1000 >= 60)

2） 效果

希望以上內容能夠幫助你使用Vue + Element 實現按鈕指定間隔時間點擊。歡迎點贊、關註、收藏，如果你還有其他問題，歡迎評論區交流。

本文來自博客園，作者：GoodTimeGGB，轉載請註明原文鏈接：https://www.cnblogs.com/goodtimeggb/p/17881268.html