加载 Loading

区域加载对应 Arco Spin，遮罩与提示使用主题颜色。 属性用法见 Element Plus 文档。

区域加载

使用 Switch 控制 v-loading，加载遮罩覆盖已有内容。

Loading

Project content is loading.

<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>

<template>
  <div style="width: 100%">
    <el-switch v-model="loading" active-text="Loading" style="margin-bottom: 16px" />
    <div v-loading="loading" element-loading-text="Loading..." style="height: 180px; padding: 24px; border: 1px solid var(--el-border-color)">Project content is loading.</div>
  </div>
</template>

全屏加载

点击按钮显示全屏遮罩，2 秒后自动关闭；这是 Arco 没有的扩展形态。

<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import { ElLoading } from 'element-plus'
let instance: ReturnType<typeof ElLoading.service> | undefined
let timer: ReturnType<typeof setTimeout> | undefined
// Close automatically after 2 seconds; also clean up when the page is left.
function close() {
  clearTimeout(timer)
  instance?.close()
  instance = undefined
}
function open() {
  close()
  instance = ElLoading.service({ fullscreen: true, text: 'Loading...' })
  timer = setTimeout(close, 2000)
}
onBeforeUnmount(close)
</script>

<template>
  <el-button type="primary" @click="open">Show fullscreen loading</el-button>
</template>

与 Arco 的差异

• 加载图标形状不同；全屏加载保留 Element Plus 的较大图标，Arco 没有对应项。