4dkankan-components/docs/examples/minmap/basic.vue

<script setup lang="ts">
import { onMounted, onUnmounted, provide, ref } from 'vue'
import { KkButton, KkMinmap } from 'kankan-components'

const loading = ref(false)
const mapShow = ref(false)
const minMap = ref(null)

onMounted(() => {
  const __win = window as any
  if (!__win.__sdk) {
    const __sdk = (__win.__sdk = new __win.KanKan({
      num: 'KJ-t-wOXfx2SDFy',
      server: '#DEMOSEVER#',
    }))
    provide('__sdk', __sdk)
    __sdk.Scene.on('ready', () => (loading.value = true))
    __sdk.use('MinMap').then(() => {
      mapShow.value = true
    })
    __sdk.mount('#scene').render()
  }
})
onUnmounted(() => {
  const __win = window as any
  if (__win.__sdk) {
    __win.__sdk = null
  }
})
</script>

<template>
  <div id="scene" class="scene">
    <div class="test-control">
      <kk-button @click="mapShow = true">打开小地图</kk-button>
      <kk-button type="primary" mr4 @click="mapShow = false"
        >关闭小地图</kk-button
      >
    </div>

    <Teleport v-if="loading" to=".kankan-plugins">
      <kk-minmap ref="minMap" :show="mapShow" />
    </Teleport>
  </div>
</template>
<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.scene {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
.test-control {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
</style>