GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

2
src/views/component/map/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="overflow-hidden"> <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-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"> <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
<component :is="item.component" /> <component :is="item.component" />