From d7054c599b1ce59a123667443863a8054ba19a90 Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Wed, 10 Nov 2021 00:44:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E8=85=BE=E8=AE=AF=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E5=AE=B9=E5=99=A8=E9=AB=98=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/map/components/TencentMap.vue    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/views/component/map/components/TencentMap.vue b/src/views/component/map/components/TencentMap.vue
index 348166b4..8d6ef850 100644
--- a/src/views/component/map/components/TencentMap.vue
+++ b/src/views/component/map/components/TencentMap.vue
@@ -1,16 +1,22 @@
 <template>
-  <div ref="domRef" class="w-full max-h-480px"></div>
+  <div ref="wrapRef" class="w-full h-full">
+    <div ref="domRef" class="dom-ref-height"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useScriptTag } from '@vueuse/core';
+import { ref, computed, onMounted } from 'vue';
+import { useScriptTag, useElementSize } from '@vueuse/core';
 import { TENCENT_MAP_SDK_URL } from '@/settings';
 
 const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
 
+const wrapRef = ref<HTMLDivElement | null>(null);
 const domRef = ref<HTMLDivElement | null>(null);
 
+const { height: wrapRefHeight } = useElementSize(wrapRef);
+const domRefHeight = computed(() => `${wrapRefHeight.value}px`);
+
 async function renderBaiduMap() {
   await load(true);
   const map = new TMap.Map(domRef.value!, {
@@ -26,4 +32,8 @@ onMounted(() => {
   renderBaiduMap();
 });
 </script>
-<style scoped></style>
+<style scoped>
+.dom-ref-height {
+  height: v-bind(domRefHeight);
+}
+</style>