概述

1 .全局创建一个显示页面加载，异步请求，文件上传等的加载进度条
2 .全局创建一个，因此任何位置调用这个都是控制这一个组件，主要使用场景是路由切换和ajax，因为两者都不能拿到精确的进度，loadingBar只会模拟进度
3 .感觉比转圈圈的loading加载图高级一点
4 .还有一种就是骨架屏幕
5 .通过观察发现他和notice那些组件是不一样，那个是每使用一次都会新加载一个组件，然后渲染页面，而loading组件是非常常见的，所以我们可以在一开始就站好位置，然后爆露出一些操作方法，之后就是使用

this.$Loading.start()
//开始从0显示进度条，并自动加载进度

this.$Loading.finish()
//结束进度条，自动补全剩余进度

this.$Loading.error()
//以错误的类型结束进度条，自动补全剩余进度条

this.$Loading.update(percent)
//紧缺加载到指定的进度

this.$Loading.config(options)
//提供全局配置和全局销毁的方法，这个还是props传进去算了

this.$Loading.destory()
//全局销毁方法

这样的方法来全局调用组件，很简单。
6 .这样要支持在路由跳转和ajax请求中，在他的钩子函数中使用

import ViewUI from 'view-design';
Vue.use(ViewUI);

router.beforeEach((to, from, next) => {
ViewUI.LoadingBar.start();
next();
});

router.afterEach(route => {
ViewUI.LoadingBar.finish();
});

##代码
1 .其实组件的书写是和正常的一样的，关键是使用方式上面
2 .想实现的效果就是使用的时候直接引入<LoadingBar />
3 .调用的时候

import LoadingBar from '@/components/base/loading/loading.js'
Vue.prototype.$load=LoadingBar
//然后直接调用
//想实现的方法就是在组件内调用显示。然后用一种方法把组件LoadingBar methods里面的方法都传出来，这样可以全局操作这个方法，但是发现简单的通过一个另一个组件做一下转换是不行的。this死活返回的不是全局的this，所以是无法操作里面的data。也就是在组件外面调用组件里面的方法，组件里面调用组件的方法，两个的this是不同的，前面那个是方法里面的，后面那个整个组件的this是整个vue实例

4 .解决方法

1 .所有方法使用的时候都加一个methods.start()这样使用起来相当不优雅。这样竟然还是不行
2 .还是把方法分离出来，借助vuex来操作，loadingBar里面只是显示数据，把所有的方法都分离出来。直接用外面的方法操作数据，来让数据驱动组件。其实就是操作一些vuex数据
3 .如果这个比较麻烦的话，其实可以把数据托管在根组件的data里面，这样直接操作根组件的data也很方便
4 .

##如何在外面使用vuex
1 .直接引入之前生成的store对象，里面有方法，直接从这个里面调用方法就好，不用使用mapMutations这个拆分的函数

import loadStore from '../../../vuex'
console.log(loadStore)
export default{
start(){
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(true)
}
}
//比如这样的,这个主要是module模块化的时候比较找的麻烦，不过可以更加的加深理解

5 .

##感觉就是不在讨论新的玩法，而是拿着原来的东西就和打牌一样，不停的排列组合，都是再做一些无畏的操作

##源码

import loadStore from '../../../vuex'
export default{
start(){
let width=loadStore.state.loading.width
console.log(width)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(true)
let timeer=setInterval(() => {
if(width<=95){
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(width++)
}else{
clearInterval(timeer)
}
}, 10);
},
update(value){
let width=loadStore.state.loading.width
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(true)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_STATUS(1)
let timeer=setInterval(() => {
if(width<value){
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(width++)
}else if(width>value){
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(width--)
}else if(width==value){
clearInterval(timeer)
}
}, 10);
},
successFinish(){
let width=loadStore.state.loading.width
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(true)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_STATUS(1)
let timeer=setInterval(() => {
if(width<101){
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(width++)
}
else{
clearInterval(timeer)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(false)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(0)
}
}, 100);
},
errorFinish(){
let width=loadStore.state.loading.width
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(true)
let timeer=setInterval(() => {
if(width<101){
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(width++)
}
else{
clearInterval(timeer)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_ISSHOW(false)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_WIDTH(0)
}
}, 10)
loadStore._modules.root._rawModule.modules.loading.mutations.SET_STATUS(0)
}
}
//可以全局调用的，暴露出来的接口

//main.js操作
import LoadingBar from '@/components/base/loading/loading.js'
Vue.prototype.$load=LoadingBar
//这里只是把方法绑定上去

//loadingBar 组件
<template>
<div class="loadingBar" v-show="isShow" :style="computedStyle"></div>
</template>
<script>
import {mapState}from 'vuex'
export default {
data:function(){
return {
// 1代表是成功，0代表是失败
bgColor:''
}
},
computed:{
...mapState({
isShow:state=>state.loading.isShow,
width:state=>state.loading.width,
status:state=>state.loading.status,
}),
computedStyle(){
if(this.status==1){
this.bgColor='#409EFF'
}else if(this.status==0){
this.bgColor='#F56C6C'
}
return {
width:${this.width}%,
background:this.bgColor
}
}
}
}
</script>
<style lang="less" src="./loadingBar.less"></style>
//使用代码
handleStart(){
this.$load.start()

    },
    handleSuccessFinish(){
        this.$load.successFinish()
    },
    handleErrorFinish(){
        this.$load.errorFinish()            
    },
    handleUpdate(){
        this.$load.update(1)
    },

##改进
1 .前进动画需要注意一下效果，缓动效果
2 .滚动条出现和消失的动画，需要加transition缓动函数
3 .