一分钟看完如何开发 Vue3 组件?

推荐参考支持 Vue3 的进度条组件 vue3-progress

vue3-progress

A vue3 component of progress bar the custom colors are supported

一款 vue3 进度条组件 支持自定义喜欢的颜色

Demo

Live 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

License

MIT

Links

Vue.js – The Progressive JavaScript Framework

vue-ins-progress-bar 一款 ins 风格的 vue 进度条组件