前端组件库

Appearance

Return to top
On this page

PageEmpty 组件

组件介绍

PageEmpty 是一个空状态组件，用于在页面数据为空或加载失败时展示友好的提示信息。支持自定义图片、标题、描述和重试按钮。

示例：

智能体列表为空
您的智能体列表目前为空，若未创建智能体请到智能体配置内创建， 若已创建智能体可联系管理员检查权限设置
没有找到相关的数据
当前搜索没有匹配到任何结果，请检查输入或尝试其他关键词
加载失败
加载失败，请重试
知识库为空
请先创建知识库后，上传文件以便开始构建您的知识库
没有找到相关文件
当前搜索没有匹配到任何结果，请检查输入或尝试其他关键词
加载失败
加载失败，点击重试
<template>
  <div>
    <div class="site">
      <lz-page-empty :type="'1'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty1.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'2'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty2.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'3'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty3.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'4'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty4.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'5'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty1.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'3'" :text2="' '" :retry="'加载失败，点击重试'"  @onRetry="handleRetry"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty3.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
  </div>
</template>

<script setup lang="ts">

const handleRetry = () => {
  console.log('重试')
}

</script>

<style scoped lang="scss">
.site {
  padding: 20px;
  position: relative;
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
</style>

<template>
  <div>
    <div class="site">
      <lz-page-empty :type="'1'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty1.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'2'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty2.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'3'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty3.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'4'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty4.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'5'"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty1.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
    <div class="site">
      <lz-page-empty :type="'3'" :text2="' '" :retry="'加载失败，点击重试'"  @onRetry="handleRetry"><lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/empty3.svg" style="font-size: 312px;"/></lz-page-empty>
    </div>
  </div>
</template>

<script setup lang="ts">

const handleRetry = () => {
  console.log('重试')
}

</script>

<style scoped lang="scss">
.site {
  padding: 20px;
  position: relative;
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
</style>

属性 (Props)

属性名类型默认值说明
typestring''空状态类型，支持 1 到 5 的预定义类型
text1string''自定义标题文本，覆盖 type 的默认标题
text2string''自定义描述文本，覆盖 type 的默认描述
sizestring'312px'图片大小
retrystring''重试按钮文本，为空时不显示按钮

方法 (Methods)

方法名参数说明
handleRetry无点击重试按钮时触发

插槽 (Slots)

插槽名说明
默认插槽用于展示图片

事件 (Events)

事件名参数说明
onRetry无点击重试按钮时触发

样式 (Styles)

组件支持以下样式类：

  • .empty-box: 外层容器
  • .empty-title: 标题区域
  • .empty-desc: 描述区域
  • .retry-link: 重试按钮（需手动添加到样式文件中）