Skip to content

Empty (空状态)

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

支持平台

安卓ios鸿蒙web微信小程序

示例代码

html
<template>
	<t-page>
		<t-card main-class='m-30' title="Empty 空白页占位"
			sub-title="
空白页占位组件用于在应用中显示一个空状态页面,通常在没有数据或内容可显示时使用。它的功能亮点包括:提供默认或自定义的占位图像,支持自定义标题和描述文本,以及可固定在页面中心的位置。使用场景包括:在列表为空、搜索无结果、网络请求失败等情况下,向用户传达当前状态并提供指引。"></t-card>
		<t-empty title="暂无数据" descr="功能开发中,敬请期待!"></t-empty>
		<t-empty mode="news" title="暂无新消息" main-class="mt-60"></t-empty>
		<t-empty mode="address" title="暂无地址信息" main-class="mt-60"></t-empty>
		<t-empty mode="network" title="请检查网络设置!" main-class="mt-60"></t-empty>
		<t-empty mode="order" title="暂无订单" main-class="mt-60"></t-empty>
		<t-empty mode="search" title="没有找到搜索的内容额~" main-class="mt-60"></t-empty>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

属性

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡(Tui统一写法处理事件冒泡)false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径,如果为空则响应点击事件,如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
modeStringorder显示模式order: 暂无订单
news: 暂无新消息
address: 暂无地址信息
network: 请检查网络设置
search: 没有找到搜索的内容额
imageClassString``图片样式
titleClassString``标题的样式
descrClassString``描述的文本的样式
isFixedBooleanfalse是否固定
srcString``替换默认图的图片地址
titleString``标题样式
descrString``描述文本