Empty 空状态 - Vant 4
📭 Empty 空状态
🎯 介绍
想象一下，当用户满怀期待地打开一个页面，却发现空空如也时的失落感... 😔 别让用户独自面对这种尴尬！Empty 空状态组件就像一个贴心的朋友，在没有内容的时候温柔地告诉用户："嘿，这里暂时还没有内容，但别担心，我们正在努力！"
它不仅仅是一个简单的占位符，更是用户体验的守护者。通过可爱的插画、温馨的文字提示，甚至是引导用户下一步操作的按钮，Empty 组件让"空"变得不再空虚，而是充满了可能性！✨
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from'vue'; import { Empty } from'vant'; const app = createApp(); app.use(Empty);🎯 代码演示
🔧 基础用法
最简单的空状态就像一张白纸，简洁而优雅。默认的 Empty 组件会显示一个通用的空状态图标和描述，适用于大多数场景。
🖼️ 图片类型
Empty 组件就像一个多才多艺的演员，内置了多种"表情包"！根据不同的场景，它可以变身为：
- 🔍 search - 搜索无结果时的迷茫脸
- 🌐 network - 网络异常时的断线脸
- ❌ error - 出错时的抱歉脸
- 📋 default - 默认的淡定脸
📏 自定义大小
有时候空状态图片太大会显得突兀，太小又不够醒目。别担心！通过 image-size 属性，你可以像调节音量一样轻松调节图片大小，找到最合适的尺寸。
想要更精确的控制？将 image-size 设置为数组格式，就能分别设置宽度和高度，就像给图片量身定制一套合身的衣服！
🎨 自定义图片
标准图片满足不了你的创意需求？没问题！Empty 组件支持使用任何你喜欢的图片 URL，让你的空状态页面独一无二。也许是你家的萌宠，也许是公司的吉祥物，发挥你的想象力吧！
🎪 底部内容
空状态不应该是终点，而应该是新的起点！通过默认插槽，你可以在 Empty 组件下方添加任何内容 —— 一个"重新加载"按钮、一段鼓励的话语，或者是引导用户进行其他操作的链接。让用户知道下一步该做什么！
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image | 图片类型，可选值为 error``network``search，支持传入图片 URL | string | default |
| image-size | 图片大小，默认单位为 px | *number | string |
| description | 图片下方的描述文字 | string | - |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义底部内容 |
| image | 自定义图标 |
| description | 自定义描述文字 |
类型定义
组件导出以下类型定义：
importtype { EmptyProps } from'vant';主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-empty-padding | var(--van-padding-xl) 0 | - |
| --van-empty-image-size | 160px | - |
| --van-empty-description-margin-top | var(--van-padding-md) | - |
| --van-empty-description-padding | 0 60px | - |
| --van-empty-description-color | var(--van-text-color-2) | - |
| --van-empty-description-font-size | var(--van-font-size-md) | - |
| --van-empty-description-line-height | var(--van-line-height-md) | - |
| --van-empty-bottom-margin-top | 24px | - |
🔗 相关文档
在构建完整的用户体验时，Empty 组件经常与这些小伙伴们一起出现，它们各司其职，共同打造流畅的用户旅程：
- Loading 加载 - Empty 的好搭档，在数据加载时先出场暖场
- Skeleton 骨架屏 - 另一个加载状态的选择，让等待变得不那么无聊
- List 列表 - 当列表有数据时的展示组件，与 Empty 形成完美对比
- Search 搜索 - 搜索无结果时，Empty 组件是最佳的安慰者
- Result 结果页 - 处理更复杂的状态反馈，Empty 的升级版
- NoticeBar 通知栏 - 可以配合 Empty 提供额外的提示信息
- Button 按钮 - 在 Empty 底部放置操作按钮，引导用户下一步行动
- Image 图片 - 自定义 Empty 图片时的好帮手
- Icon 图标 - 为 Empty 状态添加更多视觉元素