vue-倒計時控件

好久木有來更新了，最近幾個月把精力都花費在了加班上~

最近用vue整前端有個倒計時控件的需求，用element-ui滿足不了需求，便模仿常見的倒計時效果，寫了一個控件，有需要的可以拿走：

<template>
    <div class="main  ml20">
            <el-tabs type="border-card" v-model="editableTabsValue"  @tab-remove="removeTab" >
            <el-tab-pane 
                v-for="item in editableTabs" 
                :key="item.name"
                :label="item.title"
                :name="item.name"
                :closable="item.content =='test'"
                :class="{bgf0f0f0:item.content=='test'}"
                >
                <div v-if="item.content=='test1'" class="mainContent">
                    <div class="mt20">
                        <el-table
                            :data="tableData"
                            style="width: 100%"
                            :header-row-style="{'background':'#FAFAFA'}"
                            :height="height"
                            max-height="500"
                            v-loading="loading"
                            >
                            <el-table-column
                                label="用戶名"
                                header-align="center"
                                align="center"
                                prop="userName">
                            </el-table-column>
                            <el-table-column
                                label="地址"
                                header-align="center"
                                align="center"
                                prop="address">
                            </el-table-column>
                            <el-table-column
                                label="狀態"
                                prop="status"
                                header-align="center"
                                align="center"
                                :formatter='convertStatus'>
                            </el-table-column>
                            <el-table-column
                                label="開始時間"
                                prop="beginTime"
                                header-align="center"
                                align="center"
                                width="150"
                                :formatter="formatTime">
                            </el-table-column>
                            <el-table-column
                                label="結束時間"
                                prop="endTime"
                                header-align="center"
                                align="center"
                                width="150"
                                :formatter="formatTime">
                            </el-table-column>
                            <el-table-column label="生成文件" header-align="center" align="center" width="150">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.exportType == 'SENDKEY'&seen">
                                            <el-button
                                            type="text"
                                            @click="sendkey(scope.$index, scope.row)">發送密鑰</el-button>
                                        </div>
                                        <div v-else-if="scope.row.exportType == 'SENDKEY'&!seen">
                                            <el-button type="text">{{percentage}}s後可重試</el-button>
                                        </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[20, 40, 60, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageTotal">
                            </el-pagination>
                        </div>
                    </div>
                </div>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    components:{
        newRequire
    },
    data() {
      return {
        editableTabsValue: '1',
        editableTabs: [{
          title: '測試',
          name: '1',
          content: 'test1'
        }],
        tabIndex: 1,
        taskSelect: "",
        tableData: [],
        multipleSelection: [],
        currentPage: 1,
        pageSize: 20,
        pageTotal: 0,
        seen:true,
        percentage: 60,
        gridData: [],
        loading: false,
        height:utils.tableHeight(240)
      }
    },
    created() {
        this.init();
    },
    methods: {
      init() {
        this.getData();
      },
      sendkey(index, row) {
        this.$axios
            .post("api/getKey ", {
                "id": row.id,
            })
            .then(res => {
                if(res.code == 0) {
                    this.isAble = index;
                    this.seen = false;
                    this.decrease();
                } else {
                    this.$message.error(res.message);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      formatter(row, column) {
        return row.address;
      },
      getData() {
        this.loading = true;
        this.$axios
            .post("api/getData", {
                pageSize: this.pageSize,
                pageNum: this.currentPage,
                "like":{
                    "id": this.id, 
                }
            })
            .then(res => {
                this.loading = false;
                if(res.code == 0) {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.totalCount;
                    if (res.data.pageSize > 0) {
                        this.pageSize = res.data.pageSize;
                    }
                    this.currentPage = res.data.pageNum;
                } else {
                    this.pageSize = 10;
                    this.pageTotal = 0;
                    this.currentPage = 1;
                    this.$message.error(res.message);
                }
                
            })
            .catch(function(error) {
                this.loading = false;
                console.log(error);
            });
        },
        formatTime(row, column) {
            if (
                row[column.property] == undefined ||
                row[column.property] == null ||
                row[column.property] == ""
            ) {
                return "";
            }
            const date = new Date(row[column.property]);
            return this.getFormatDate(date);
        },
        getFormatDate(date) {
                var yy = "";
            if((date.getMonth() + 1) < 10) {
                yy = "0" + (date.getMonth() + 1);
            } else {
                yy = date.getMonth() + 1;
            }
            var dd = "";
            if(date.getDate() < 10) {
                dd = "0" + date.getDate();
            } else {
                dd = date.getDate();
            }
            var hh = "";
            if(date.getHours() < 10) {
                hh = "0" + date.getHours();
            } else {
                hh = date.getHours();
            }
            var mm = "";
            if(date.getMinutes() < 10) {
                mm = "0" + date.getMinutes();
            } else {
                mm = date.getMinutes();
            }
            var ss = "";
            if(date.getSeconds() < 10) {
                ss = "0" + date.getSeconds();
            } else {
                ss = date.getSeconds();
            }
            return ( 
                date.getFullYear() +
                "-" +
                yy +
                "-" +
                dd +
                " " +
                hh +
                ":" +
                mm +
                ":" +
                ss +
                ""
            );
        },
        decrease() {
            this.percentage = this.percentage - 1;
            if (this.percentage <= 0) {
            this.percentage = 0;
            this.seen = true;
            this.percentage = 60;
            return;
            }
            setTimeout(this.decrease, 1000)
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.loading = true;
            this.$axios
                .post("api/export_task/getTaskExecList", {
                pageSize: val,
                pageNum: this.currentPage,
                "equal": {"status":this.taskSelect},
                "like":{
                    "userId": this.id, 
                    "taskCode": this.taskCode, 
                    "taskName": this.taskName
                }
                })
                .then(res => {
                    this.loading = false;
                    if(res.code == 0) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.totalCount;
                        this.pageSize = res.data.pageSize;
                        if (res.data.pageNum > 0) {
                            this.currentPage = res.data.pageNum;
                        }
                    } else {
                        this.pageSize = 10;
                        this.pageTotal = 0;
                        this.currentPage = 1;
                        this.$message.error(res.message);
                    }
                })
                .catch(function(error) {
                    this.loading = false;
                    console.log(error);
                });
            },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loading = true;
            this.$axios.post("api/export_task/getTaskExecList", {
                pageSize: this.pageSize,
                pageNum: val,
                "equal": {"status":this.taskSelect},
                "like":{
                    "userId": this.id, 
                    "taskCode": this.taskCode, 
                    "taskName": this.taskName
                }
            }).then(res => {
                this.loading = false;
                if(res.code == 0) {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.totalCount;
                    this.pageSize = res.data.pageSize;
                    if (res.data.pageNum > 0) {
                        this.currentPage = res.data.pageNum;
                    }
                } else {
                    this.pageSize = 10;
                    this.pageTotal = 0;
                    this.currentPage = 1;
                    this.$message.error(res.message);
                }
            }).catch(function(error) {
                this.loading = false;
                console.log(error);
            });
        }
    }
}
</script>

<style>
.tableContent, .queryContent{
    margin-left: 30px;
    margin-right: 30px;
}
.tableContent{
    margin-top: 10px;
    height: 900px;
}
.block {
  float: right;
  margin-right: 30px;
  margin-top: 10px;
}
.browseGridContent {
    width: 600px;
    height: 350px;
}
.tds{
    width: 100px;
}
.tableContent table th{
    background-color: #FAFAFA;
}
    .main /deep/ .el-table th, .el-table tr{
        background:none
    }
</style>