vue实现loading组件

实现基础Loading组件

创建一个简单的Vue组件，通过v-show或v-if控制显示状态。组件可以包含旋转动画或进度条等视觉元素。

<template>
  <div class="loading" v-show="isLoading">
    <div class="spinner"></div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: 'Loading...'
    }
  }
}
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

全局注册与使用

将Loading组件注册为全局组件，便于在任何地方调用。可以通过Vue.prototype或provide/inject实现全局控制。

// main.js
import Vue from 'vue'
import Loading from './components/Loading.vue'

Vue.component('Loading', Loading)

// 或者添加全局方法
Vue.prototype.$loading = {
  show() {
    // 显示逻辑
  },
  hide() {
    // 隐藏逻辑
  }
}

结合axios拦截器

在请求拦截器中显示Loading，响应拦截器中隐藏，实现自动化的请求状态提示。

import axios from 'axios'

const instance = axios.create()

let loadingCount = 0

instance.interceptors.request.use(config => {
  loadingCount++
  if (loadingCount === 1) {
    store.commit('setLoading', true)
  }
  return config
})

instance.interceptors.response.use(
  response => {
    loadingCount--
    if (loadingCount === 0) {
      store.commit('setLoading', false)
    }
    return response
  },
  error => {
    loadingCount--
    if (loadingCount === 0) {
      store.commit('setLoading', false)
    }
    return Promise.reject(error)
  }
)

高级功能实现

添加进度条效果、自定义动画、延迟显示等功能，提升用户体验。

<template>
  <div class="loading-progress" v-show="isLoading">
    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      interval: null
    }
  },
  props: {
    isLoading: Boolean
  },
  watch: {
    isLoading(newVal) {
      if (newVal) {
        this.startProgress()
      } else {
        this.finishProgress()
      }
    }
  },
  methods: {
    startProgress() {
      this.progress = 0
      this.interval = setInterval(() => {
        this.progress = Math.min(this.progress + 10, 90)
      }, 300)
    },
    finishProgress() {
      clearInterval(this.interval)
      this.progress = 100
      setTimeout(() => {
        this.progress = 0
      }, 300)
    }
  }
}
</script>

第三方库集成

使用现成的Vue加载组件库如vue-loading-overlay、vue-simple-spinner等，快速实现专业效果。

// 安装vue-loading-overlay
npm install vue-loading-overlay

// 使用示例
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

Vue.use(Loading)

// 在组件中使用
this.$loading.show({
  canCancel: true,
  onCancel: this.onCancel
})

// 隐藏加载
this.$loading.hide()