ebike-ui/ebike-maintenance/components/empty-component/empty-component.vue

<!-- components/empty/empty.vue -->
<template>
  <view
    class="empty-container"
    :style="{
      height: props.height,
    }"
  >
    <view class="empty-content">
      <!-- 图标 -->
      <view class="empty-icon" v-if="showIcon">
        <image :src="icon" mode="aspectFit" class="empty-image" />
      </view>

      <!-- 描述 -->
      <text class="empty-description">{{ description }}</text>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import staticIcon from "./static_icon.js";

const props = defineProps({
  // 空状态类型：'default' | 'error'
  type: {
    type: String,
    default: "default",
  },
  // 自定义图标地址
  icon: {
    type: String,
    default: staticIcon.base64Empty,
  },
  // 描述文案
  description: {
    type: String,
    default: "这里还没有任何内容",
  },
  // 是否显示图标
  showIcon: {
    type: Boolean,
    default: true,
  },
  // 高度
  height: {
    type: [String, Number],
    default: "100vh",
  },
});
</script>

<style lang="scss" scoped>
.empty-container {
  width: 100%;
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .empty-icon {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;

      .empty-image {
        width: 100%;
        height: 100%;
      }
    }

    .empty-description {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>