更新记录

1.0.0（2026-05-19） 下载此版本

初始版本 支持四种状态展示 内置图标资源 支持自定义文字配置

平台兼容性

uni-app(3.8.1)

uni-app x(3.8.1)

mevermore-state

一个优雅的状态视图组件，用于在 UniApp 项目中展示加载中、空数据、错误和网络异常等状态。

功能特性

• 支持四种状态展示：加载中、空数据、错误、网络异常
• 内置精美图标资源，无需额外引入
• 支持自定义提示文字和按钮文本
• 优雅的卡片式布局设计
• 平滑的动画效果

安装

# 通过 npm 安装
npm install mevermore-state --save

# 或直接复制组件到项目中

使用示例

基本使用

<template>
  <view>
    <mevermore-state :state="currentState" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentState: 'loading' // loading, empty, error, network, content
    };
  }
};
</script>

自定义文字

<mevermore-state
  :state="currentState"
  loading-text="正在加载..."
  empty-text="暂无数据，请稍后再试"
  empty-button-text="点击刷新"
  error-text="加载失败"
  network-text="网络连接失败，请检查网络"
  retry-button-text="重新加载"
  @emptyclick="handleEmptyClick"
  @retry="handleRetry"
/>

API

Props

Events

状态说明

项目结构

mevermore-state/
├── components/
│   └── mevermore-state/
│       └── mevermore-state.vue  # 主组件
├── static/
│   ├── empty.png                # 空状态图标
│   └── loading.svg              # 加载动画图标
├── package.json
├── readme.md
└── changelog.md

示例代码

<template>
  <view>
    <mevermore-state
      :state="state"
      :min-height="500"
      loading-text="努力加载中..."
      empty-text="暂无相关数据"
      empty-button-text="去看看其他"
      error-text="哎呀，出错了"
      network-text="网络不给力，请检查网络连接"
      retry-button-text="再试一次"
      @retry="onRetry"
      @emptyclick="onEmptyClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      state: 'loading'
    };
  },
  methods: {
    onRetry() {
      // 重试逻辑
      this.state = 'loading';
      // 重新加载数据...
    },
    onEmptyClick() {
      // 空状态按钮点击逻辑
      console.log('空状态按钮被点击');
    }
  }
};
</script>

关于图片路径

组件中的图片使用绝对路径 /uni_modules/mevermore-state/static/，这是因为：

1. 确保路径解析正确：在 UniApp 中，相对路径可能会因为组件被引用的位置不同而导致解析错误
2. 兼容 H5 和小程序：不同平台对相对路径的处理方式不同，绝对路径更可靠
3. 便于维护：统一的资源路径管理更易于维护和迁移

如果需要使用相对路径，需要根据组件实际被引用的位置调整路径，但不建议这样做，因为可能导致在不同页面引用时出现资源找不到的问题。

样式说明

• 组件使用卡片式布局，带有圆角和阴影效果
• 图标区域使用渐变背景，不同状态有不同的配色方案
• 加载图标有旋转动画效果
• 按钮点击有缩放反馈效果

版本历史

v1.0.0

• 初始版本
• 支持四种状态展示
• 内置图标资源
• 支持自定义文字配置

许可证

MIT License