xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-23 12:06:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(projects): 腾讯地图容器高自适应

Browse Source
This commit is contained in:
Soybean 2021-11-10 00:44:28 +08:00
parent 3f02c215c5
commit d7054c599b
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/component/map/components/TencentMap.vue
View File

@ -1,16 +1,22 @@
<template> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { useScriptTag } from '@vueuse/core'; import { useScriptTag, useElementSize } from '@vueuse/core';
import { TENCENT_MAP_SDK_URL } from '@/settings'; import { TENCENT_MAP_SDK_URL } from '@/settings';
const { load } = useScriptTag(TENCENT_MAP_SDK_URL); const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
const wrapRef = ref<HTMLDivElement | null>(null);
const domRef = ref<HTMLDivElement | null>(null); const domRef = ref<HTMLDivElement | null>(null);
const { height: wrapRefHeight } = useElementSize(wrapRef);
const domRefHeight = computed(() => `${wrapRefHeight.value}px`);
async function renderBaiduMap() { async function renderBaiduMap() {
await load(true); await load(true);
const map = new TMap.Map(domRef.value!, { const map = new TMap.Map(domRef.value!, {
@ -26,4 +32,8 @@ onMounted(() => {
renderBaiduMap(); renderBaiduMap();
}); });
</script> </script>
<style scoped></style> <style scoped>
.dom-ref-height {
height: v-bind(domRefHeight);
}
</style>