Empty 空状态
用于空数据、无结果等场景的占位提示。
基础用法
description
自定义图片
通过 image 设置图片地址。
No Data
图片尺寸
通过 image-size 控制图片宽度。
No Data
空状态类型
通过 type 可选择内置的 5 种空状态类型：default、pie、bar、search、search2。
default 类型
pie 类型
bar 类型
search 类型
search2 类型
底部内容
使用默认插槽在底部插入内容。
No Data
自定义样式
可通过 css/scss 修改全局或局部变量。组件提供一组颜色变量：--u-empty-fill-primary-color 、--u-empty-fill-bg-color 、--u-empty-fill-chart-color。例如 :root { --u-empty-fill-chart-color: red; }。
默认变量
| 变量 | 颜色 |
|---|---|
| --u-empty-fill-primary-color | var(--u-color-primary) 主题色 |
| --u-empty-fill-bg-color | var(--u-color-white)背景色 |
| --u-empty-fill-chart-color | #D489FF 图表颜色 |
API
属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image | 图片地址 | string | '' |
| image-size | 图片宽度 | number | — |
| description | 描述文案 | string | '' |
| type | 空状态类型，可选 default/pie/bar/search/search2 | string | default |
插槽
| 名称 | 说明 |
|---|---|
| default | 底部区域内容 |
| image | 自定义图片区域 |
| description | 自定义描述区域 |