在vue项目新增loading

ElementUI加载动画实践

最新推荐文章于 2025-06-27 16:42:27 发布

原创最新推荐文章于 2025-06-27 16:42:27 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #loading #elementui

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何在ElementUI项目中实现自定义加载动画，包括使用transition标签、加载条样式设计、通过Vuex管理和$EventBus事件总线更新加载状态的具体步骤。

有时候在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
})