Loading 加载 ​

加载数据时显示动效。

ts
import { Loading } from '@szhn/dh-design-pc'

区域加载 ​

在需要的时候展示加载动画，防止页面失去响应提高用户体验。通过 v-loading 指令绑定一个 boolean 值即可为元素添加遮罩。

<template>
  <div class="loading-container" v-loading="loading">
    <p>数据内容区域</p>
    <el-button @click="toggle">{{ loading ? '停止加载' : '开始加载' }}</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Button as ElButton } from '@szhn/dh-design-pc'


const loading = ref(false)

function toggle() {
  loading.value = !loading.value
}
</script>

<style scoped>
.loading-container {
  padding: 24px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
</style>

自定义加载中组件内容 ​

可以通过 element-loading-text / element-loading-spinner / element-loading-svg / element-loading-background 自定义加载文字、图标以及背景色。

<template>
  <div
    class="loading-container"
    v-loading="loading"
    element-loading-text="努力加载中…"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)"
  >
    <p>请等待片刻…</p>
    <el-button @click="loading = !loading">{{ loading ? '停止' : '开始加载' }}</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Button as ElButton } from '@szhn/dh-design-pc'


const loading = ref(true)
</script>

<style scoped>
.loading-container {
  padding: 24px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  color: var(--el-text-color-regular);
}
</style>

让加载组件铺满整个屏幕 ​

当使用指令方式时，给 v-loading 添加 fullscreen 修饰符可以让遮罩插入至 body 上，可以搭配 lock 修饰符锁定滚动。

<template>
  <el-button @click="openFullscreen">打开全屏加载（3 秒后自动关闭）</el-button>
</template>

<script lang="ts" setup>
import { Loading, Button as ElButton } from '@szhn/dh-design-pc'


function openFullscreen() {
  const instance = Loading.service({
    lock: true,
    text: '加载中…',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => instance.close(), 3000)
}
</script>

以服务的方式来调用 ​

Loading 还可以通过 Loading.service(options) 以服务方式调用，返回一个 Loading 实例，调用 close() 关闭。全屏 Loading 默认是单例模式；如果完整引入 dh-design-pc，也可以通过全局方法 this.$loading(options) 调用。

<template>
  <el-button type="primary" @click="openLoading">以服务方式调用</el-button>
</template>

<script lang="ts" setup>
import { Loading, Message, Button as ElButton } from '@szhn/dh-design-pc'


function openLoading() {
  const instance = Loading.service({
    fullscreen: true,
    text: '正在请求数据…',
    background: 'rgba(0, 0, 0, 0.6)',
  })
  setTimeout(() => {
    instance.close()
    Message.success('加载完成')
  }, 1500)
}
</script>

应用上下文继承 (2.9.10) ​

Loading.service 支持接收当前应用的 appContext 作为第二个参数，从而继承全局配置、国际化与注入内容。

ts
import { getCurrentInstance } from 'vue'
import { Loading } from '@szhn/dh-design-pc'

const { appContext } = getCurrentInstance()!
Loading.service({}, appContext)

API ​

配置项（部分） ​

名称说明类型默认
targetLoading 需要覆盖的 DOM 节点string / HTMLElementdocument.body
body同指令中的 body 修饰符booleanfalse
fullscreen同指令中的 fullscreen 修饰符booleantrue
lock同指令中的 lock 修饰符booleanfalse
text加载文案string—
spinner自定义加载图标类名string—
background遮罩背景色string—
customClass自定义类名string—
svg自定义 svg 元素string—
svgViewBox自定义 svg 的 viewBoxstring—
beforeClose 2.7.8关闭前回调，返回 false 可阻止关闭() => boolean—
closed 2.7.8完全关闭后的回调() => void—

指令修饰符 ​

指令说明
v-loading是否显示加载动画
v-loading.fullscreen全屏加载
v-loading.lock锁定滚动
v-loading.body将遮罩插入到 body
element-loading-text加载文案
element-loading-spinner自定义加载图标
element-loading-svg自定义 SVG 加载图标
element-loading-svg-view-box自定义 SVG viewBox
element-loading-background背景色
element-loading-custom-class自定义类名

更多配置参见 Element Plus Loading。