jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 > 布局 >

vue轻量级进度条

官方网址:http:// 下载次数:
插件描述

Requirements

  • Vue.js 1.x or 2.x

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

keydescriptiondefaultoptions
colorcolor of the progress bar'rgb(143, 255, 199)'RGB HEX HSLHSV VEC
failedColorcolor of the progress bar upon load fail'red'RGBHEXHSLHSVVEC
thicknessthickness of the progress bar'2px'pxempt%vhvw
transitiontransition speed/opacity/termination of the progress bar{speed: '0.2s', opacity: '0.6s', termination: 300}speedopacitytermination
autoRevertwill temporary color changes automatically revert upon completion or failtruetruefalse
locationchange the location of the progress bartopleftrighttopbottom
positionchange the position of the progress barfixedrelativeabsolutefixed
inverseinverse the direction of the progress barfalsetruefalse
autoFinishallow the progress bar to finish automatically when it is close to 100%falsetruefalse

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
colorsettempstring{call: 'color', modifier: 'temp', argument: '#ffb000'}
failsettempstring{call: 'fail', modifier: 'temp', argument: '#ffb000'}
locationsettempstring{call: 'location', modifier: 'temp', argument: 'top'}
transitionsettempobject{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


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐素材