loading加载动画

原创于 2023-05-08 14:59:29 发布 · 210 阅读

本内容遵循CC 4.0 BY-SA版权协议

该文章展示了如何在Vue中创建一个名为`loading`的组件，该组件包含一个加载动画。在`loading.vue`中定义了模板、样式和数据，并在`created`生命周期钩子中监听bus事件来控制加载状态。然后在`App.vue`中引入，并在`main.js`中全局注册了一个Vue实例的bus属性，以便在不同组件间通信和触发加载显示。

loading.vue

//创建loading.vue
<template>
  <div class="loadingBox" v-show="loading" style=" background-color: rgba(0, 0, 0, 0.5)">
    <div class="sun-loading"></div>
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {
      loading: false,
    };
  },
  created() {
    var that = this;
    this.bus.$on("loading", function (data) {
      that.loading = !!data;
    });
  },
};
</script>
<style lang="less" scoped>
.sun-loading {
  width: 45px;
  height: 45px;
  display: block;
  animation: sunLoading 1s steps(12, end) infinite;
  background: transparent url('http://www.sucaijishi.com/uploadfile/2013/0527/20130527034921885.gif?imageMogr2/format/jpg/blur/1x0/quality/60');
  background-size: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>

App.vue引入