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

时间:2021-1-8 作者:admin

推荐参考支持 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 进度条组件

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。