# t-empty

Empty 空状态

t-empty 组件介绍

空白页占位组件，用于在应用中显示一个空状态页面，通常在没有数据或内容可显示时使用。它提供默认或自定义的占位图像，支持自定义标题和描述文本，以及可固定在页面中心的位置。

t-empty 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-empty 基础用法

基础用法参考 demo/empty/empty.uvue，支持多种占位模式切换。

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

<script setup>
	import { ref } from 'vue'
	const area = ref(1)
</script>

t-empty Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	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	是否固定	true, false

t-empty Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-empty Slots

插槽名	说明
default	自定义内容插槽，用于替换默认的空状态内容