Empty (空状态)

空白页占位组件用于在应用中显示一个空状态页面，通常在没有数据或内容可显示时使用。它的功能亮点包括：提供默认或自定义的占位图像，支持自定义标题和描述文本，以及可固定在页面中心的位置。使用场景包括：在列表为空、搜索无结果、网络请求失败等情况下，向用户传达当前状态并提供指引。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page>
		<t-card main-class='m-30' title="Empty 空白页占位"
			sub-title="空白页占位组件，用于应用无内容展示场景，如列表为空、搜索无果或请求失败时。可设自定义图像、标题及描述，固定于页面中心，向用户传达状态并指引 。"></t-card>
		<t-empty v-if="area==1" title="暂无数据" descr="功能开发中，敬请期待！"></t-empty>
		<t-empty v-if="area==2" mode="news" title="暂无新消息" main-class="mt-60"></t-empty>
		<t-empty v-if="area==3" mode="address" title="暂无地址信息" main-class="mt-60"></t-empty>
		<t-empty v-if="area==4" mode="network" title="请检查网络设置！" main-class="mt-60"></t-empty>
		<t-empty v-if="area==5" mode="order" title="暂无订单" main-class="mt-60"></t-empty>
		<t-empty v-if="area==6" mode="search" title="没有找到搜索的内容额~" main-class="mt-60"></t-empty>
		<t-row main-class="fww fjcb tdb tdp tdm tdr mt-100">
			<t-button type="primary" main-class="w-45% mb-30" @click="area=1">暂无数据</t-button>
			<t-button type="primary" main-class="w-45% mb-30" @click="area=2">暂无新消息</t-button>
			<t-button type="primary" main-class="w-45% mb-30" @click="area=3">暂无地址信息</t-button>
			<t-button type="primary" main-class="w-45% mb-30" @click="area=4">请检查网络</t-button>
			<t-button type="primary" main-class="w-45% mb-30" @click="area=5">暂无订单</t-button>
			<t-button type="primary" main-class="w-45% mb-30" @click="area=6">无搜索搜索</t-button>
		</t-row>
	</t-page>
</template>

<script setup>
	const area = ref<number>(1)
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
mode	String	order	显示模式	order: 暂无订单 news: 暂无新消息 address: 暂无地址信息 network: 请检查网络设置 search: 没有找到搜索的内容额
src	String	``	替换默认图的图片地址
imageClass	String	``	图片样式
title	String	``	标题样式
titleClass	String	``	标题的样式
descr	String	``	描述文本
descrClass	String	``	描述的文本的样式
isFixed	Boolean	false	是否固定