vue項目中進度條的實現

第一步：vue環境的准備，此處不再累贅
第二步：進入vue項目目錄，在vue項目終端(terminal)下載iview組件庫
下載命令：npm install iview --save
第三步：在src/main.js文件中引入iview
import iView from 'iview';
import 'iview/dist/styles/iview.css'; // 使用 CSS
Vue.use(iView);
第四步：在數據加載時間較長的代碼塊中添加進度條
例如：ajax異步請求中
methods: {
getData () {
this.$Loading.start();//開始加載數據時進度條開始
$.ajax({
url: '/api/someurl',
type: 'get',
success: () => {
this.$Loading.finish(); //數據加載完成時進度條成功結束
}
error: () => {
this.$Loading.error();//異步請求失敗時進度條異常結束
}
});
}
}
圖例：進度條成功加載時

第五步：設置進度條樣式
this.$Loading.config({
color: '#5cb85c', //color進度條顏色，默認為藍色
failedColor: '#f0ad4e', //進度條加載失敗時顏色，默認為紅色
height: 5 //進度條高度，默認為2
});