<template>
  <div class="menu-wrap" :id="`menu-${menuId}`">
    <ul>
      <li v-for="item in menu" :key="item.id" @mousedown.stop="handleClick(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    menu: {
      //菜单项
      type: Array,
      default: () => {
        return [
          {
            id: 1,
            text: "删除元素",
            eventName: 'deleteshape',
          },
        ];
      },
    },
    menuId: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    deleteShape(){
      this.$emit('deleteShape')
    },
    handleClick(item){
      this.$emit(`${item.eventName}`)
    }
  },
};
</script>

<style scoped lang="scss">
.menu-wrap {
  position: fixed;
  display: none;
  z-index: 1000;
  ul {
    list-style: none;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #999999;
    li {
      cursor: pointer;
      width: 120px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-bottom: 1px solid #999999;
      &:last-child {
        margin-bottom: 0;
      }
      &:hover {
        background-color: rgba(153, 153, 153, 0.1);
      }
    }
  }
}
</style>
