在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
})