封装一个Ant-Design-Vue的展示下载进度的组件

/src/libs/util.downloadNotification.js

import { ref, h } from 'vue'
import { notification, Progress } from 'ant-design-vue'

// 默认总用时
const total = 20000
const percent = ref({})
const message = ref({})
const status = ref({})
const intervalTimer = ref({})
const timeoutTimer = ref({})
// 开始下载
export const openDownload = (key) => {
    percent.value[key] = 0
    message.value[key] = '文件下载中...'
    status.value[key] = null
    intervalTimer.value[key] = setInterval(() => {
        if (percent.value[key] < 98) {
            percent.value[key]++
        } else {
            clearInterval(intervalTimer.value[key])
            intervalTimer.value[key] = null
        }
    }, total / 100)
    notification.open({
        message: () => message.value[key],
        duration: 0,
        description: () =>
            h(
                Progress,
                {
                    percent: percent.value[key],
                    size: 'small',
                    status: status.value[key]
                },
            ),
        top: 60,
        style: {
            width: '280px',
            marginRight: '-15px'
        },
        key,
        class: 'download-notification',
    })
}
// 结束下载
export const closeDownload = (key, succeed) => {
    console.log('close')
    if (succeed) {
        message.value[key] = '下载成功'
        percent.value[key] = 100
    } else {
        message.value[key] = '下载失败'
        status.value[key] = 'exception'
    }
    clearInterval(intervalTimer.value[key])
    intervalTimer.value[key] = null
    timeoutTimer.value[key] = setTimeout(() => {
        notification.close(key)
        clearTimeout(timeoutTimer.value[key])
        timeoutTimer.value[key] = null
    }, 3000)
}

使用

import { openDownload, closeDownload } from '@/libs/util.downloadNotification.js'

const key = `key${Date.now()}`
openDownload(key)
closeDownload(key)