更新记录

1.0.0（2025-10-29） 下载此版本

初始功能

平台兼容性

uni-app(4.66)

liaction-status

一个功能丰富的状态展示组件，支持加载中、错误、空数据等多种状态的灵活配置和自定义。

特性

• 支持多种预设状态：loading（加载中）、error（错误）、empty（无数据）
• 支持自定义状态和样式
• 灵活的配置选项，可自定义文本、图标、颜色等
• 支持自动高度或固定高度显示
• 提供按钮交互功能
• 完全支持插槽自定义内容

安装

通过 uni_modules 直接导入组件。

使用示例

基础使用

<template>
  <view>
    <!-- 加载中状态 -->
    <liaction-status status="loading" />

    <!-- 错误状态，带按钮 -->
    <liaction-status 
      status="error" 
      showButton 
      @button-click="handleErrorReload"
    />

    <!-- 空数据状态，自定义文本和图标 -->
    <liaction-status 
      status="empty" 
      text="暂无记录" 
      iconType="document"
    />

    <!-- 自定义错误状态图标 -->
    <liaction-status status="error">
      <template #error-icon>
        <view class="custom-error-icon" style="width: 48px; height: 48px; background-color: #FF6B3B; border-radius: 8px;">
          <text style="color: white; font-size: 28px;">!</text>
        </view>
      </template>
    </liaction-status>

    <!-- 自定义空状态图标 -->
    <liaction-status status="empty">
      <template #empty-icon>
        <view class="custom-empty-icon" style="width: 48px; height: 48px; background-color: #C9CDD4; border-radius: 8px;">
          <text style="color: white; font-size: 28px;">📄</text>
        </view>
      </template>
    </liaction-status>
  </view>
</template>

<script>
export default {
  methods: {
    handleErrorReload() {
      console.log('重新加载数据');
      // 执行重新加载操作
    }
  }
}
</script>

自定义状态

<template>
  <view>
    <!-- 自定义状态 -->
    <liaction-status 
      status="success" 
      :customSlots="customSlots"
    >
      <!-- 自定义成功状态内容 -->
      <template #success>
        <uni-icons type="success-circle" size="48" color="#4CD964" />
        <text class="success-text">操作成功</text>
        <button type="primary" size="mini" @click="handleSuccess">确定</button>
      </template>
    </liaction-status>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customSlots: [
        {
          name: 'success'
        }
      ]
    }
  },
  methods: {
    handleSuccess() {
      console.log('操作成功确认');
    }
  }
}
</script>

属性说明

事件说明

插槽说明