Vue 3 的渐变进度条组件 - vue3-progress

Vue 3 的渐变进度条组件 - vue3-progress
插件名称 vue3-progress
发布时间 2021年6月12日
插件作者 tangyouge

用于 Vue.js 3 应用程序的漂亮、可定制的进度(加载)栏组件。

安装和下载:

# NPM
$ npm i vue3-progress --save

使用

1. 导入并注册组件。

import Vue3Progress from "vue3-progress";
createApp(App).use(Vue3Progress).mount("#app");

2.在模板中添加进度条组件。

<div id="app">
  <vue3-progress />
  <router-view />
</div>
export default {
  name: "App",
  created() {
    this.$progress.start();
    this.$router.beforeEach((to, from, next) => {
      this.$progress.start();
      next();
    });
    this.$router.afterEach((to, from) => {
      this.$progress.finish();
    });
  },
};

3. 配置进度条。

const options = {
  position: "fixed",
  height: "5px",
  color: "<Your Color>",
};
createApp(App).use(Vue3Progress, options)

4. API 方法。

// 启动进度条
this.$progress.start();

// 结束进度条
this.$progress.finish();

// 设置进度条的高度
this.$progress.height(4);