Ver código fonte

feat(组件): 增加minmap小地图

gemercheung 2 anos atrás
pai
commit
7691c712ec

+ 1 - 0
packages/components/advance/index.ts

@@ -1,2 +1,3 @@
 export * from './tag'
 export * from './daikan'
+export * from './minmap'

+ 8 - 0
packages/components/advance/minmap/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@kankan-components/utils'
+import minmap from './src/minmap.vue'
+
+export const KkMinmap = withInstall(minmap)
+
+export default KkMinmap
+
+export * from './src/minmap'

+ 17 - 0
packages/components/advance/minmap/src/minmap.ts

@@ -0,0 +1,17 @@
+import { buildProps } from '@kankan-components/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export const minmapProps = buildProps({
+  show: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  color: {
+    type: String,
+    required: false,
+    default: '#ED5D18',
+  },
+} as const)
+
+export type MinmapProps = ExtractPropTypes<typeof minmapProps>

+ 24 - 0
packages/components/advance/minmap/src/minmap.vue

@@ -0,0 +1,24 @@
+<template>
+  <Teleport v-if="loading" to="[xui_min_map]">
+    <div :class="[ns.b()]">
+      <slot />
+    </div>
+  </Teleport>
+</template>
+<script lang="ts" setup>
+import { inject, ref } from 'vue'
+import { useNamespace } from '@kankan-components/hooks'
+
+const ns = useNamespace('minmap')
+
+const loading = ref(false)
+
+defineOptions({
+  name: 'KkMinmap',
+})
+
+const __sdk: any = inject('__sdk')
+__sdk.use('MinMap', { theme: { camera_fillStyle: '#ED5D18' } }).then(() => {
+  loading.value = true
+})
+</script>

+ 27 - 0
playground/src/pages/minmap.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { onMounted, inject, ref } from 'vue'
+import { KkMinmap } from '@kankan-components/components'
+
+import '@kankan-components/theme-chalk/src/index.scss'
+const __sdk: any = inject('__sdk')
+
+const loading = ref(false)
+
+onMounted(async () => {
+  __sdk.Scene.on('loaded', () => (loading.value = true))
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="scene">
+    <kk-minmap />
+  </div>
+</template>
+
+<style scoped>
+#scene {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

+ 4 - 0
playground/src/router.ts

@@ -20,6 +20,10 @@ export default createRouter({
             path: '/daikan2',
             component: () => import('./pages/daikan2.vue'),
         },
+        {
+            path: '/minmap',
+            component: () => import('./pages/minmap.vue'),
+        },
 
 
     ],