kailin_mp/components/Empty/Empty.vue

<template>
  <view class="empty-container" :style="{ height: containerHeight }">
    <text class="empty-text">{{ text }}</text>
  </view>
</template>

<script>
export default {
  name: "Empty",
  props: {
    text: {
      type: String,
      default: "暂无数据", // 默认文字
    },
  },
  data() {
    return {
      topHeight: 0, // 到顶部的距离
    };
  },
  computed: {
    // 计算动态的容器高度
    containerHeight() {
      return `calc(100vh - ${this.topHeight}px)`;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getElementTopDistance();
    });
  },
  methods: {
    getElementTopDistance() {
      let _this = this;
      const query = uni.createSelectorQuery().in(_this);
      query
        .select(".empty-container")
        .boundingClientRect((data) => {
          if (data) {
            this.topHeight = data.top; // 记录到顶部的距离
          }
        })
        .exec();
    },
  },
};
</script>

<style scoped lang="less">
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw; /* 占满屏幕宽度 */
  background-color: #f5f5f5;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.empty-text {
  color: #666;
  font-size: 16px;
}
</style>