在vue项目新增loading

有时候在elementui项目中一个Loading并不满足需求。所以要额外增加其他的Loading来展示

1 在App.vue中是增加一个transition标签用来过渡

<transition name="load">
    <div v-if="loadShow" class="load">
        <img src="/static/images/load.png"/>
    </div>
</transition>

name是自己命名的class的名称，用来写动画样式，如果不写name  则默认是v

对应样式名称如下：写样式的时候，v的地方要改fade.

如：

.load-enter-active, .load-leave-active {

  transition: opacity .5s;

}

2 加载条样式

.load{
  	position: fixed;
  	z-index: 9000;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	width: 100%;
  	height: 100%;
  	background: rgba(0,0,0,0.5);
  }
  .load img{
  	width: 50px;
  	height: 50px;
  	left: 50%;
  	top: 50%;
  	position: absolute;
  	margin-top: -50px;
  	margin-left: -50px;
  	animation: circle 1.5s infinite;
  }
  @keyframes circle{
  	from{
  		transform: rotate(0);
  	}
  	to{
  		transform: rotate(360deg);
  	}
  }
  .load-enter-active, .load-leave-active{
  	transition: opacity .5;
  }

3 状态设置

使用vuex来对loadShow状态进行管理， 更改loadShow的值在App.vue无法检测到状态的变更，需要setInterval()不断获取vuex中loadShow的状态。

所以这里使用$EventBus 事件总线 在main.js中初始化

Vue.prototype.$EventBus = new Vue();

在使用到的地方发送事件

this.$EventBus.$emit('loadShow',true)

在App.vue中接收事件

this.$EventBus.$on('loadShow', (flag)=>{
    this.loadShow= flag
})