@aacassandra/vue3-progressbar 中文文档教程

发布于 4年前 浏览 31 项目主页 更新于 3年前

Vue 3 Progressbar

以前,我们想首先感谢一直愿意帮助全世界开发者的开发者,特别是那些为hilongjw/vue-progressbar做出贡献的开发者. 这里我继续之前的开发,提供vuejs版本3的支持。

Table of Contents

Demo

Demo

Requirements

Installation

# npm
$ npm install @aacassandra/vue3-progressbar

Usage

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import VueProgressBar from "@aacassandra/vue3-progressbar";

const options = {
  color: "#bffaf3",
  failedColor: "#874b4b",
  thickness: "5px",
  transition: {
    speed: "0.2s",
    opacity: "0.6s",
    termination: 300,
  },
  autoRevert: true,
  location: "left",
  inverse: false,
};

createApp(App)
  .use(VueProgressBar, options)
  .use(router)
  .mount("#app");

Constructor Options

keydescriptiondefaultoptions
colorcolor of the progress bar'rgb(143, 255, 199)'RGB HEX HSL HSV VEC
failedColorcolor of the progress bar upon load fail'red'RGB, HEX, HSL, HSV, VEC
thicknessthickness of the progress bar'2px'px, em, pt, %, vh, vw
transitiontransition speed/opacity/termination of the progress bar{speed: '0.2s', opacity: '0.6s', termination: 300}speed, opacity, termination
autoRevertwill temporary color changes automatically revert upon completion or failtruetrue, false
locationchange the location of the progress bartopleft, right, top, bottom
positionchange the position of the progress barfixedrelative, absolute, fixed
inverseinverse the direction of the progress barfalsetrue, false
autoFinishallow the progress bar to finish automatically when it is close to 100%truetrue, false

Implementation

App.vue

<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>

vue-router

export default [
  {
    path: "/achievement",
    name: "achievement",
    component: "./components/Achievement.vue",
    meta: {
      progress: {
        func: [
          { call: "color", modifier: "temp", argument: "#ffb000" },
          { call: "fail", modifier: "temp", argument: "#6e0000" },
          { call: "location", modifier: "temp", argument: "top" },
          {
            call: "transition",
            modifier: "temp",
            argument: { speed: "1.5s", opacity: "0.6s", termination: 400 },
          },
        ],
      },
    },
  },
];

vue-router meta options

callmodifierargumentexample
colorset, tempstring{call: 'color', modifier: 'temp', argument: '#ffb000'}
failset, tempstring{call: 'fail', modifier: 'temp', argument: '#ffb000'}
locationset, tempstring{call: 'location', modifier: 'temp', argument: 'top'}
transitionset, tempobject{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}

Methods

functiondescriptionparametersexample
startstart the progress bar loadingN/Athis.$Progress.start()
finishfinish the progress bar loadingN/Athis.$Progress.finish()
failcause the progress bar to end and failN/Athis.$Progress.fail()
increaseincrease the progress bar by a certain %number: integerthis.$Progress.increase(number)
decreasedecrease the progress bar by a certain %number: integerthis.$Progress.decrease(number)
setset the progress bar %number: integerthis.$Progress.set(number)
setFailColorcause the fail color to permanently changecolor: stringthis.$Progress.setFailColor(color)
setColorcause the progress color to permanently changecolor: stringthis.$Progress.setColor(color)
setLocationcause the progress bar location to permanently changelocation: stringthis.$Progress.setLocation(location)
setTransitioncause the progress bar transition speed/opacity/termination to permanently changetransition: objectthis.$Progress.setTransition(transition)
tempFailColorcause the fail color to change (temporarily)color: stringthis.$Progress.tempFailColor(color)
tempColorcause the progress color to change (temporarily)color: stringthis.$Progress.tempColor(color)
tempLocationcause the progress bar location to change (temporarily)location: stringthis.$Progress.tempLocation(location)
tempTransitioncause the progress bar location to change (temporarily)transition: objectthis.$Progress.tempTransition(transition)
revertColorcause the temporarily set progress color to revert back to it's previous colorN/Athis.$Progress.revertColor()
revertFailColorcause the temporarily set fail color to revert back to it's previous colorN/Athis.$Progress.revertFailColor()
revertTransitioncause the temporarily set transition to revert back to it's previous stateN/Athis.$Progress.revertTransition()
revertcause the temporarily set progress and/or fail color to their previous colorsN/Athis.$Progress.revert()
parseMetaparses progress meta datameta: objectthis.$Progress.parseMeta(meta)

Examples

加载数据(vue-resource)

<script>
  export default {
    methods: {
      test() {
        this.$Progress.start();
        this.$http
          .jsonp(
            "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz"
          )
          .then(
            (response) => {
              this.$Progress.finish();
            },
            (response) => {
              this.$Progress.fail();
            }
          );
      },
    },
  };
</script>

通过vue实例(eg axios拦截器)外部访问进度条

ma​​in.js

// main.js from Usage section

Vue.use(VueProgressBar, options);

export default new Vue({
  // export the Vue instance
  ...App,
}).$mount("#app");

api- axios.js

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

LICENSE

MIT License

Copyright (c) 2020 Alauddin Afif Cassandra

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

查看 更多 LICENSE

Vue 3 Progressbar

Previously, we would like to first thank for the developers who have been willing to help developers around the world, especially those who contribute to hilongjw/vue-progressbar. Here I continue from the previous development to provide support for vuejs version 3.

Table of Contents

Demo

Demo

Requirements

Installation

# npm
$ npm install @aacassandra/vue3-progressbar

Usage

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import VueProgressBar from "@aacassandra/vue3-progressbar";

const options = {
  color: "#bffaf3",
  failedColor: "#874b4b",
  thickness: "5px",
  transition: {
    speed: "0.2s",
    opacity: "0.6s",
    termination: 300,
  },
  autoRevert: true,
  location: "left",
  inverse: false,
};

createApp(App)
  .use(VueProgressBar, options)
  .use(router)
  .mount("#app");

Constructor Options

keydescriptiondefaultoptions
colorcolor of the progress bar'rgb(143, 255, 199)'RGB HEX HSL HSV VEC
failedColorcolor of the progress bar upon load fail'red'RGB, HEX, HSL, HSV, VEC
thicknessthickness of the progress bar'2px'px, em, pt, %, vh, vw
transitiontransition speed/opacity/termination of the progress bar{speed: '0.2s', opacity: '0.6s', termination: 300}speed, opacity, termination
autoRevertwill temporary color changes automatically revert upon completion or failtruetrue, false
locationchange the location of the progress bartopleft, right, top, bottom
positionchange the position of the progress barfixedrelative, absolute, fixed
inverseinverse the direction of the progress barfalsetrue, false
autoFinishallow the progress bar to finish automatically when it is close to 100%truetrue, false

Implementation

App.vue

<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>

vue-router

export default [
  {
    path: "/achievement",
    name: "achievement",
    component: "./components/Achievement.vue",
    meta: {
      progress: {
        func: [
          { call: "color", modifier: "temp", argument: "#ffb000" },
          { call: "fail", modifier: "temp", argument: "#6e0000" },
          { call: "location", modifier: "temp", argument: "top" },
          {
            call: "transition",
            modifier: "temp",
            argument: { speed: "1.5s", opacity: "0.6s", termination: 400 },
          },
        ],
      },
    },
  },
];

vue-router meta options

callmodifierargumentexample
colorset, tempstring{call: 'color', modifier: 'temp', argument: '#ffb000'}
failset, tempstring{call: 'fail', modifier: 'temp', argument: '#ffb000'}
locationset, tempstring{call: 'location', modifier: 'temp', argument: 'top'}
transitionset, tempobject{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}

Methods

functiondescriptionparametersexample
startstart the progress bar loadingN/Athis.$Progress.start()
finishfinish the progress bar loadingN/Athis.$Progress.finish()
failcause the progress bar to end and failN/Athis.$Progress.fail()
increaseincrease the progress bar by a certain %number: integerthis.$Progress.increase(number)
decreasedecrease the progress bar by a certain %number: integerthis.$Progress.decrease(number)
setset the progress bar %number: integerthis.$Progress.set(number)
setFailColorcause the fail color to permanently changecolor: stringthis.$Progress.setFailColor(color)
setColorcause the progress color to permanently changecolor: stringthis.$Progress.setColor(color)
setLocationcause the progress bar location to permanently changelocation: stringthis.$Progress.setLocation(location)
setTransitioncause the progress bar transition speed/opacity/termination to permanently changetransition: objectthis.$Progress.setTransition(transition)
tempFailColorcause the fail color to change (temporarily)color: stringthis.$Progress.tempFailColor(color)
tempColorcause the progress color to change (temporarily)color: stringthis.$Progress.tempColor(color)
tempLocationcause the progress bar location to change (temporarily)location: stringthis.$Progress.tempLocation(location)
tempTransitioncause the progress bar location to change (temporarily)transition: objectthis.$Progress.tempTransition(transition)
revertColorcause the temporarily set progress color to revert back to it's previous colorN/Athis.$Progress.revertColor()
revertFailColorcause the temporarily set fail color to revert back to it's previous colorN/Athis.$Progress.revertFailColor()
revertTransitioncause the temporarily set transition to revert back to it's previous stateN/Athis.$Progress.revertTransition()
revertcause the temporarily set progress and/or fail color to their previous colorsN/Athis.$Progress.revert()
parseMetaparses progress meta datameta: objectthis.$Progress.parseMeta(meta)

Examples

Loading Data (vue-resource)

<script>
  export default {
    methods: {
      test() {
        this.$Progress.start();
        this.$http
          .jsonp(
            "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz"
          )
          .then(
            (response) => {
              this.$Progress.finish();
            },
            (response) => {
              this.$Progress.fail();
            }
          );
      },
    },
  };
</script>

Accessing the progress bar externally through the vue instance (e.g. axios interceptors)

main.js

// main.js from Usage section

Vue.use(VueProgressBar, options);

export default new Vue({
  // export the Vue instance
  ...App,
}).$mount("#app");

api-axios.js

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

LICENSE

MIT License

Copyright (c) 2020 Alauddin Afif Cassandra

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

See more about LICENSE

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文