LoadingBar 加載進(jìn)度條

概述

全局創(chuàng)建一個(gè)顯示頁(yè)面加載、異步請(qǐng)求、文件上傳等的加載進(jìn)度條。

說(shuō)明

LoadingBar 只會(huì)在全局創(chuàng)建一個(gè)，因此在任何位置調(diào)用的方法都會(huì)控制這同一個(gè)組件。主要使用場(chǎng)景是路由切換和Ajax，因?yàn)檫@兩者都不能拿到精確的進(jìn)度，LoadingBar 會(huì)模擬進(jìn)度，當(dāng)然也可以通過(guò)update()方法來(lái)傳入一個(gè)精確的進(jìn)度，比如在文件上傳時(shí)會(huì)很有用，具體見(jiàn)API。

在路由中使用

// 部分代碼省略

import iView from 'iview';

Vue.use(iView);

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

iView.LoadingBar.start();

next();

});

router.afterEach(route => {

iView.LoadingBar.finish();

});

在異步請(qǐng)求中使用

// 以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

基本用法

點(diǎn)擊 Start 開(kāi)始進(jìn)度，點(diǎn)擊 Finish 結(jié)束。在調(diào)用start()方法后，組件會(huì)自動(dòng)模擬進(jìn)度，當(dāng)調(diào)用finish()或error()時(shí)，補(bǔ)全進(jìn)度并自動(dòng)消失。

Start

Finish

Error

export default {

methods: {

start () {

this.$Loading.start();

},

finish () {

this.$Loading.finish();

},

error () {

this.$Loading.error();

}

}

}

API

LoadingBar instance

通過(guò)直接調(diào)用以下方法來(lái)使用組件：

this.$Loading.start()

this.$Loading.finish()

this.$Loading.error()

this.$Loading.update(percent)

以上方法隱式的創(chuàng)建及維護(hù)Vue組件。函數(shù)及參數(shù)說(shuō)明如下：

函數(shù)名

說(shuō)明

參數(shù)

start

開(kāi)始從 0 顯示進(jìn)度條，并自動(dòng)加載進(jìn)度

無(wú)

finish

結(jié)束進(jìn)度條，自動(dòng)補(bǔ)全剩余進(jìn)度

無(wú)

error

以錯(cuò)誤的類(lèi)型結(jié)束進(jìn)度條，自動(dòng)補(bǔ)全剩余進(jìn)度

無(wú)

update

精確加載到指定的進(jìn)度

percent，指定的進(jìn)度百分比

另外提供了全局配置和全局銷(xiāo)毀的方法：

this.$Loading.config(options)

this.$Loading.destroy()

this.$Loading.config({

color: '#5cb85c',

failedColor: '#f0ad4e',

height: 5

});

屬性

說(shuō)明

類(lèi)型

默認(rèn)值

color

進(jìn)度條的顏色，默認(rèn)為 iView 主色

String

primary

failedColor

失敗時(shí)的進(jìn)度條顏色，默認(rèn)為 iView 主色

String

error

height

進(jìn)度條高度，單位 px

Number

2

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。