空状态

TuiEmpty 用于在列表、容器或页面没有内容时显示占位提示。它通常包含一个图标、一段描述性文字，并且支持添加操作按钮以引导用户进行下一步操作。

此组件也被 TuiSelect、TuiTree 等组件内部复用，用于展示无匹配数据时的状态。

基础用法

最简单的用法，直接使用 <TuiEmpty />。默认显示一个警告图标和“暂无内容”提示。

<template>
  <div class="demo-box">
    <TuiEmpty />
  </div>
</template>

自定义内容

可以通过 icon 属性自定义图标，通过 text 属性自定义提示文案。

<template>
  <div class="demo-box">
    <TuiEmpty icon="tui-icon ti-star" />
    
    <TuiEmpty text="购物车是空的" />
  </div>
</template>

边框外观

添加 bordered 属性可以给组件增加边框和内边距。这种样式通常用于卡片内部或下拉菜单中，使空状态区域更加独立和明显。

<template>
  <div style="width: 300px;">
    <TuiEmpty bordered text="暂无数据" />
  </div>
</template>

附加操作

当需要引导用户摆脱空状态（例如：刷新、重试、去添加）时，可以通过 showButton 属性开启底部按钮，并配置按钮的文本和点击事件。

<script setup>
const handleRetry = () => {
  console.log('点击了重试按钮')
}
</script>

<template>
  <TuiEmpty 
    bordered 
    showButton 
    buttonText="刷新重试" 
    buttonType="primary"
    :buttonClick="handleRetry" 
  />
</template>

尺寸

除了默认尺寸外，还支持default，small 和 large 三种尺寸，以适应不同的布局空间。

• small: 适用于狭小的容器，如 Select 下拉框、侧边栏。
• large: 适用于整页空状态。

<template>
  <div class="row">
    <TuiEmpty size="small" bordered />
    
    <TuiEmpty size="large" bordered />
  </div>
</template>

API 参考

Props

属性名	说明	类型	默认值
text	提示文字内容	String	'暂无内容'
icon	图标类名	String	'tui-icon ti-alert-circle'
bordered	是否显示边框和背景	Boolean	false
size	尺寸，可选 null, 'small', 'large'	String	null
showButton	是否显示底部操作按钮	Boolean	false
buttonText	按钮文字	String	'返回'
buttonType	按钮类型，可选 'default', 'primary', 'danger' 等	String	'default'
buttonClick	按钮点击的回调函数	Function	—