huarun/traceCodePackages/wigets/empty.vue

<template>
  <view class="empty-view">
    <image
      src="../static/images/empty.png"
      mode="scaleToFill"
      :style="{ width: size, height: heightSize }"
    />
    <text v-if="showText" class="tip" :style="{ color }">{{ text }}</text>
  </view>
</template>

<script>
export default {
  name: "EmptyView",
  props: {
    text: { type: String, default: "暂无数据" },
    showText: { type: Boolean, default: true },
    size: { type: String, default: "200rpx" },
    color: { type: String, default: "#b4c7f9" },
  },
  computed: {
    heightSize() {
      const s = this.size;
      if (typeof s === "number") {
        const v = s * (100 / 132);
        return v + "rpx";
      }
      const str = String(s || "").trim();
      const m = str.match(/^([0-9]+(?:\.[0-9]+)?)\s*(\D+)?$/);
      if (!m) return str;
      const num = parseFloat(m[1]);
      const unit = m[2] || "rpx";
      const v = num * (100 / 132);
      return v + unit;
    },
  },
};
</script>

<style scoped>
.empty-view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40rpx 0;
}
.tip {
  margin-top: 16rpx;
  font-size: 28rpx;
}
</style>