vue.js实现loading

实现全局Loading组件

在Vue.js中可以通过自定义组件实现全局Loading效果。创建一个独立的Loading组件，通过Vue的插件机制全局注册。

创建Loading组件

<template>
  <div v-if="visible" class="loading-overlay">
    <div class="loading-spinner"></div>
    <div class="loading-text">{{ text || 'Loading...' }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      text: ''
    }
  },
  methods: {
    show(text) {
      this.text = text
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

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

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

.loading-text {
  color: white;
  margin-top: 10px;
}

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

注册为Vue插件

将Loading组件注册为Vue插件，方便全局调用。

// loading-plugin.js
import Vue from 'vue'
import LoadingComponent from './Loading.vue'

const LoadingPlugin = {
  install(Vue) {
    const LoadingConstructor = Vue.extend(LoadingComponent)
    const loadingInstance = new LoadingConstructor()

    loadingInstance.$mount(document.createElement('div'))
    document.body.appendChild(loadingInstance.$el)

    Vue.prototype.$loading = {
      show(text) {
        loadingInstance.show(text)
      },
      hide() {
        loadingInstance.hide()
      }
    }
  }
}

Vue.use(LoadingPlugin)

在项目中使用

在main.js中引入插件后，可以在任何组件中调用。

// 显示loading
this.$loading.show('加载中...')

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

结合axios拦截器实现自动Loading

可以在请求拦截器中自动显示Loading，响应拦截器中隐藏。

import axios from 'axios'

// 请求拦截器
axios.interceptors.request.use(config => {
  this.$loading.show('请求中...')
  return config
}, error => {
  this.$loading.hide()
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(response => {
  this.$loading.hide()
  return response
}, error => {
  this.$loading.hide()
  return Promise.reject(error)
})

使用第三方库实现Loading

Vue生态中有许多成熟的Loading组件库，如Element UI、Vuetify等。

Element UI示例

import { Loading } from 'element-ui'

// 开启loading
let loadingInstance = Loading.service({
  lock: true,
  text: '加载中',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
})

// 关闭loading
loadingInstance.close()

局部Loading实现

在单个组件内部实现Loading效果，适用于局部内容加载。

<template>
  <div>
    <div v-if="loading" class="local-loading">加载中...</div>
    <div v-else>内容已加载</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>