推荐参考支持 Vue3 的进度条组件 vue3-progress
vue3-progress
A vue3 component of progress bar the custom colors are supported
一款 vue3 进度条组件 支持自定义喜欢的颜色
Demo
Install
$ npm i vue3-progress
Usage
main.js
import Vue3Progress from "vue3-progress"; const options = { position: "fixed", height: "3px", // color: "<Your Color>", }; createApp(App).use(Vue3Progress, options).mount("#app");
App.vue
<template> <div id="app"> <vue3-progress /> <router-view /> </div> </template> <script> export default { name: "App", mounted() { this.$progress.finish(); }, created() { this.$progress.start(); this.$router.beforeEach((to, from, next) => { this.$progress.start(); next(); }); this.$router.afterEach((to, from) => { this.$progress.finish(); }); }, }; </script>
APIs
this.$progress.start() // start the loading
this.$progress.finish() // finish the loading
this.$progress.height(4) // resize the height of loading bar to 4px