更新记录

1.2.0（2026-04-20） 下载此版本

改用css方式重写默认图

1.1.1（2022-09-29） 下载此版本

位置: translate(-50%, -40%) 改为 translate(-50%, -50%)

1.1.0（2022-07-21） 下载此版本

增加参数 top：距离顶部高度

平台兼容性

uni-app(4.54)

zero-empty

zero-empty 是一个用于空数据、缺省状态展示的轻量组件。

当前版本默认使用内置 CSS 插画，不再依赖组件内置静态空图；如果业务需要，也可以继续通过 emptyImg 传入自定义图片覆盖默认插画。

特性

• 默认内置 CSS 空数据插画
• 支持通过 themeColor 跟随项目主题色
• 支持通过 emptyImg 替换为业务自定义图片
• 支持提示文案和操作按钮
• 兼容 easycom，导入 uni_modules 后可直接使用

使用前说明

组件本身使用绝对定位居中展示，建议父容器提供明确高度，并设置 position: relative。

<template>
  <view class="container">
    <zero-empty v-if="isEmpty"></zero-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isEmpty: true
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  min-height: 600rpx;
}
</style>

基础用法

<zero-empty v-if="isEmpty"></zero-empty>

跟随主题色

<zero-empty
  v-if="isEmpty"
  themeColor="#13C2A3"
  emptyTips="当前还没有内容"
></zero-empty>

说明：

• themeColor 控制默认 CSS 插画的主色
• 如果同时展示按钮，且未传 btnColor，按钮会跟随 themeColor

自定义图片

<zero-empty
  v-if="isEmpty"
  emptyImg="/static/custom-empty.png"
  :emptyImgSize="320"
  emptyTips="还没有内容，先去创建第一条吧"
></zero-empty>

说明：

• 传入 emptyImg 后，将优先展示自定义图片
• emptyImgSize 仍然生效，用于控制图片展示宽度

带按钮

<template>
  <zero-empty
    v-if="isEmpty"
    emptyTips="累了，休息一会呗！"
    themeColor="#0396FF"
    :needBtn="true"
    btnText="返回"
    @click="handleClick"
  ></zero-empty>
</template>

<script>
export default {
  data() {
    return {
      isEmpty: true
    };
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: "点击了按钮",
        icon: "none"
      });
    }
  }
};
</script>

参数说明

事件说明

建议用法

• 通用项目：直接使用默认 CSS 插画，并传 themeColor
• 品牌或业务场景：传入 emptyImg 使用自定义图片
• 操作按钮建议只保留一个主操作，避免空状态下出现多余动作

插件预览

预览的小程序不一定会立即同步当前代码，请以仓库代码为准。