VUE中封装一个全局的loading组件

最新推荐文章于 2024-08-24 20:15:11 发布

置顶

KBK2020

最新推荐文章于 2024-08-24 20:15:11 发布

阅读量2.6k

点赞数 4

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/KBK2020/article/details/107520426

版权

本文介绍了如何在Vue项目中封装一个全局的loading组件。通过创建一个loading组件，并将其注册为全局组件，配合Vuex管理状态，实现接口请求时的加载效果。在axios的拦截器中控制loading的显示和隐藏，达到全局控制的目的。

摘要由CSDN通过智能技术生成

KBK：其实刚刚开始的话，就没有想到要写loading组件，在做项目的时候，等待后台接口渲染的时候样式有点太丑，就想到做一个loading效果，其实作为前端，也可以使用vant element-ui 等，里面就有好多loading样式，但是我又有点太懒，懒得去一个一个的页面进行loading效果，就想到做一个全局的。。。话不多说，干货来了，嘻嘻

1.创建一个loading.vue , 里面的内容如下：
（img 是从网上扒拉下来的，你也可以选择自己喜欢的图片哦）

<template>
  <div class="loading">
    <img
      width="150"
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594987125387&di=bf0899070555ffe803df2da2d11f3025&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3458475739%2C295617657%26fm%3D214%26gp%3D0.jpg"
      alt
    />
  </div>
</template>

<script>
export default {
   
  name: "",
  data(