Vue3 实现全局 Loading 指令，优雅提升用户体验

2024-02-15 12:34:37

前言

在 Web 应用程序中，用户界面（UI）的响应能力对于提升用户体验至关重要。当应用程序正在加载数据或处理请求时，显示一个 Loading 指令可以有效地向用户传达应用程序的状态，避免令人困惑或沮丧的等待体验。

基于 Vue3 的全局 Loading 指令实现

本文将指导你如何使用 Vue3 实现一个全局 Loading 指令，它可以轻松地应用于任何组件，并在需要时显示或隐藏 Loading 效果。

1. 安装依赖项

npm install vue-loading-overlay --save

2. 创建指令

在 /directives/loading.js 文件中，创建 Loading 指令：

import Vue from 'vue'
import Loading from 'vue-loading-overlay'

Vue.directive('loading', {
  bind(el, binding) {
    const vm = binding.instance
    const overlay = vm.$loading.show({
      canCancel: false,
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    })
    el.__vueLoadingOverlay = overlay
  },
  unbind(el) {
    if (el.__vueLoadingOverlay) {
      el.__vueLoadingOverlay.hide()
    }
  }
})

3. 在组件中使用指令

在需要显示 Loading 指令的组件中，使用 v-loading 指令：

<template>
  <div v-loading>
    ...
  </div>
</template>

4. 自定义 Loading 外观

可以通过自定义 vue-loading-overlay 组件的属性来调整 Loading 的外观，例如：

<template>
  <div v-loading="loadingConfig">
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingConfig: {
        color: 'red',
        backgroundColor: 'white',
        width: '100px',
        height: '100px'
      }
    }
  }
}
</script>