vue 自定义Loading组件配合axios中使用

小马的马~

于 2022-01-05 15:39:49 发布

阅读量627

点赞数

文章标签： vue.js css3 javascript

本文链接：https://blog.youkuaiyun.com/halouKti/article/details/122324691

版权

本文档介绍了如何在Vue项目中创建一个自定义的Loading组件，并将其与Axios请求库配合使用。首先，在components目录下创建Loading文件夹，包含loading.vue组件。接着，创建index.js文件来导入并导出Loading组件。然后，在main.js中全局注册并引入Loading组件。最后，详细说明了如何在Axios请求中触发和关闭这个Loading组件，以实现数据加载时的视觉反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在components中创建Loading文件夹，然后在Loading中新建loading.vue文件

<template>

   <div v-if="loading" class="shade"> 
    <div class="sk-wave">
        <div class="sk-rect sk-rect1"></div>
        <div class="sk-rect sk-rect2"></div>
        <div class="sk-rect sk-rect3"></div>
        <div class="sk-rect sk-rect4"></div>
        <div class="sk-rect sk-rect5"></div>
      </div>
  </div>

 
</template>
<script>
export default {
   
  name: "loading",
  props: {
   
    loading: {
   
      type: Boolean,
      default: false,
    },
    LoadingText: {
   
      type: String,
      default: "服务正在加载...",
      //  default: () => []
    },
  },
  data() {
   
    return {
   };
  },
};
</script>
<style lang="scss"  scoped>
   html, body

最低0.47元/天解锁文章