Empty 空状态

空状态时的占位提示。

基础用法

自定义图片

通过设置 image 属性传入图片 URL。

图片尺寸

通过 image-size 属性控制图片大小。

底部内容

使用默认插槽在底部插入内容。

自定义样式

现在您可以为空状态组件设置自定义样式。使用 css/scss 语言更改全局或局部颜色。我们设置了一些全局颜色变量:--el-empty-fill-color-0, --el-empty-fill-color-1, --el-empty-fill-color-2, ......, --el-empty-fill-color-9。您可以这样使用::root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }。但通常情况下,如果您想更改样式,则需要更改所有颜色,因为这些颜色是一个组合。

默认变量

变量色彩
--el-empty-fill-color-0var(--el-color-white)
--el-empty-fill-color-1#fcfcfd
--el-empty-fill-color-2#f8f9fb
--el-empty-fill-color-3#f7f8fc
--el-empty-fill-color-4#eeeff3
--el-empty-fill-color-5#edeef2
--el-empty-fill-color-6#e9ebef
--el-empty-fill-color-7#e5e7e9
--el-empty-fill-color-8#e0e3e9
--el-empty-fill-color-9#d5d7de

API

属性

名称描述类型默认值
空状态的图片 URL空状态的图片 URLstring''
空状态的图片尺寸 (宽度)空状态的图片尺寸 (宽度)number
description空状态的描述string''

插槽

名称描述
default作为底部内容的内容
空状态的图片 URL作为图片的内容
description作为描述的内容

来源

组件样式文档

贡献者