Empty Component

This component is used for scenarios where content needs to be loaded but the first page of data comes back empty, prompting the user that there is "no content". We have carefully selected a dozen scenario-specific icons for your convenience.

📌 Platform Compatibility

APP(vue)	H5	WeChat Mini Program	Alipay Mini Program
✔	✔	✔	✔

🏯 Basic Usage

<!-- Global usage -->
<hy-empty></hy-empty>

Show and Configure the Button

• btnText Button text
• btnSize Button size
• btnShape Button shape
• btnPlain Whether the button is outlined
• navigateUrl Page to navigate to

<template>
    <hy-empty
        btnText="Go Shopping"
        btnSize="mini"
        btnShape="circle"
        btnPlain
        navigateUrl="/pages/abc/Index"
    ></hy-empty>
</template>

Configure the Prompt Text

• desSize Prompt text size
• desColor Prompt text color

<template>
    <hy-empty desColor="red" desSize="10px"></hy-empty>
</template>

Custom Slots

<template>
    <hy-empty>
        <template #description>Custom description content</template>
    </hy-empty>

    <hy-empty>
        <template>Custom default slot</template>
    </hy-empty>
</template>

API

Empty Props

Parameter	Description	Type	Default
show	Whether to show the component	boolean	true
mode	Empty state content	string	content
imageUrl	Empty state icon image	string	-
zIndex	Component z-index	number	889
width	Image width, numbers default to px unit	string|number	240px
height	Image height, numbers default to px unit	string|number	240px
description	Prompt message	string	No data
desSize	Prompt message size, numbers default to px unit	string|number	15
desColor	Prompt message color	string	-
imgMargin	Icon image margin	string	-
button	Collection of button properties, displayed when text has a value, see Button API	HyButtonProps	-
navigateUrl	Navigation URL	string	-
customStyle	Custom external style of the input box	CSSProperties	-
customClass	Custom external class name	string	-

Events

Event Name	Description	Callback Parameters
click	Function executed when the button is clicked	-

Slots

Slot Name	Description	Accepted Value
default	Default slot	-
description	Custom bottom description	-

CSS Variables

Variable Name	Description	Default
--hy-empty-description-width	Description text width	70%
--hy-empty-button-margin-top	Button top margin	100rpx
--hy-empty-description-color	Description text color	Follows --hy-text-color--grey

12:33