LoadingBar 加载进度条

概述

全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。

说明

LoadingBar 只会在全局创建一个,因此在任何位置调用的方法都会控制这同一个组件。主要使用场景是路由切换和Ajax,因为这两者都不能拿到精确的进度,LoadingBar 会模拟进度,当然也可以通过update()方法来传入一个精确的进度,比如在文件上传时会很有用,具体见API。

在路由中使用

  1. // 部分代码省略
  2. import ViewUI from 'view-design';
  3. Vue.use(ViewUI);
  4. router.beforeEach((to, from, next) => {
  5. ViewUI.LoadingBar.start();
  6. next();
  7. });
  8. router.afterEach(route => {
  9. ViewUI.LoadingBar.finish();
  10. });

在异步请求中使用

  1. <script>
  2. // 以jQuery的Ajax为例,部分代码省略
  3. import $ from 'jquery';
  4. export default {
  5. methods: {
  6. getData () {
  7. this.$Loading.start();
  8. $.ajax({
  9. url: '/api/someurl',
  10. type: 'get',
  11. success: () => {
  12. this.$Loading.finish();
  13. }
  14. error: () => {
  15. this.$Loading.error();
  16. }
  17. });
  18. }
  19. }
  20. }
  21. </script>

代码示例

LoadingBar 加载进度条 - 图1

基本用法

点击 Start 开始进度,点击 Finish 结束。在调用start()方法后,组件会自动模拟进度,当调用finish()error()时,补全进度并自动消失。

  1. <template>
  2. <Button @click="start">Start</Button>
  3. <Button @click="finish">Finish</Button>
  4. <Button @click="error">Error</Button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. start () {
  10. this.$Loading.start();
  11. },
  12. finish () {
  13. this.$Loading.finish();
  14. },
  15. error () {
  16. this.$Loading.error();
  17. }
  18. }
  19. }
  20. </script>

API

LoadingBar instance

通过直接调用以下方法来使用组件:

  • this.$Loading.start()
  • this.$Loading.finish()
  • this.$Loading.error()
  • this.$Loading.update(percent)以上方法隐式的创建及维护Vue组件。函数及参数说明如下:
函数名说明参数
start开始从 0 显示进度条,并自动加载进度
finish结束进度条,自动补全剩余进度
error以错误的类型结束进度条,自动补全剩余进度
update精确加载到指定的进度percent,指定的进度百分比

另外提供了全局配置和全局销毁的方法:

  • this.$Loading.config(options)
  • this.$Loading.destroy()
this.$Loading.config({
    color: '#5cb85c',
    failedColor: '#f0ad4e',
    height: 5
});
属性说明类型默认值
color进度条的颜色,默认为 iView 主色Stringprimary
failedColor失败时的进度条颜色,默认为 iView 主色Stringerror
height进度条高度,单位 pxNumber2
duration 3.4.0隐藏时的持续时间,单位 msNumber800