vue实现简单loading组件

最新推荐文章于 2024-08-26 10:57:03 发布

锦鲤(⑉°з°)--♡

最新推荐文章于 2024-08-26 10:57:03 发布

阅读量608

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_40036240/article/details/99698050

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在vue项目中，一般在请求后台接口时，都有时间消耗，尤其是对web项目，更有网络时间消耗，这个时候请求响应数据可能有所影响，对用户的体验不是很好，所以常常会使用 loading 过渡数据的加载时间来提高用户体验。那么在vue项目中是如何实现自定义的loading组件的呢？
既然是自定义loading组件，所以需要加载图标动画使用的图片是可以在 https://loading.io/spinner/ 网站找的下载并保存到了我的项目静态资源路径下 src -> assets -> img

在src->components文件中创建loading.vue组件，相关目录结构如下：
在loading.vue在添加loading组件模板和加载动画的路径以及样式

<template>
  <div class="loading"></div>
</template>
<style scoped>
  .loading {
    position: fixed;
    left: 0;
    top: 0;
    background: url('~@/assets/loading-ball.svg') center center no-repeat rgba(0, 0, 0, 0);
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }
</style>

在需要的地方使用loading组件：
通过自定义一个变量 isLoading 初始化为 true ，在数据请求成功之后将变量改为 false ，在 template 中通过变量来控制是否显示隐藏，使用 vue 自带的过渡效果增加用户体验，首先在需要在全局的 css 中加入过渡需要的样式

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

在相关的组件使用该loading组件：

<template>
  <div>
    <article>
      <transition name="fade">
        <loading v-if="isLoading"></loading>
      </transition>
    </article>
  </div>
</template>
<script type="text/javascript">
  import Loading from '@/components/loading'
  export default {
    name: 'app-view',
    data() {
      return {
        isLoading: true,
        show: {}
      }
    },
    components: {
      Loading
    },
    created: function() {
      this.isLoading = false
    },
    methods: {
      getShow(show) {
        this.show = show
      }
    }
  }
</script>