vue-progressbar

A lightweight progress bar for vue

  • 所有者: hilongjw/vue-progressbar
  • 平台:
  • 許可證: MIT License
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

vue-progressbar

Table of Contents

Demo

Demo

Requirements

Installation

# npm
$ npm install vue-progressbar

#yarn
$ yarn add vue-progressbar

Usage

main.js

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'

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

Vue.use(VueProgressBar, options)

new Vue({
  ...App
}).$mount('#app')


Constructor Options, key, description, default, options, :---, ---, ---, ---, color, color of the progress bar, 'rgb(143, 255, 199)', RGB HEX HSL HSV VEC, failedColor, color of the progress bar upon load fail, 'red', RGB, HEX, HSL, HSV, VEC, thickness, thickness of the progress bar, '2px', px, em, pt, %, vh, vw, transition, transition speed/opacity/termination of the progress bar, {speed: '0.2s', opacity: '0.6s', termination: 300}, speed, opacity, termination, autoRevert, will temporary color changes automatically revert upon completion or fail, true, true, false, location, change the location of the progress bar, top, left, right, top, bottom, position, change the position of the progress bar, fixed, relative, absolute, fixed, inverse, inverse the direction of the progress bar, false, true, false, autoFinish, allow the progress bar to finish automatically when it is close to 100%, true, true, 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, call, modifier, argument, example, :---, ---, ---, ---, color, set, temp, string, {call: 'color', modifier: 'temp', argument: '#ffb000'}, fail, set, temp, string, {call: 'fail', modifier: 'temp', argument: '#ffb000'}, location, set, temp, string, {call: 'location', modifier: 'temp', argument: 'top'}, transition, set, temp, object, {call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}, # Methods, function, description, parameters, example, :---, ---, ---, ---, start, start the progress bar loading, N/A, this.$Progress.start(), finish, finish the progress bar loading, N/A, this.$Progress.finish(), fail, cause the progress bar to end and fail, N/A, this.$Progress.fail(), increase, increase the progress bar by a certain %, number: integer, this.$Progress.increase(number), decrease, decrease the progress bar by a certain %, number: integer, this.$Progress.decrease(number), set, set the progress bar %, number: integer, this.$Progress.set(number), setFailColor, cause the fail color to permanently change, color: string, this.$Progress.setFailColor(color), setColor, cause the progress color to permanently change, color: string, this.$Progress.setColor(color), setLocation, cause the progress bar location to permanently change, location: string, this.$Progress.setLocation(location), setTransition, cause the progress bar transition speed/opacity/termination to permanently change, transition: object, this.$Progress.setTransition(transition), tempFailColor, cause the fail color to change (temporarily), color: string, this.$Progress.tempFailColor(color), tempColor, cause the progress color to change (temporarily), color: string, this.$Progress.tempColor(color), tempLocation, cause the progress bar location to change (temporarily), location: string, this.$Progress.tempLocation(location), tempTransition, cause the progress bar location to change (temporarily), transition: object, this.$Progress.tempTransition(transition), revertColor, cause the temporarily set progress color to revert back to it's previous color, N/A, this.$Progress.revertColor(), revertFailColor, cause the temporarily set fail color to revert back to it's previous color, N/A, this.$Progress.revertFailColor(), revertTransition, cause the temporarily set transition to revert back to it's previous state, N/A, this.$Progress.revertTransition(), revert, cause the temporarily set progress and/or fail color to their previous colors, N/A, this.$Progress.revert(), parseMeta, parses progress meta data, meta: object, this.$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

The MIT License

主要指標

概覽
名稱與所有者hilongjw/vue-progressbar
主編程語言JavaScript
編程語言Vue (語言數: 2)
平台
許可證MIT License
所有者活动
創建於2016-01-28 05:57:12
推送於2024-03-10 04:29:15
最后一次提交2024-03-10 12:29:15
發布數0
用户参与
星數1.5k
關注者數27
派生數160
提交數95
已啟用問題?
問題數70
打開的問題數42
拉請求數20
打開的拉請求數3
關閉的拉請求數10
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?