traffic-laser/src/sdk/carry/inject/atom.vue

<template>
  <div class="inject-com" :style="style" v-if="style && pos">
    <!-- <div class="test">{{pos}}</div> -->
    <component
      :is="custComponent"
      v-bind="{ ...custProps, pos, platform: sdk.isMap ? 'map' : 'scene' }"
    ></component>
  </div>
</template>

<script setup lang="ts">
import { laserKey } from '../constant'
import { inject, computed, ref, watch } from 'vue'
import { Pos } from '../../index'

const props = defineProps<{
  pos: Pos
  custComponent: any
  custProps: any
}>()

const screen = ref<Pos>(null)
const sdk = inject(laserKey)
const style = computed(
  () =>
    screen.value && {
      left: screen.value.x + 'px',
      top: screen.value.y + 'px'
    }
)

const updatePos = () => {
  if (props.pos) {
    const data = sdk.getScreenByPoint(props.pos)
    screen.value = data.trueSide ? data.pos : null
  }
}

sdk.on('posChange', updatePos)
watch(props, updatePos)
updatePos()
sdk.isMap && sdk.on('mapZoomLevelChange', updatePos)
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>