el-loading详解

el-loading 是 Element Plus 框架中的一个组件，用于显示加载状态。它可以应用于整个页面、某个组件或某个特定元素上。el-loading 提供了多种配置选项，以便根据需求定制加载提示的样式和行为。

一。属性详解

1. fullscreen:

   • 用途: 是否显示全屏遮罩。
   • 默认值: false

2. lock:

   • 用途: 是否锁定屏幕滚动。
   • 默认值: false

3. text:

   • 用途: 显示的加载文案。
   • 默认值: Loading

4. spinner:

   • 用途: 自定义加载图标类名。
   • 默认值: el-icon-loading

5. background:

   • 用途: 自定义遮罩背景色。
   • 默认值: rgba(0, 0, 0, 0.7)

6. customClass:

   • 用途: 自定义加载遮罩的类名。

7. target:

   • 用途: 指定加载遮罩的目标元素。

8. body:

   • 用途: 是否将加载遮罩插入到 body 上。
   • 默认值: false

9. observer:

   • 用途: 是否监听 DOM 变化。
   • 默认值: false

10. lazy:

    • 用途: 是否延迟加载。
    • 默认值: false

11. targetSelector:

    • 用途: 指定加载遮罩的目标元素选择器。

12. targetElement:

    • 用途: 指定加载遮罩的目标元素对象。

13. onAfterLeave:

    • 用途: 加载动画结束后调用的回调函数。

14. onBeforeEnter:

    • 用途: 加载动画开始前调用的回调函数。

15. onBeforeLeave:

    • 用途: 加载动画结束前调用的回调函数。

16. onEnter:

    • 用途: 加载动画开始后调用的回调函数。

17. onLeave:

    • 用途: 加载动画结束后调用的回调函数。

二。实例

<template>
  <div>
    <h2>Loading 示例</h2>

    <!-- 基本用法 -->
    <el-button @click="showLoading">显示加载</el-button>
    <div v-loading="isLoading" class="loading-container">
      <p>基本用法</p>
    </div>

    <!-- 全屏加载 -->
    <el-button @click="showFullscreenLoading">显示全屏加载</el-button>
    <div v-loading.fullscreen="isFullscreenLoading" class="loading-container">
      <p>全屏加载</p>
    </div>

    <!-- 锁定屏幕滚动 -->
    <el-button @click="showLockedLoading">锁定屏幕滚动</el-button>
    <div v-loading.lock="isLockedLoading" class="loading-container">
      <p>锁定屏幕滚动</p>
    </div>

    <!-- 自定义加载文案 -->
    <el-button @click="showTextLoading">自定义加载文案</el-button>
    <div v-loading="isTextLoading" element-loading-text="加载中..." class="loading-container">
      <p>自定义加载文案</p>
    </div>

    <!-- 自定义加载图标 -->
    <el-button @click="showSpinnerLoading">自定义加载图标</el-button>
    <div v-loading="isSpinnerLoading" element-loading-spinner="el-icon-loading" class="loading-container">
      <p>自定义加载图标</p>
    </div>

    <!-- 自定义遮罩背景色 -->
    <el-button @click="showBackgroundLoading">自定义遮罩背景色</el-button>
    <div v-loading="isBackgroundLoading" element-loading-background="rgba(0, 0, 0, 0.8)" class="loading-container">
      <p>自定义遮罩背景色</p>
    </div>

    <!-- 自定义加载遮罩的类名 -->
    <el-button @click="showCustomClassLoading">自定义加载遮罩的类名</el-button>
    <div v-loading="isCustomClassLoading" element-loading-custom-class="custom-loading-class" class="loading-container">
      <p>自定义加载遮罩的类名</p>
    </div>

    <!-- 指定加载遮罩的目标元素 -->
    <el-button @click="showTargetLoading">指定目标元素</el-button>
    <div ref="targetElement" class="loading-container">
      <p>指定目标元素</p>
    </div>

    <!-- 将加载遮罩插入到 body 上 -->
    <el-button @click="showBodyLoading">插入到 body 上</el-button>
    <div v-loading.body="isBodyLoading" class="loading-container">
      <p>插入到 body 上</p>
    </div>

    <!-- 监听 DOM 变化 -->
    <el-button @click="showObserverLoading">监听 DOM 变化</el-button>
    <div v-loading="isObserverLoading" element-loading-obserer class="loading-container">
      <p>监听 DOM 变化</p>
    </div>

    <!-- 延迟加载 -->
    <el-button @click="showLazyLoading">延迟加载</el-button>
    <div v-loading="isLazyLoading" element-loading-lazy class="loading-container">
      <p>延迟加载</p>
    </div>

    <!-- 回调函数示例 -->
    <el-button @click="showCallbackLoading">回调函数示例</el-button>
    <div v-loading="isCallbackLoading" 
         element-loading-on-after-leave="afterLeave" 
         element-loading-on-before-enter="beforeEnter" 
         element-loading-on-before-leave="beforeLeave" 
         element-loading-on-enter="enter" 
         element-loading-on-leave="leave" 
         class="loading-container">
      <p>回调函数示例</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)
const isFullscreenLoading = ref(false)
const isLockedLoading = ref(false)
const isTextLoading = ref(false)
const isSpinnerLoading = ref(false)
const isBackgroundLoading = ref(false)
const isCustomClassLoading = ref(false)
const isTargetLoading = ref(false)
const isBodyLoading = ref(false)
const isObserverLoading = ref(false)
const isLazyLoading = ref(false)
const isCallbackLoading = ref(false)

const showLoading = () => {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
  }, 2000)
}

const showFullscreenLoading = () => {
  isFullscreenLoading.value = true
  setTimeout(() => {
    isFullscreenLoading.value = false
  }, 2000)
}

const showLockedLoading = () => {
  isLockedLoading.value = true
  setTimeout(() => {
    isLockedLoading.value = false
  }, 2000)
}

const showTextLoading = () => {
  isTextLoading.value = true
  setTimeout(() => {
    isTextLoading.value = false
  }, 2000)
}

const showSpinnerLoading = () => {
  isSpinnerLoading.value = true
  setTimeout(() => {
    isSpinnerLoading.value = false
  }, 2000)
}

const showBackgroundLoading = () => {
  isBackgroundLoading.value = true
  setTimeout(() => {
    isBackgroundLoading.value = false
  }, 2000)
}

const showCustomClassLoading = () => {
  isCustomClassLoading.value = true
  setTimeout(() => {
    isCustomClassLoading.value = false
  }, 2000)
}

const showTargetLoading = () => {
  isTargetLoading.value = true
  setTimeout(() => {
    isTargetLoading.value = false
  }, 2000)
}

const showBodyLoading = () => {
  isBodyLoading.value = true
  setTimeout(() => {
    isBodyLoading.value = false
  }, 2000)
}

const showObserverLoading = () => {
  isObserverLoading.value = true
  setTimeout(() => {
    isObserverLoading.value = false
  }, 2000)
}

const showLazyLoading = () => {
  isLazyLoading.value = true
  setTimeout(() => {
    isLazyLoading.value = false
  }, 2000)
}

const showCallbackLoading = () => {
  isCallbackLoading.value = true
  setTimeout(() => {
    isCallbackLoading.value = false
  }, 2000)
}

const afterLeave = () => {
  console.log('加载动画结束后调用的回调函数')
}

const beforeEnter = () => {
  console.log('加载动画开始前调用的回调函数')
}

const beforeLeave = () => {
  console.log('加载动画结束前调用的回调函数')
}

const enter = () => {
  console.log('加载动画开始后调用的回调函数')
}

const leave = () => {
  console.log('加载动画结束后调用的回调函数')
}
</script>

<style scoped>
.loading-container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 20px;
}

.custom-loading-class {
  background-color: rgba(255, 0, 0, 0.5);
}
</style>