空状态组件

说明： 空状态组件用于在页面无数据或内容为空时展示的占位组件，提供友好的用户提示，避免出现空白页面影响用户体验。该组件适用于列表为空、搜索结果为空等多种场景。

版本说明

时间	修改人	备注
2025-04-23	YG	初始化文档

组件效果

组件参数

参数名	类型	默认值	必填	说明
text	String	'暂无数据'	否	空状态提示文本
image	String	https://pro-core.ali-cache.com/saas/iwxapi/images/common/bcg-empty.png	否	空状态图片地址

组件使用

1. 全局引入：

import { createSSRApp } from "vue";
import App from "./App.vue";
import nEmptyData from "@/components/empty-data/index.vue"

export function createApp() {
    const app = createSSRApp(App);
    app.component('n-empty-data', nEmptyData)
    return {
        app
    }
}

页面中直接使用：

<template>
  <empty-data></empty-data>
</template>

2. 在页面中引入：

<template>
  <empty-data text="暂无订单数据"></empty-data>
</template>

<script setup>
import EmptyData from '@/components/empty-data/index.vue';
</script>