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

<template>
  <Measure
      v-for="measure in list.concat(baseLines)"
      :key="measure.id"
      :data="measure"
      @change-points="points => changePoints(measure, points)"
      @blur="() => active = active === measure ? null : active"
      @focus="() => active = measure"
  />

  <div ref="menu" @touchstart.stop class="action-menus">
    <ActionMenus
        v-if="active"
        :menus="activeActionMenus"
        dire="row"
    />
  </div>
</template>

<script setup lang="ts">
import { list, MeasureAtom } from '@/store/measure'
import { baseLines } from '@/store/baseLine'
import Measure from './measure.vue'
import {ref} from "vue";
import ActionsPanel from "@/views/scene/covers/actions.vue";
import {customMap} from "@/hook";
import ActionMenus from "@/components/group-button/index.vue";
import * as process from "process";

const active = ref<MeasureAtom>()
const getStore = (item: MeasureAtom) =>
  ~list.value.indexOf(item)
    ? list.value
    : ~baseLines.value.indexOf(item)
      ? baseLines.value
      : null
const activeActionMenus = [
  {
    key: "delete",
    icon: "del",
    text: "删除",
    color: "#FF4D4F",
    iconColor: "#fff",
    onClick() {
      console.log('aa')
      const store = getStore(active.value)
      if (store) {
        store.splice(store.indexOf(active.value), 1)
      }
      active.value = null
    }
  }
]

const changePoints = (measure, points) => {
  measure.points = points.map(point => ({...point}))
}
</script>

<style scoped>

.action-menus {
  position: absolute;
  bottom: var(--boundMargin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 2;
  .menus {
    position: static;
  }
}
</style>