1.0.0 • Published 7 years ago
vue2-progress v1.0.0
Vue.use(VueProgress); // 注册实例
let instance = this.$vueProgress(); // 初始化vueProgress
instance.start(); // 开始显示
setTimeout(function () {
instance.done(); // 结束
}, 3000);
description
这是一种类似于Google, YouTube的ajax加载进度条插件,基于vue 2.0版本之上,可以自定义插件样式和效果。
Installation
Yarn
$ yarn add vue-progress
NPM
$ npm install vue-progress --save
Usage
1. 注册
import Vue from 'vue'
import VueProgress from 'vue-progress'
Vue.use(VueProgress)
2. 快速使用
let instance = this.$vueProgress(); // 初始化vueProgress
instance.start(); // 开始显示
instance.done(); // 结束
3. 设置初始进度
instance.set(0.0); // Sorta same as .start()
instance.set(0.4);
instance.set(1.0); // Sorta same as .done()
Configuration
初始化vueProgress 的时候,可以选择性传入参数进行控制
color
设置进度条颜色,默认是 blue
this.$vueProgress({color: '#ddd'});
speed
控制进度条速度,默认是 5
this.$vueProgress({speed: 10});
percentNum
进度条每一步的跨度,取值0-1之前的小数。默认是0-1之间的随机数
this.$vueProgress({percentNum: 0.1});
easing
右侧loading图标动画的贝塞尔曲线,默认 'linear'
this.$vueProgress({easing: 'ease'});
showSpinner
是否展示右侧loading动画,默认 true
this.$vueProgress({showSpinner: false});
Examples
To run the examples; clone this repository & run npm install
in the root directory, and then run npm run dev
. Head to http://localhost:8080.
1.0.0
7 years ago