vue实现通用页面加载

Vue 实现通用页面加载的方法

在 Vue 中实现通用页面加载功能，可以通过多种方式实现，包括使用全局加载状态、自定义指令或封装组件。以下是几种常见的方法：

使用全局状态管理

通过 Vuex 或 Pinia 管理全局加载状态，在需要加载的页面或组件中监听状态变化。

// store.js (Vuex 示例)
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, payload) {
      state.isLoading = payload
    }
  }
})

// 在组件中使用
<template>
  <div>
    <div v-if="$store.state.isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    <!-- 页面内容 -->
  </div>
</template>

封装可复用的加载组件

创建一个独立的加载组件，通过 props 控制显示与隐藏。

// Loading.vue
<template>
  <div v-if="isLoading" class="loading-overlay">
    <div class="loading-content">
      <div class="spinner"></div>
      <p>{{ message }}</p>
    </div>
  </div>
</template>

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

// 在父组件中使用
<template>
  <div>
    <Loading :isLoading="isLoading" />
    <!-- 页面内容 -->
  </div>
</template>

使用自定义指令

通过自定义指令实现局部加载效果，适用于按钮等元素的加载状态。

// main.js
Vue.directive('loading', {
  bind(el, binding) {
    if (binding.value) {
      const loadingEl = document.createElement('div')
      loadingEl.className = 'loading-indicator'
      el.appendChild(loadingEl)
      el.style.position = 'relative'
    }
  },
  update(el, binding) {
    const loadingEl = el.querySelector('.loading-indicator')
    if (binding.value) {
      if (!loadingEl) {
        const newLoadingEl = document.createElement('div')
        newLoadingEl.className = 'loading-indicator'
        el.appendChild(newLoadingEl)
        el.style.position = 'relative'
      }
    } else {
      if (loadingEl) {
        el.removeChild(loadingEl)
      }
    }
  }
})

// 使用方式
<button v-loading="isLoading">Submit</button>

结合路由的全局加载

在路由切换时显示加载状态，提升用户体验。

// main.js
router.beforeEach((to, from, next) => {
  store.commit('setLoading', true)
  next()
})

router.afterEach(() => {
  setTimeout(() => {
    store.commit('setLoading', false)
  }, 500)
})

样式建议

为加载状态添加适当的样式，确保视觉体验一致。

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

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

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

通过以上方法，可以根据项目需求灵活实现页面加载功能，提升用户体验。