LoadBox 加载盒子

介绍

主要用于表示加载中的过渡状态，以及处理加载错误需要重新加载的情况，基于 vant 的组件进行二次封装。使用了以下组件：

• Loading 用于加载指示器
• Icon 用于显示图标

引入

全局注册:

import { createApp } from "vue"
import { LoadBox } from "@dyb-dev/vant-pro"

const app = createApp()
app.use(LoadBox)

代码演示

正在载入

copy

源代码 ⬇️

<script setup lang="ts">
import { App, Button, Space } from "ant-design-vue"
import { Image } from "vant"
import { reactive } from "vue"

import { LoadBox } from "@dyb-dev/vant-pro"

import CellPhoneBox from "@/components/CellPhoneBox.vue"
import JsonViewer from "@/components/JsonViewer.vue"

import type { TLoadBoxStatus } from "@dyb-dev/vant-pro"

interface IData {
    /** 加载状态 */
    loadStatus: TLoadBoxStatus
}

/** REACTIVE: 数据 */
const data: IData = reactive({
    loadStatus: "loading"
})

/**
 * 加载函数
 */
const load = async() => {

    data.loadStatus = "loading"
    await delay(1000)
    if (Math.random() > 0.8) {

        data.loadStatus = "fail"
        return

    }
    data.loadStatus = "success"

}

/**
 * 延迟
 *
 * @param ms 毫秒
 * @returns Promise<void>
 */
const delay = (ms: number): Promise<void> => {

    return new Promise<void>(resolve => setTimeout(resolve, ms))

}

load()
</script>

<template>
    <App>
        <Space style="width: 100%" direction="vertical" size="middle">
            <Button type="primary" @click="load">重新加载</Button>

            <CellPhoneBox class="cell-phone-box" ref="cellPhoneBox">
                <LoadBox v-model:status="data.loadStatus" :retry-load-fn="load">
                    <Image width="100%" height="100%" fit="cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </LoadBox>
            </CellPhoneBox>

            <JsonViewer :value="data" :expand-depth="1" />
        </Space>
    </App>
</template>

Props

参数	说明	类型	默认值
v-model:status	状态，可选值为 'loading' | 'success' | 'fail'	'loading' | 'success' | 'fail'	'loading'
icon	自定义图标，优先级高于 loadingIcon、failIcon	LoadingType | string	-
text	自定义描述，优先级高于 loadingText、failText	string	-
loadingIcon	加载中的图标	LoadingType	'circular'
loadingText	加载中的描述	string	"正在载入"
failIcon	加载失败的图标	string	"replay"
failText	加载失败的描述	string	"加载失败，请点击重试~"
color	icon和文本颜色	string	"var(--van-loading-spinner-color)"
retryLoadFn	重新加载函数	() => void	-

Events

事件名	说明	回调参数
update:status	更新状态	value: TLoadBoxStatus

Slots

名称	说明
default	用于存放加载成功后显示的内容

类型定义

组件导出以下类型定义：

import type { TLoadBoxStatus, ILoadBoxProps } from "@dyb-dev/vant-pro"

主题定制

请参考 vant 中 ConfigProvider 的使用