Vue怎么实现接口进度条效果寻技术

这篇文章主要介绍“Vue怎么实现接口进度条效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue怎么实现接口进度条效果”文章能帮助大家解决问题。

实现思路

首先定义一个进度条组件来渲染页面展示效果，组件包含进度条背景、进度长度、以及进度数字，同时还要设置数据绑定相关属性，如进度条当前的百分比、动画执行状态、以及完成状态等。在请求数据的过程中，需要添加监听函数来监测数据请求的过程变化，并更新组件相应的属性和界面元素。

代码实现

下面是使用 Vue 实现一个接口进度条的栗子：

<template>
    <div class="progress-bar">
        <div class="bg"></div>
        <div class="bar" :></div>
        <div class="label">{{ progress }}%</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            progress: 0,
            isPlaying: false,
            isCompleted: false
        }
    },
    mounted() {
        this.start();
    },
    methods: {
        start() {
            this.isPlaying = true;
            this.animateProgress(90)
                .then(() => {
                    if (!this.isCompleted) {
                        this.animateProgress(100);
                    }
                })
                .catch((error) => {
                    console.error('Progress error', error);
                });
        },
        animateProgress(target) {
            return new Promise((resolve, reject) => {
                let start = this.progress;
                const end = target;
                const duration = (target - start) * 150;

                const doAnimation = () => {
                    const elapsed = Date.now() - startTime;
                    const progress = Math.min(elapsed / duration, 1);

                    this.progress = start + ((end - start) * progress);

                    if (progress === 1) {
                        resolve();
                    } else if (this.isCompleted) {
                        resolve();
                    } else {
                        requestAnimationFrame(doAnimation);
                    }
                };

                const startTime = Date.now();
                requestAnimationFrame(doAnimation);
            });
        },
        finish() {
            this.isCompleted = true;
            this.progress = 100;
        }
    }
};
</script>

<style scoped>
.progress-bar {
    position: relative;
    height: 8px;
    margin: 10px 0;
}
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    border-radius: 5px;
}
.bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 5px;
    background-color: #409eff;
    transition: width 0.5s;
}
.label {
    position: absolute;
    top: -20px;
    left: calc(100% + 5px);
    color: #333;
    font-size: 12px;
}
</style>

首先定义了三个数据属性用于控制动画的播放和完成状态，分别是进度条当前比例

progress

、动画播放状态

isPlaying

、动画完成状态

isCompleted

。在组件初始化的过程中，调用了

start

方法来启动进度条动画效果。在该方法内部，使用 Promise 来从 0% 到 90% 的百分比向相应位置移动，并在到达该位置时停止。

判断当前是否完成，如果没有完成则再次调用

animateProgress(100)

，并在进度加载期间检查是否有数据返回。若存在，则停止前半段动画，并使用1秒钟将进度条填充至100%。

下面讲解一下如何在请求数据的过程中添加监听函数：

import axios from 'axios';
import ProgressBar from './ProgressBar.vue';

const progressBar = new Vue(ProgressBar).$mount();
document.body.appendChild(progressBar.$el);

在这个代码片段中，使用了 Axios 拦截器来监听请求的过程。在请求开始之前，向页面添加进度条组件，之后将该组件挂载到页面中，并且将其元素追加到 HTML 的

<body>

标记尾部。

接下来，通过

onDownloadProgress

监听函数来监测下载进度的变化。如果加载完成则移除进度条组件。同时，也可以实现针对使用不同 API 的 ajax 请求设定不同的进度条，以达到更佳的用户体验效果。

axios.interceptors.request.use((config) => {    
    const progressBar = new Vue(ProgressBar).$mount();
    document.body.appendChild(progressBar.$el);

    config.onDownloadProgress = (event) => {
        if (event.lengthComputable) {
            progressBar.progress = parseInt((event.loaded / event.total) * 100, 10);  
            if (progressBar.progress === 100) {
                progressBar.finish();
                setTimeout(() => {
                    document.body.removeChild(progressBar.$el);
                }, 500);
            }
        }
    };

    return config;
}, (error) => {
    return Promise.reject(error);
});

参数注入

为了能够灵活地调整接口进度条效果，可以使用参数注入来控制动画速度和完成时间的设定。在

animateProgress

函数中，使用传参来设置百分比范围和动画播放速度，从而得到不同进度条和播放时间的效果。

animateProgress(target, duration) {
    return new Promise((resolve, reject) => {
        let start = this.progress;
        const end = target;

        const doAnimation = () => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);

            this.progress = start + ((end - start) * progress);

            if (progress === 1) {
                resolve();
            } else if (this.isCompleted) {
                resolve();
            } else {
                requestAnimationFrame(doAnimation);
            }
        };

        const startTime = Date.now();
        requestAnimationFrame(doAnimation);
    });
}

...

this.animateProgress(90, 1000)
    .then(() => {
        if (!this.isCompleted) {
            this.animateProgress(100, 500);
        }
    })
...

在这个栗子中，将