traffic-laser/src/views/scene/covers/basePoints.vue

<template>
  <BasePoint
    v-for="point in basePoints"
    :key="point.id"
    :pos="point.pos"
    @change-pos="(pos) => (point.pos = pos)"
    :active="customMap.activeBasePoint === point"
    @blur="
      () =>
        (customMap.activeBasePoint =
          customMap.activeBasePoint === point ? null : customMap.activeBasePoint)
    "
    @focus="() => (customMap.activeBasePoint = point)"
  />

  <!--  <ActionsPanel :menus="activeActionMenus" v-if="active" />-->
  <div ref="menu" @touchstart.stop class="action-menus" v-if="!trackBaseIng">
    <ActionMenus
      v-if="drawstatus !== DrawStatus.ing && customMap.activeBasePoint"
      :menus="activeActionMenus"
      :active-key="customMap.activeBasePoint"
      dire="row"
    />
  </div>
</template>

<script setup lang="ts">
import { basePoints } from "@/store/basePoint";
import BasePoint from "./basePoint.vue";
import { customMap, useSDK } from "@/hook";
import ActionMenus from "@/components/group-button/index.vue";
import { DrawStatus, drawstatus, trackBaseIng } from "../fixManage";

const activeActionMenus = [
  {
    key: "delete",
    icon: "del",
    text: "删除",
    color: "#FF4D4F",
    iconColor: "#fff",
    onClick() {
      const index = basePoints.value.indexOf(customMap.activeBasePoint);
      console.log(index);
      if (~index) {
        basePoints.value.splice(index, 1);
        customMap.activeBasePoint = null;
      }
    },
  },
];
</script>

<style scoped lang="scss">
.action-menus {
  position: absolute;
  bottom: var(--boundMargin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 2;

  .menus {
    position: static;
  }
}
</style>