Empty 空状态

AuEmpty 为无内容区域提供图标、说明和操作位置，默认继承容器背景。

基础用法

还没有内容

添加第一个条目开始使用

<script setup>
import { ref } from 'vue';
import { AuButton, AuEmpty, AuTag, AuTransition } from 'aurora-plus';
const added = ref(false);
</script>
<template>
  <div class="empty-example">
    <AuTransition mode="out-in">
      <AuTag v-if="added" type="success" closable @close="added = false">示例条目</AuTag>
      <AuEmpty v-else title="还没有内容" description="添加第一个条目开始使用">
        <AuButton size="small" @click="added = true">添加条目</AuButton>
      </AuEmpty>
    </AuTransition>
  </div>
</template>
<style scoped>
.empty-example { width: 100%; }
</style>

Empty API

Attributes

属性	说明	类型	默认值
title	标题	string	暂无数据
description	补充说明	string	''
icon	图标组件	Component	null
size	尺寸：small / default	string	default

Slots

插槽名	说明
image	替换默认图标
title	标题
description	补充说明
default	操作区