vue 自定义加载动画

Vue 自定义加载动画可以通过以下步骤实现：

1. 创建一个全局的加载组件 Loading.vue，该组件可以包含任何你想要展示的加载动画，比如旋转动画、进度条等等。

2. 在 main.js 中注册全局组件：

   import Loading from './components/Loading.vue'

   Vue.component('Loading', Loading)

3. 在需要展示加载动画的组件中，使用 v-if 或者 v-show 指令来根据加载状态控制 Loading 组件的显示和隐藏。

4. 在组件中定义一个 isLoading 的 data 属性，用来控制 Loading 组件的显示和隐藏。

   data() {
     return {
       isLoading: false
     }
   }

5. 在组件的 mounted 钩子函数中，设置 isLoading 为 true，表示开始加载。在数据加载完成后，再将 isLoading 设置为 false，表示加载完成。

   mounted() {
     this.isLoading = true
     // 发送数据请求
     fetchData().then(() => {
       this.isLoading = false
     })
   }

6. 在模板中使用 Loading 组件，并根据 isLoading 的值来控制其显示和隐藏。

   <template>
     <div>
       <loading v-if="isLoading"></loading>
       // 页面内容
     </div>
   </template>

以上就是自定义加载动画的基本步骤，你可以根据自己的需求来设计 Loading 组件的样式和动画。