Empty 空状态

空状态时的占位提示。

代码演示

基础用法

通过img来展示空状态时显示的占位图。

<hd-empty :img="img"></hd-empty>

标题与副标题

通过title属性来展示空状态下的主标题，默认值是标题；通过subTitle属性来展示空状态下的副标题，默认值是副标题。

<hd-empty title="描述主标题" subTitle="描述副标题"></hd-empty>

内容距离顶部的距离

通过marginTop属性控制空状态占位内容距离顶部的距离。

<hd-empty marginTop="10" title="描述主标题"></hd-empty>

操作按钮

通过operation属性控制空状态栏是否显示操作按钮，operation为操作按钮文案内容，点击按钮时触发click事件。

<hd-empty operation="按钮文案" @click="onClick"></hd-empty>

function onClick() {
  console.log('点击了按钮')
}

Props

Name	Description	Type	Required	Default
img	空状态图片	String	false	-
title	空状态标题	String	false	默认值是：标题
subTitle	空状态子标题	String	false	默认值是：子标题
operation	操作名称（传入即显示按钮）	String	false	-
marginTop	是否为链接	String	false	默认值是：200rpx

Events

Event Name	Description	Parameters
click	操作按钮被点击时触发	-