t-empty

Empty 空状态

组件介绍

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

平台兼容

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

基础用法

vue

<template>
  <view class="container">
    <!-- 默认空状态 -->
    <t-empty class="mb-40"></t-empty>
    
    <!-- 搜索无结果 -->
    <t-empty mode="search" title="搜索无结果" descr="没有找到相关内容" class="mb-40"></t-empty>
    
    <!-- 网络错误 -->
    <t-empty mode="network" title="网络错误" descr="请检查网络连接后重试" class="mb-40"></t-empty>
    
    <!-- 自定义图片 -->
    <t-empty src="https://example.com/empty.png" title="自定义空状态" descr="这是一个自定义的空状态页面" class="mb-40"></t-empty>
    
    <!-- 固定在页面中心 -->
    <t-empty mode="address" title="暂无地址" descr="请添加收货地址" isFixed></t-empty>
  </view>
</template>

<style scoped>
.container {
  padding: 40rpx;
  min-height: 800rpx;
}

.mb-40 {
  margin-bottom: 40rpx;
}
</style>

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

Events

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

Slots

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

t-empty ​

组件介绍 ​

平台兼容 ​

基础用法 ​

Props ​

Events ​

Slots ​

t-empty

组件介绍

平台兼容

基础用法

Props

Events

Slots