在开发官网，博客的时候，如果想要在页面顶部展示滚动进度，例如 twitter，Youtube 等，可以通过监听页面滚动来实现，但是为了避免重复造轮子，我整理了几款非常用好用 vue 进度条组件，直接用它不香吗？
vue-progressbar
一款轻量的线性进度条插件，允许配置进度条颜色，进度条失败颜色，宽度，速度，进度条的位置（页面的上下左右）。比如想要在页面切换的时候加入进度条，实现起来非常简单，只需要在把组件放到 #app 元素下即可。
<template>
<div id="app">
<!-- for example router view -->
<router-view></router-view>
<!-- set progressbar -->
<vue-progress-bar></vue-progress-bar>
</div>
</template>
<script>
export default {
mounted() {
// [App.vue specific] When App.vue is finish loading finish the progress bar
this.$Progress.finish();
},
created() {
// [App.vue specific] When App.vue is first loaded start the progress bar
this.$Progress.start();
// hook the progress bar to start before we move router-view
this.$router.beforeEach((to, from, next) => {
// does the page we want to go to have a meta.progress object
if (to.meta.progress !== undefined) {
let meta = to.meta.progress;
// parse meta tags
this.$Progress.parseMeta(meta);
}
// start the progress bar
this.$Progress.start();
// continue to next page
next();
});
// hook the progress bar to finish after we've finished moving router-view
this.$router.afterEach((to, from) => {
// finish the progress bar
this.$Progress.finish();
});
},
};
</script>
你也可以全局配置到 ajax 请求进度，例如 axios 的拦截器
import axios from "axios";
import app from "../main"; // import the instance
const instance = axios.create({
baseURL: "/api",
});
instance.interceptors.request.use((config) => {
app.$Progress.start(); // for every request start the progress
return config;
});
instance.interceptors.response.use((response) => {
app.$Progress.finish(); // finish when a response is received
return response;
});
export default instance; // export axios instance to be imported in your app
不过这种页面请求过多可能效果不是很好，可以单独配置单个请求。按使用场景配置即可。
<script>
export default {
methods: {
loadData () {
this.$Progress.start()
this.$http.jsonp('https://www.1024nav.com/api/getUserList')
.then((response) => {
this.$Progress.finish()
}, (response) => {
this.$Progress.fail()
})
}
}
}
</script>
类似的组件还有 vue2-loading-bar，vue-top-progress，当然还有 vue3 版本 vue3-progress，vue-next-progressbar
vue-scroll-progress
开头说到实现页面滚动顶部展示进度功能，这款组件就实现了你想要的功能，废话少说，直接点击看demo 效果，看下是不是你想要的。实现起来也非常简单。
在 app.js 里注册组件
import Vue from "vue";
import VueScrollProgress from "vue-scroll-progress";
Vue.use(VueScrollProgress);
在组件内部使用
<template>
<VueScrollProgress></VueScrollProgress>
</template>
类似的组件还有 vue-read-progress
