loading

介绍

v-loading 指令用于为当前标签添加 loading 等待效果；例如当用户请求表格数据时，需要表格展示出现遮罩等待，提高用户使用感。

用法

创建一个响应式数据（ref 或 reactive）绑定v-loading，当值为true时，显示 loading，当值为false时，隐藏 loading。

查看代码

<template>
  <a-card hoverable>
    <template #cover>
      <div
        v-loading="isLoading"
        :style="{
          height: '204px',
          overflow: 'hidden',
          position: 'relative'
        }"
      >
        <img
          :style="{ width: '100%', transform: 'translateY(-20px)', display: 'block' }"
          alt="dessert"
          :src="imgSrc"
          @load="isLoading = false"
        />
      </div>
    </template>
    <a-card-meta title="点击加载图片">
      <template #description>
        <a-button @click="fetchData" type="primary" size="large" long>点击加载图片</a-button>
      </template>
    </a-card-meta>
  </a-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isLoading = ref<boolean>(false)
const imgSrc = ref<string>('')

const fetchData = async () => {
  isLoading.value = true
  imgSrc.value = '' // 先清空，确保 `onload` 事件会触发
  await new Promise((resolve) => setTimeout(resolve, 2000))
  imgSrc.value = 'https://images.pexels.com/photos/2049422/pexels-photo-2049422.jpeg'
  isLoading.value = false
}
</script>

API

属性名	说明	类型	是否必选	默认值
value	一个布尔值，表示是否显示 loading , 等于 true 时显示 loading 效果，否则不显示 loading 效果	boolean	✓	false

属性

属性名	说明	类型	是否必选	默认值