iview+vue 加载进度条

效果：浏览器最上方出现一个进度条。

 

 

main.js

import Vue from 'vue'
import ViewUI from 'view-design';
import router from './router/index.js'

Vue.use(ViewUI);

//等待进度条
router.beforeEach((to, from, next) => {
    ViewUI.LoadingBar.start();
    next();
});
router.afterEach(route => {
    ViewUI.LoadingBar.finish();
});

具体使用的方法里使用

handleSubmit() {
　　//开始进度条
　　this.$Loading.start();
　　　　testFuncton(parm).then(res => {
　　　　　　if (res.success == true) {
　　　　　　　　//关闭进度条
　　　　　　　　this.$Loading.finish();
　　　　　　　　this.$Message.success('保存成功!');
　　　　　　} else {
　　　　　　　　//方法出错进度条异常
　　　　　　　　this.$Loading.error();
　　　　　　　　this.$Message.error(res.message);
　　　　　　}

　　　　}).catch(error => {
              this.$Message.success('保存失败，请联系管理员!');
　　　　});
},

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！