feat:修改Empty组件

components/Empty/Empty.vue

@@ -4,46 +4,40 @@
   </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 setup>
+import { ref, onMounted, computed, nextTick } from "vue";
+
+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();
+  query
+    .select(".empty-container")
+    .boundingClientRect((data) => {
+      if (data) {
+        topHeight.value = data.top; // 记录到顶部的距离
+      }
+    })
+    .exec();
 };
+
+onMounted(() => {
+  nextTick(() => {
+    getElementTopDistance();
+  });
+});
 </script>
 
 <style scoped lang="less">