vue3批量按钮倒计时

最新推荐文章于 2024-02-15 22:54:31 发布

juo666

最新推荐文章于 2024-02-15 22:54:31 发布

阅读量194

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42966709/article/details/134376106

版权

1、vue3批量按钮倒计时，代码如下

<template>
<!-- // 事件区域按钮 -->
    <div v-show="formatShow(item)&&item.options && item.options.isShow != false" class="operateArea boxSd setBtn" :class="formatClass(item.options.layoutType)" data-html2canvas-ignore 
    :key="item.key"  :style="areaStyleFn(item)">
       <el-row v-for="(rItm,rIdx) in item.rows" :key="rIdx" :gutter="10" class="mb8">
             <el-col v-for="(cItem,index) in rItm.columns" :key="index" :span="cItem.span" style="text-align: center">
                <template v-for="(lItem,lIndex) in cItem.list" :key="lIndex">
                   <!-- // 倒计时 -->
                   <el-button v-show="nowCountdown(lItem.keyNo)" type="info" loading>{{nowCountdown(lItem.keyNo)}}S</el-button>
                   <template v-if="!nowCountdown(lItem.keyNo)">
                      <el-button v-if="lItem.btnType == 'print' && pageAuth[item.keyNo][lItem.keyNo]" v-show="formateHide(lItem)&&formatInitShow(lItem)"  @click="openPrint()">{{ $t(lItem.label) }}</el-button>
                      <el-button v-else-if="lItem.btnType == 'preivewsImg' && pageAuth[item.keyNo][lItem.keyNo]" v-show="formateHide(lItem)&&formatInitShow(lItem)"  @click="showPrview(lItem)" :type="lItem.model?(lItem.model==='ExpandAllButton'?'info':'primary'):(lItem.options.type?lItem.options.type:'primary')">{{ $t(lItem.label) }}</el-button>
                      <!-- 批量打印 -->
                      <el-button v-else-if="lItem.btnType == 'batchPrint' && pageAuth[item.keyNo][lItem.keyNo]" v-show="formateHide(lItem)&&formatInitShow(lItem)"  @click="batchPrint(pageNo, item.keyNo, lItem,item)" :type="lItem.options.type?lItem.options.type:'primary'">{{ $t(lItem.label) }}</el-button>
                      <cPopover v-else-if="lItem.btnType == 'colShowHide' && pageAuth[item.keyNo][lItem.keyNo]" v-show="formateHide(lItem)&&formatInitShow(lItem)" :columns="allTableCol[lItem.options.serveArea[0]]" :showClu="true" :userPageAreaNo="`${userName}_${pageNo}_${lItem.keyNo}`" />
                      <el-button v-else-if="pageAuth[item.keyNo][lItem.keyNo]" v-show="formateHide(lItem)&&formatInitShow(lItem)" :type="lItem.model?(lItem.model==='ExpandAllButton'?'info':'primary'):(lItem.options.type?lItem.options.type:'primary')"
                         :icon="operateBtnIcon(lItem.buttonVaule)" @click="eventFn(pageNo, item.keyNo, lItem)"
                         :class="operateBtnClass(lItem.buttonVaule)" >
                         {{ $t(lItem.label) }}
                      </el-button>
                   </template>
                </template>
             </el-col>
       </el-row>
    </div>
</template>
<script setup name="templateOne">
const countdownObj = reactive({}) //倒计时对象

onMounted(()=>{
   // 按钮倒计时
   nextTick(()=>{
      let countdownTimer = null
      countdownTimer = setInterval(() => {
         Object.keys(countdownObj).forEach(keyNo => {
            let oldNum = countdownObj[keyNo].countdown

            if(oldNum > 0){
               countdownObj[keyNo].countdown = oldNum - 1
            }else if (oldNum <= 0) {
               delete countdownObj[keyNo]
            }
         })
         if(!Object.keys(countdownObj).length){
            // 清除掉定时器
            clearInterval(countdownTimer)
         }
      }, 1000);
   })
})

const nowCountdown = computed(() => (keyNo) => {
   return countdownObj[keyNo] && countdownObj[keyNo].countdown ? countdownObj[keyNo].countdown : 0
})

</script>