refactor(projects): 地图插件页面布局重构

This commit is contained in:
Soybean 2021-11-11 00:28:21 +08:00
parent 6a692d4f99
commit 36e0e669fd
2 changed files with 5 additions and 15 deletions

View File

@ -1,22 +1,16 @@
<template>
<div ref="wrapRef" class="w-full h-full">
<div ref="domRef" class="dom-ref-height"></div>
</div>
<div ref="domRef"></div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useScriptTag, useElementSize } from '@vueuse/core';
import { ref, onMounted } from 'vue';
import { useScriptTag } 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!, {
@ -32,8 +26,4 @@ onMounted(() => {
renderBaiduMap();
});
</script>
<style scoped>
.dom-ref-height {
height: v-bind(domRefHeight);
}
</style>
<style scoped></style>

View File

@ -1,6 +1,6 @@
<template>
<div class="overflow-hidden">
<n-card title="地图插件" class="h-full shadow-sm rounded-16px">
<n-card title="地图插件" class="h-full shadow-sm rounded-16px" content-style="overflow:hidden">
<n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
<n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
<component :is="item.component" />