空状态

v-empty-state 组件用于表示某个列表是空的或者搜索结果是空的。

TIP

此特性在 v3.6.0 引入。

使用

一个基本的空状态由一个标题和一个描述组成。它还可以包括一个图标和一个按钮。

API

组件	描述
v-empty-state	主要组件

指南

v-empty-state 组件用于指示页面或列表为空，或未找到搜索结果。它可以在各种情境下使用，例如项目列表、搜索结果页面或没有内容的页面。

属性

v-empty-state 组件具有许多属性，可以让你定制其外观和行为。

内容

有三个主要的属性用于配置文本内容，title， subtitle 和 text。

媒体

在空状态中添加一个图标或图片，以帮助传达其目的。

行为

在空状态中添加一个按钮，以帮助用户采取行动。

插槽

v-empty-state 组件具有许多插槽，使得定制默认行为变得很容易。

插槽	描述
1. Default	默认插槽
2. Media	media 插槽用于放置图片或图标。
3. Title	主标题插槽
4. Subtitle	副标题插槽
5. Text	文本插槽
6. Actions	动作插槽

默认值

默认插槽位于文本和动作之间。

标题

使用工具类自定义标题的字体大小很简单。

自定义操作

默认情况下，通过配置只显示一个操作。要添加更多选项，请使用 actions 插槽。

示例

以下是一系列示例，演示了 v-empty-state 组件的更高级和实际应用。

太空狗

这个例子演示了如何使用 v-empty-state 组件来创建一个有趣和引人入胜的空状态。

太空猫

这个例子利用了诸如 v-tabs 和 v-window 等组件来创建一个更复杂的空状态。