LoadingBar 加載進度條

概述

全局創建一個顯示頁面加載、異步請求、文件上傳等的加載進度條。

說明

LoadingBar 只會在全局創建一個，因此在任何位置調用的方法都會控制這同一個組件。主要使用場景是路由切換和Ajax，因為這兩者都不能拿到精確的進度，LoadingBar 會模擬進度，當然也可以通過update()方法來傳入一個精確的進度，比如在文件上傳時會很有用，具體見API。

在路由中使用

// 部分代碼省略

import iView from 'iview';

Vue.use(iView);

router.beforeEach((to, from, next) => {

iView.LoadingBar.start();

next();

});

router.afterEach(route => {

iView.LoadingBar.finish();

});

在異步請求中使用

// 以jQuery的Ajax為例，部分代碼省略

import $ from 'jquery';

export default {

methods: {

getData () {

this.$Loading.start();

$.ajax({

url: '/api/someurl',

type: 'get',

success: () => {

this.$Loading.finish();

}

error: () => {

this.$Loading.error();

}

});

}

}

}

代碼示例

Start

Finish

Error

基本用法

點擊 Start 開始進度，點擊 Finish 結束。在調用start()方法后，組件會自動模擬進度，當調用finish()或error()時，補全進度并自動消失。

Start

Finish

Error

export default {

methods: {

start () {

this.$Loading.start();

},

finish () {

this.$Loading.finish();

},

error () {

this.$Loading.error();

}

}

}

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

String

primary

failedColor

失敗時的進度條顏色，默認為 iView 主色

String

error

height

進度條高度，單位 px

Number

2

總結

以上是生活随笔為你收集整理的iview地区加载_LoadingBar 加载进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。