4dkankan-components/packages/components/advance/minmap/src/minmap.vue

<template>
  <Teleport v-if="props.show" to="[xui_min_map]">
    <div :ref="eleRef" :class="[ns.e('container')]">
      <slot />
    </div>
  </Teleport>
</template>
<script lang="ts" setup>
import { inject, ref, watchEffect } from 'vue'
import { useNamespace } from '@kankan-components/hooks'
import { minmapProps } from './minmap'

const ns = useNamespace('minmap')
const __sdk: any = inject('__sdk')
const eleRef = ref('minmap')

defineOptions({
  name: 'KkMinmap',
})

const show = (): void => {
  if (__sdk) {
    __sdk.MinMap.show()
  }
}
const hide = (): void => {
  if (__sdk) {
    __sdk.MinMap.hide()
  }
}

const props = defineProps(minmapProps)
watchEffect(() => {
  if (props.show) {
    document.querySelector('[xui_min_map]')?.classList.add(ns.b())
    show()
  } else {
    hide()
  }
})
// __sdk.use('MinMap', { theme: { camera_fillStyle: props.color } }).then(() => {
//   // loading.value = true
//   if (document.querySelector('[xui_min_map]')) {
//     document.querySelector('[xui_min_map]')?.classList.add(ns.b())
//   }
// })

defineExpose({
  ref: eleRef,
  show,
  hide,
})
</script>