Fes Design

Empty 空数据 ​

空数据时的占位提示。

组件注册 ​

js
import { FEmpty } from '@fesjs/fes-design';

app.use(FEmpty);

代码演示 ​

基础用法 ​

默认展示

play
<template>
    <FEmpty />
</template>

自定义图片 ​

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

play
<template>
    <FEmpty :image-src="url" description="自定义图片" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const url = ref('/images/empty.svg');
</script>

自定义图片大小 ​

通过设置 image-size 属性来自定义图片大小

play
<template>
    <FEmpty :image-style="{ width: '240px' }" description="暂无数据" />
</template>

下拉选项场景 ​

在其他组件中的应用

play
<template>
    <FSelect>
        <template #empty>
            <FEmpty image-style="width: 80px;" description="暂无数据" />
        </template>
    </FSelect>
</template>

<style scoped>
.fes-select {
    width: 200px;
}
</style>

自定义底部内容 ​

自定义底部插槽内容

play
<template>
    <FEmpty :image-src="url" image-style="width: 400px;" description="暂无数据">
        <FButton type="primary">退出登录</FButton>
    </FEmpty>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const url = ref('/images/empty.svg');
</script>

API ​

属性 Attributes ​

属性名描述类型默认值
imageSrcempty 组件的图像地址，优先级大于 soltstring-
imageStyleempty 组件的图像自定义样式CSSProperties-
descriptionempty 组件的描述信息，优先级大于 soltstring-

插槽 Slots ​

插槽名称描述
default作为底部内容的内容
image作为图像的内容
description作为描述的内容