kailin_mp/components/Empty/Empty.vue

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

<script setup>
import { ref, onMounted, computed, nextTick, getCurrentInstance } from "vue";

const { ctx } = getCurrentInstance();

const props = defineProps({
  text: {
    type: String,
    default: "暂无数据", // 默认文字
  },
});

const topHeight = ref(0); // 到顶部的距离

// 计算动态的容器高度
const containerHeight = computed(() => {
  return `calc(100vh - ${topHeight.value}px)`;
});

const getElementTopDistance = () => {
  const query = uni.createSelectorQuery().in(ctx);
  query
    .select(".empty-container")
    .boundingClientRect((data) => {
      if (data) {
        topHeight.value = data.top; // 记录到顶部的距离
      }
    })
    .exec();
};

onMounted(() => {
  nextTick(() => {
    getElementTopDistance();
  });
});
</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>