Loading 加载

代码演示

基础用法

<template>
    <a-button
        type="primary"
        @click="handleShow">
        显示
    </a-button>
</template>

<script setup>
import { Loading } from '@/components'

defineOptions({
    name: 'GlobalBasic',
})

function handleShow() {
    Loading()

    setTimeout(() => {
        Loading.destroy()
    }, 2000)
}
</script>

<style lang="less" scoped></style>

各种大小

<template>
    <a-space>
        <a-button
            type="primary"
            @click="handleShow({ size: 'large' })">
            大尺寸
        </a-button>
        <a-button
            type="primary"
            @click="handleShow()">
            默认尺寸
        </a-button>
        <a-button
            type="primary"
            @click="handleShow({ size: 'small' })">
            小尺寸
        </a-button>
    </a-space>
</template>

<script setup>
import { Loading } from '@/components'

defineOptions({
    name: 'GlobalSize',
})

function handleShow(option = {}) {
    Loading(option)

    setTimeout(() => {
        Loading.destroy()
    }, 2000)
}
</script>

<style lang="less" scoped></style>

自定义

<template>
    <a-space>
        <a-button
            type="primary"
            @click="handleShow()">
            自定义文案
        </a-button>
        <a-button
            type="primary"
            @click="handleCustomIcon()">
            自定义 icon
        </a-button>
        <a-button
            type="primary"
            @click="handleError()">
            加载失败
        </a-button>
    </a-space>
</template>

<script setup>
import { h } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { Loading } from '@/components'
import { message } from 'ant-design-vue'

defineOptions({
    name: 'GlobalCustom',
})

function handleShow() {
    Loading({
        description: '加载中',
    })

    hide()
}

function handleCustomIcon() {
    Loading({
        icon: LoadingOutlined,
    })

    hide()
}

function handleError() {
    Loading({
        icon: h('img', {
            style: { width: '140px', height: 'auto' },
            src: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyMi44NzEgMTQwLjY0M2MwLTIzLjYtMTkuMS00Mi43LTQyLjctNDIuN3MtNDIuNyAxOS4xLTQyLjcgNDIuNyAxOS4xIDQyLjcgNDIuNyA0Mi43YzIzLjUgMCA0Mi43LTE5LjEgNDIuNy00Mi43Wk0xNTkuNDcgMTgzLjM0M2MwLTIzLjYtMTkuMS00Mi43LTQyLjctNDIuN3MtNDIuNyAxOS4xLTQyLjcgNDIuNyAxOS4xIDQyLjcgNDIuNyA0Mi43YzIzLjYuMSA0Mi43LTE5LjEgNDIuNy00Mi43Wk0xMDAuMDcgMTI3LjE0M2MwLTEyLjItOS44LTIyLTIyLTIycy0yMiA5LjgtMjIgMjIgOS45IDIyIDIyIDIyIDIyLTkuOCAyMi0yMloiIGZpbGw9IiNFRkVGRUYiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI2My45NyAxMDEuMDQzcy0xMS44LTUuMi0xMS45LTEzLjJjLS4xLTggMjMuOS05LjggMTguNi0yMS40LTUuMy0xMS43LTE3LjgtNi4zLTIxLjktMTIuMS00LjEtNS44IDQuMS0xMy41LTcuNi0xNi45LTExLjYtMy41LTE2LjEgNy41LTI0IDEwLjUtNy45IDMuMS0xNC4xLTEtMjAuNC0xLTYuMyAwLTUuNiAzLjItMTIuMiA3LjRzLTguNi0uNS0xOS41IDMuOGMtMTAuOSA0LjItMS45IDIyLTYuNCAyNi40LTQuNSA0LjQtMTMuMyAxMi0xMy4zIDI4LjhzMjYuNSAyOS4zIDI2LjUgMjkuM2w2NC45IDMuNXMzOS43LTI2LjkgMzMuOS00MGMtMi42LTMuNC02LjctNS4xLTYuNy01LjFaIiBmaWxsPSIjMDAwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMTkuNDcgMTIxLjM0M3YtMjIuOGMtLjEtMi45LTQuNi0yLjMtNC44LS4xdjE4LjJsLTIuMi02LjJjLTEuMi0yLjUtNS43LTIuMy00LjggMS4xbDEuNCA1LjQtMy41LTUuNGMtMS4xLTIuOS00LjItLjgtMy41IDEuMmw1LjEgOS4xLTUuOS03LjNjLTEuNS0xLjctNCAwLTMuMSAxLjhsNi4yIDEwLjRjMS45IDQuMSAyLjggOC43IDIuNyAxMy4ydi42aDEyLjRsMS4xLTkuNyA1LjctMTEuMWMxLTEuOC0yLjEtMy45LTMtMS44bC0zLjggNS45di0yLjVaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExOS40NyAxMjEuMzQzdi0yMi44Yy0uMS0yLjktNC42LTIuMy00LjgtLjF2MTguMmwtMi4yLTYuMmMtMS4yLTIuNS01LjctMi4zLTQuOCAxLjFsMS40IDUuNC0zLjUtNS40Yy0xLjEtMi45LTQuMi0uOC0zLjUgMS4ybDUuMSA5LjEtNS45LTcuM2MtMS41LTEuNy00IDAtMy4xIDEuOGw2LjIgMTAuNGMxLjkgNC4xIDIuOCA4LjcgMi43IDEzLjJ2LjZoMTIuNGwxLjEtOS43IDUuNy0xMS4xYzEtMS44LTIuMS0zLjktMy0xLjhsLTMuOCA1Ljl2LTIuNVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBkPSJNMTQ1LjQ5NCAxNjMuODA2Yy01LjggNy41LTE0LjEgMjUuNS0xNC4xIDI1LjVsLTguOC00Ny40LTIwLjQtNC4ycy05LjQgNjcuOCA3LjggODcuMWMxNy4yIDE5LjIgMzUuNS04LjYgMzUuNS04LjZ2NDcuMWgxMDUuNWwxMi42LTEwLjggMi43IDcuOHMyNC4zLTcuOCAzMS40LTIxLjZjNy4xLTEzLjggOC40LTMyLjEgMC00Ny42LTIwLjctMzguMS01MC45LTU2LjMtOTAuNS01NC40LTI3LjMgMS4yLTQ3LjQgOC42LTYxLjcgMjcuMVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iOTkiIHk9IjEzNiIgd2lkdGg9IjIwNSIgaGVpZ2h0PSIxMjgiPjxwYXRoIGQ9Ik0xNDUuNDk0IDE2My44MDZjLTUuOCA3LjUtMTQuMSAyNS41LTE0LjEgMjUuNWwtOC44LTQ3LjQtMjAuNC00LjJzLTkuNCA2Ny44IDcuOCA4Ny4xYzE3LjIgMTkuMiAzNS41LTguNiAzNS41LTguNnY0Ny4xaDEwNS41bDEyLjYtMTAuOCAyLjcgNy44czI0LjMtNy44IDMxLjQtMjEuNmM3LjEtMTMuOCA4LjQtMzIuMSAwLTQ3LjYtMjAuNy0zOC4xLTUwLjktNTYuMy05MC41LTU0LjQtMjcuMyAxLjItNDcuNCA4LjYtNjEuNyAyNy4xWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0NS40OTQgMTYzLjgwNmMtNS44IDcuNS0xNC4xIDI1LjUtMTQuMSAyNS41bC04LjgtNDcuNC0yMC40LTQuMnMtOS40IDY3LjggNy44IDg3LjFjMTcuMiAxOS4yIDM1LjUtOC42IDM1LjUtOC42djQ3LjFoMTA1LjVsMTIuNi0xMC44IDIuNyA3LjhzMjQuMy03LjggMzEuNC0yMS42YzcuMS0xMy44IDguNC0zMi4xIDAtNDcuNi0yMC43LTM4LjEtNTAuOS01Ni4zLTkwLjUtNTQuNC0yNy4zIDEuMi00Ny40IDguNi02MS43IDI3LjFaIiBmaWxsPSIjZmZmIi8+PC9nPjxtYXNrIGlkPSJiIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSI5OSIgeT0iMTM2IiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjEyOCI+PHBhdGggZD0iTTE0NS40OTQgMTYzLjgwNmMtNS44IDcuNS0xNC4xIDI1LjUtMTQuMSAyNS41bC04LjgtNDcuNC0yMC40LTQuMnMtOS40IDY3LjggNy44IDg3LjFjMTcuMiAxOS4yIDM1LjUtOC42IDM1LjUtOC42djQ3LjFoMTA1LjVsMTIuNi0xMC44IDIuNyA3LjhzMjQuMy03LjggMzEuNC0yMS42YzcuMS0xMy44IDguNC0zMi4xIDAtNDcuNi0yMC43LTM4LjEtNTAuOS01Ni4zLTkwLjUtNTQuNC0yNy4zIDEuMi00Ny40IDguNi02MS43IDI3LjFaIiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjYikiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQ1LjE5NCAyMzEuMTA2djM0LjloMTA1LjhsMTAuOC02Mi4xYzEuMS02LjQtLjYtMTMtNC44LTE3LjktNC4yLTUtMTAuMy03LjgtMTYuOC03LjhoLTczYy0xMi4xIDAtMjIgOS44LTIyIDIydjMwLjlaIiBmaWxsPSIjRUZFRkVGIi8+PHBhdGggZD0iTTE0NS4xOTQgMjMxLjEwNnYzNC45aDEwNS44bDEwLjgtNjIuMWMxLjEtNi40LS42LTEzLTQuOC0xNy45LTQuMi01LTEwLjMtNy44LTE2LjgtNy44aC03M2MtMTIuMSAwLTIyIDkuOC0yMiAyMnYzMC45WiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvZz48bWFzayBpZD0iYyIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iOTkiIHk9IjEzNiIgd2lkdGg9IjIwNSIgaGVpZ2h0PSIxMjgiPjxwYXRoIGQ9Ik0xNDUuNDk0IDE2My44MDZjLTUuOCA3LjUtMTQuMSAyNS41LTE0LjEgMjUuNWwtOC44LTQ3LjQtMjAuNC00LjJzLTkuNCA2Ny44IDcuOCA4Ny4xYzE3LjIgMTkuMiAzNS41LTguNiAzNS41LTguNnY0Ny4xaDEwNS41bDEyLjYtMTAuOCAyLjcgNy44czI0LjMtNy44IDMxLjQtMjEuNmM3LjEtMTMuOCA4LjQtMzIuMSAwLTQ3LjYtMjAuNy0zOC4xLTUwLjktNTYuMy05MC41LTU0LjQtMjcuMyAxLjItNDcuNCA4LjYtNjEuNyAyNy4xWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48bWFzayBpZD0iZCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iOTkiIHk9IjEzNiIgd2lkdGg9IjIwNSIgaGVpZ2h0PSIxMjgiPjxwYXRoIGQ9Ik0xNDUuNDk0IDE2My44MDZjLTUuOCA3LjUtMTQuMSAyNS41LTE0LjEgMjUuNWwtOC44LTQ3LjQtMjAuNC00LjJzLTkuNCA2Ny44IDcuOCA4Ny4xYzE3LjIgMTkuMiAzNS41LTguNiAzNS41LTguNnY0Ny4xaDEwNS41bDEyLjYtMTAuOCAyLjcgNy44czI0LjMtNy44IDMxLjQtMjEuNmM3LjEtMTMuOCA4LjQtMzIuMSAwLTQ3LjYtMjAuNy0zOC4xLTUwLjktNTYuMy05MC41LTU0LjQtMjcuMyAxLjItNDcuNCA4LjYtNjEuNyAyNy4xWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2QpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE2OC4wOTQgMjAzLjIwNmMyIDAgMy45LS44IDUuMy0yLjIgMS40LTEuNCAyLjItMy4zIDIuMi01LjN2LTU3LjFjMC0xLjgtLjktMy40LTIuNC00LjMtMS41LS45LTMuNC0uOS00LjktLjFsLTUgMi43Yy0xLjYuOS0yLjYgMi42LTIuNiA0LjR2NTQuNGMwIDIgLjggMy45IDIuMiA1LjMgMS4zIDEuNCAzLjIgMi4yIDUuMiAyLjJaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE2OC4wOTQgMjAzLjIwNmMyIDAgMy45LS44IDUuMy0yLjIgMS40LTEuNCAyLjItMy4zIDIuMi01LjN2LTU3LjFjMC0xLjgtLjktMy40LTIuNC00LjMtMS41LS45LTMuNC0uOS00LjktLjFsLTUgMi43Yy0xLjYuOS0yLjYgMi42LTIuNiA0LjR2NTQuNGMwIDIgLjggMy45IDIuMiA1LjMgMS4zIDEuNCAzLjIgMi4yIDUuMiAyLjJaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9nPjxtYXNrIGlkPSJlIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSI5OSIgeT0iMTM2IiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjEyOCI+PHBhdGggZD0iTTE0NS40OTQgMTYzLjgwNmMtNS44IDcuNS0xNC4xIDI1LjUtMTQuMSAyNS41bC04LjgtNDcuNC0yMC40LTQuMnMtOS40IDY3LjggNy44IDg3LjFjMTcuMiAxOS4yIDM1LjUtOC42IDM1LjUtOC42djQ3LjFoMTA1LjVsMTIuNi0xMC44IDIuNyA3LjhzMjQuMy03LjggMzEuNC0yMS42YzcuMS0xMy44IDguNC0zMi4xIDAtNDcuNi0yMC43LTM4LjEtNTAuOS01Ni4zLTkwLjUtNTQuNC0yNy4zIDEuMi00Ny40IDguNi02MS43IDI3LjFaIiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjZSkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjQ3Ljg5NCAyMDMuMjA2YzIgMCAzLjktLjggNS4zLTIuMiAxLjQtMS40IDIuMi0zLjMgMi4yLTUuM3YtNTcuNWMwLTEuOC0uOS0zLjQtMi40LTQuMy0xLjUtLjktMy40LS45LTQuOS0uMWwtNSAyLjdjLTEuNi45LTIuNiAyLjYtMi42IDQuNHY1NC45YzAgMiAuOCAzLjkgMi4yIDUuMyAxLjMgMS4zIDMuMyAyLjEgNS4yIDIuMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjQ3Ljg5NCAyMDMuMjA2YzIgMCAzLjktLjggNS4zLTIuMiAxLjQtMS40IDIuMi0zLjMgMi4yLTUuM3YtNTcuNWMwLTEuOC0uOS0zLjQtMi40LTQuMy0xLjUtLjktMy40LS45LTQuOS0uMWwtNSAyLjdjLTEuNi45LTIuNiAyLjYtMi42IDQuNHY1NC45YzAgMiAuOCAzLjkgMi4yIDUuMyAxLjMgMS4zIDMuMyAyLjEgNS4yIDIuMVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L2c+PG1hc2sgaWQ9ImYiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9Ijk5IiB5PSIxMzYiIHdpZHRoPSIyMDUiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNMTQ1LjQ5NCAxNjMuODA2Yy01LjggNy41LTE0LjEgMjUuNS0xNC4xIDI1LjVsLTguOC00Ny40LTIwLjQtNC4ycy05LjQgNjcuOCA3LjggODcuMWMxNy4yIDE5LjIgMzUuNS04LjYgMzUuNS04LjZ2NDcuMWgxMDUuNWwxMi42LTEwLjggMi43IDcuOHMyNC4zLTcuOCAzMS40LTIxLjZjNy4xLTEzLjggOC40LTMyLjEgMC00Ny42LTIwLjctMzguMS01MC45LTU2LjMtOTAuNS01NC40LTI3LjMgMS4yLTQ3LjQgOC42LTYxLjcgMjcuMVoiIGZpbGw9IiNmZmYiLz48L21hc2s+PGcgbWFzaz0idXJsKCNmKSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzEuMDk1IDE5NS44MDZjMC0xLjctMS40LTMuMS0zLjEtMy4xLTEuNyAwLTMuMSAxLjQtMy4xIDMuMSAwIDEuNyAxLjQgMy4xIDMuMSAzLjEgMS44IDAgMy4xLTEuNCAzLjEtMy4xWiIgZmlsbD0iIzAwMCIvPjwvZz48bWFzayBpZD0iZyIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iOTkiIHk9IjEzNiIgd2lkdGg9IjIwNSIgaGVpZ2h0PSIxMjgiPjxwYXRoIGQ9Ik0xNDUuNDk0IDE2My44MDZjLTUuOCA3LjUtMTQuMSAyNS41LTE0LjEgMjUuNWwtOC44LTQ3LjQtMjAuNC00LjJzLTkuNCA2Ny44IDcuOCA4Ny4xYzE3LjIgMTkuMiAzNS41LTguNiAzNS41LTguNnY0Ny4xaDEwNS41bDEyLjYtMTAuOCAyLjcgNy44czI0LjMtNy44IDMxLjQtMjEuNmM3LjEtMTMuOCA4LjQtMzIuMSAwLTQ3LjYtMjAuNy0zOC4xLTUwLjktNTYuMy05MC41LTU0LjQtMjcuMyAxLjItNDcuNCA4LjYtNjEuNyAyNy4xWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2cpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI1MC45OTQgMTk1LjgwNmMwLTEuNy0xLjQtMy4xLTMuMS0zLjEtMS43IDAtMy4xIDEuNC0zLjEgMy4xIDAgMS43IDEuNCAzLjEgMy4xIDMuMSAxLjcgMCAzLjEtMS40IDMuMS0zLjFaIiBmaWxsPSIjMDAwIi8+PC9nPjxtYXNrIGlkPSJoIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSI5OSIgeT0iMTM2IiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjEyOCI+PHBhdGggZD0iTTE0NS40OTQgMTYzLjgwNmMtNS44IDcuNS0xNC4xIDI1LjUtMTQuMSAyNS41bC04LjgtNDcuNC0yMC40LTQuMnMtOS40IDY3LjggNy44IDg3LjFjMTcuMiAxOS4yIDM1LjUtOC42IDM1LjUtOC42djQ3LjFoMTA1LjVsMTIuNi0xMC44IDIuNyA3LjhzMjQuMy03LjggMzEuNC0yMS42YzcuMS0xMy44IDguNC0zMi4xIDAtNDcuNi0yMC43LTM4LjEtNTAuOS01Ni4zLTkwLjUtNTQuNC0yNy4zIDEuMi00Ny40IDguNi02MS43IDI3LjFaIiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjaCkiPjxwYXRoIGQ9Ik0xMDUuNjk0IDExNC45MDZ2MjIuOCIgc3Ryb2tlPSIjOTc5Nzk3Ii8+PC9nPjxwYXRoIGQ9Ik0yMzMuMzcxIDEyMi4xNDNzMyAuMiAzLjMgMi4zYy4zIDIuMS0yLjIgNi4zLTQuMyA4LjEtMi4xIDEuOC0zLjQgMi4xLTMuNCAyLjEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjMzLjM3MSAxMjIuMTQzczMgLjIgMy4zIDIuM2MuMyAyLjEtMi4yIDYuMy00LjMgOC4xLTIuMSAxLjgtMy40IDIuMS0zLjQgMi4xIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTE3NS4yNyAxMTYuODQzcy0zLS4zLTMuNiAxLjhjLS42IDIgMS4yIDYuNSAzIDguNiAxLjggMi4xIDMgMi42IDMgMi42IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE3NS4yNyAxMTYuODQzcy0zLS4zLTMuNiAxLjhjLS42IDIgMS4yIDYuNSAzIDguNiAxLjggMi4xIDMgMi42IDMgMi42IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMzQuMDcgMTEyLjI0M2MwLTIxLjgtMTQuOC0zMS4yLTMwLjMtMzEuMi0xNS42IDAtMjguMiAxMS40LTI4LjIgMzMuMiAwIDIxLjggMTIuNiAzOS41IDI4LjIgMzkuNSAxNS42LS4xIDMwLjMtMTkuNyAzMC4zLTQxLjVaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTIzNC4wNyAxMTIuMjQzYzAtMjEuOC0xNC44LTMxLjItMzAuMy0zMS4yLTE1LjYgMC0yOC4yIDExLjQtMjguMiAzMy4yIDAgMjEuOCAxMi42IDM5LjUgMjguMiAzOS41IDE1LjYtLjEgMzAuMy0xOS43IDMwLjMtNDEuNVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBkPSJNMjA5LjU3IDEzMy42NDRjLTEuOC0xLjgtMy44LTIuNy02LjcgME0yMDkuNTcgMTEzLjI0M3MuMyAzLjguNyA2Yy40IDIuMi45IDMgLjkgNC4yIDAgMS4yLTIuNiAxLjctMi42IDEuNyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjA1LjU3IDEwOS42NDNjMC05LjctNy44LTE3LjUtMTcuNS0xNy41cy0xNy41IDcuOC0xNy41IDE3LjUgNy44IDE3LjUgMTcuNSAxNy41IDE3LjUtNy44IDE3LjUtMTcuNVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjA1LjU3IDEwOS42NDNjMC05LjctNy44LTE3LjUtMTcuNS0xNy41cy0xNy41IDcuOC0xNy41IDE3LjUgNy44IDE3LjUgMTcuNSAxNy41IDE3LjUtNy44IDE3LjUtMTcuNVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI0Mi40NyAxMTEuNjQzYzAtOC4xLTYuNi0xNC44LTE0LjgtMTQuOC04LjIgMC0xNC44IDYuNi0xNC44IDE0LjggMCA4LjIgNi42IDE0LjggMTQuOCAxNC44IDguMiAwIDE0LjgtNi42IDE0LjgtMTQuOFoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjQyLjQ3IDExMS42NDNjMC04LjEtNi42LTE0LjgtMTQuOC0xNC44LTguMiAwLTE0LjggNi42LTE0LjggMTQuOCAwIDguMiA2LjYgMTQuOCAxNC44IDE0LjggOC4yIDAgMTQuOC02LjYgMTQuOC0xNC44WiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIxLjc3IDExMy4zNDNjLjItMS45LS4yLTMuNi0xLjEtMy43LS44LS4xLTEuNyAxLjQtMS45IDMuMy0uMiAxLjkuMiAzLjYgMS4xIDMuNy44LjEgMS42LTEuMyAxLjktMy4zWk0xOTguNTcgMTExLjg0M2MuMi0xLjktLjItMy42LTEuMS0zLjctLjgtLjEtMS43IDEuNC0xLjkgMy4zLS4yIDEuOS4yIDMuNiAxLjEgMy43LjguMSAxLjctMS40IDEuOS0zLjNaIiBmaWxsPSIjMDAwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Ny40OTggMjQyLjgzMmg4OWMyLjggMCA1LTIuMiA1LTV2LTIxYzAtMi44LTIuMi01LTUtNWgtODljLTIuOCAwLTUgMi4yLTUgNXYyMWMwIDIuOCAyLjIgNSA1IDVaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTc3LjQ5OCAyNDIuODMyaDg5YzIuOCAwIDUtMi4yIDUtNXYtMjFjMC0yLjgtMi4yLTUtNS01aC04OWMtMi44IDAtNSAyLjItNSA1djIxYzAgMi44IDIuMiA1IDUgNVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjQgNCIvPjxwYXRoIGQ9Im03Ny4wOTggMjE0LjgzMiA4OCAyMy44TTc3LjA5OCAyMzguNjMybDg4LTIzLjgiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTg1LjE4NiAyMTEuNzgyYzAtNi41LTUuNC0xMS45LTEyLTExLjlzLTExLjkgNS40LTExLjkgMTEuOSA1LjMgMTEuOSAxMS45IDExLjljNi42IDAgMTItNS4zIDEyLTExLjlaIiBmaWxsPSIjRUZFRkVGIi8+PHBhdGggZD0iTTg1LjE4NiAyMTEuNzgyYzAtNi41LTUuNC0xMS45LTEyLTExLjlzLTExLjkgNS40LTExLjkgMTEuOSA1LjMgMTEuOSAxMS45IDExLjljNi42IDAgMTItNS4zIDEyLTExLjlaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0ibTY5LjEzNSAyMDcuNzg0IDguMTMxIDguMTMxTTc3LjMzOCAyMDcuNzg0bC04LjEzMiA4LjEzMSIgc3Ryb2tlPSIjOTc5Nzk3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNjkuNDIgMTExLjI4aDg5YzIuOCAwIDUtMi4yIDUtNXYtMjljMC0yLjgtMi4yLTUtNS01aC04OWMtMi44IDAtNSAyLjItNSA1djI5YzAgMi44IDIuMiA1IDUgNVoiIGZpbGw9IiM1NTc4RUMiLz48cGF0aCBkPSJNNjkuNDIgMTExLjI4aDg5YzIuOCAwIDUtMi4yIDUtNXYtMjljMC0yLjgtMi4yLTUtNS01aC04OWMtMi44IDAtNSAyLjItNSA1djI5YzAgMi44IDIuMiA1IDUgNVoiIHN0cm9rZT0iIzMzNTFFNSIgc3Ryb2tlLXdpZHRoPSI5Ii8+PHBhdGggZD0iTTc1LjA0MyAxMDAuNDI3aDQ2TTc1LjQ0MyA4My41MjdoNzYuMSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjgiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkwLjk3IDE3Ny4yNDNoODkuMDAxYzIuOCAwIDUtMi4yIDUtNXYtMjFjMC0yLjgtMi4yLTUtNS01aC04OWMtMi44IDAtNSAyLjItNSA1djIxYzAgMi44IDIuMiA1IDUgNVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOTAuOTcgMTc3LjI0M2g4OS4wMDFjMi44IDAgNS0yLjIgNS01di0yMWMwLTIuOC0yLjItNS01LTVoLTg5Yy0yLjggMC01IDIuMi01IDV2MjFjMCAyLjggMi4yIDUgNSA1WiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWRhc2hhcnJheT0iNCA0Ii8+PHBhdGggZD0ibTkxLjA3IDE0OS44NDMgODggMjMuMk05MS4wNyAxNzMuMDQzbDg2LTIzLjIiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI0MS41OCAxNDEuOTNoODljMi44IDAgNS0yLjIgNS01di0yMWMwLTIuOC0yLjItNS01LTVoLTg5Yy0yLjggMC01IDIuMi01IDV2MjFjMCAyLjggMi4yIDUgNSA1WiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNDEuNTggMTQxLjkzaDg5YzIuOCAwIDUtMi4yIDUtNXYtMjFjMC0yLjgtMi4yLTUtNS01aC04OWMtMi44IDAtNSAyLjItNSA1djIxYzAgMi44IDIuMiA1IDUgNVoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjQgNCIvPjxwYXRoIGQ9Im0yNDMuNDggMTE0LjIyOSA4NS42IDIzLjVNMjQzLjQ4IDEzNy43MjlsODUuNi0yMy41IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zNDcuNTcgMTE1LjI0M2MwLTYuNi01LjQtMTEuOS0xMS45LTExLjktNi42IDAtMTIgNS4zLTEyIDExLjkgMCA2LjYgNS40IDEyIDEyIDEyIDYuNS0uMSAxMS45LTUuNCAxMS45LTEyWiIgZmlsbD0iI0VGRUZFRiIvPjxwYXRoIGQ9Ik0zNDcuNTcgMTE1LjI0M2MwLTYuNi01LjQtMTEuOS0xMS45LTExLjktNi42IDAtMTIgNS4zLTEyIDExLjkgMCA2LjYgNS40IDEyIDEyIDEyIDYuNS0uMSAxMS45LTUuNCAxMS45LTEyWiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOTcuOTIgMTc3LjE5NGMwLTYuNi01LjQtMTEuOS0xMS45LTExLjlzLTEyIDUuMy0xMiAxMS45YzAgNi42IDUuMyAxMiAxMS45IDEyIDYuNiAwIDEyLTUuNCAxMi0xMloiIGZpbGw9IiNFRkVGRUYiLz48cGF0aCBkPSJNOTcuOTIgMTc3LjE5NGMwLTYuNi01LjQtMTEuOS0xMS45LTExLjlzLTEyIDUuMy0xMiAxMS45YzAgNi42IDUuMyAxMiAxMS45IDEyIDYuNiAwIDEyLTUuNCAxMi0xMloiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBkPSJtODEuODcgMTczLjE5NSA4LjEzIDguMTMyTTkwLjA3MiAxNzMuMTk1bC04LjEzMiA4LjEzMk0zMzEuODY5IDExMS4xOTVsOC4xMzIgOC4xMzJNMzQwLjA3MiAxMTEuMTk1bC04LjEzMSA4LjEzMiIgc3Ryb2tlPSIjOTc5Nzk3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGQ9Ik0yNjkuNjcgMjExLjU0M2MtLjEgNi42LTEuOSAxMi02LjQgMTUuNmwtNi45IDQuMiA2LjkgMjIuNCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNjkuNjcgMjExLjU0M2MtLjEgNi42LTEuOSAxMi02LjQgMTUuNmwtNi45IDQuMiA2LjkgMjIuNCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGQ9Ik02Ny4wNyAxMTkuMzQzYy4yLjkuNiAxLjggMS4zIDIuNC43LjcgMS41IDEuMSAyLjQgMS4zLjkuMiAxLjkuMSAyLjctLjMuOS0uNCAxLjYtMSAyLjEtMS43LjUtLjguOC0xLjcuOC0yLjYgMC0xLjItLjUtMi40LTEuNC0zLjMtLjktLjktMi4xLTEuNC0zLjMtMS40LS45IDAtMS44LjMtMi42LjhzLTEuNCAxLjMtMS43IDIuMWMtLjQuOS0uNSAxLjgtLjMgMi43Wk0xMjAuNzcxIDYyLjI0M2w3LjUtMy42TTEyNC41NyA1NC4zNDNsNy41LTMuNiIgc3Ryb2tlPSIjNTU3OEVDIiBzdHJva2Utd2lkdGg9IjEuOTQ0Ii8+PHBhdGggZD0ibTIwNy4zNyAxMDIuNjQzLTkuMy0zLjRNMjEzLjA3IDEwMi45NDNsOS4xLTIuMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg==',
        }),
        description: h('div', { class: 'mt-8-1 color-text' }, ['加载失败，', h('a', { onClick: reload }, '重新加载')]),
    })
}

/**
 * 隐藏
 * @param timeout
 */
function hide(timeout = 2000) {
    setTimeout(() => {
        Loading.destroy()
    }, timeout)
}

function reload() {
    Loading.destroy()
    message.success('点击了重新加载')
}
</script>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
size	大小，可选：【小：small，默认：default，大：large】	string VNode	default
icon	自定义 icon	VNode	-
description	描述文字	string VNode	-
description-style	描述文字样式	string object	-
mask	是否显示遮罩	boolean	true
mask-style	遮罩样式	string object	-