<template>
  <div
    id="canvasMenu"
    class="menu-x"
    v-if="props.visible"
    :style="{ left: props.position.left + 'px', top: props.position.top + 'px' }"
  >
    <div class="menu-li" @click="props.setDefault">设为默认</div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, defineProps } from 'vue';

  const props = defineProps<{
    position: { left: number; top: number };
    visible: boolean;
    setDefault: () => unknown;
  }>();

  onMounted(() => {
    const contextMenu = document.querySelector('#canvasMenu');
    if (!contextMenu) return;
    contextMenu.addEventListener('contextmenu', (e) => {
      console.log('e', e);
      e.preventDefault();
    });
  });
</script>
<style scoped>
  .menu-x {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    font-size: 12px;
  }

  /* 菜单每个选项 */
  .menu-li {
    box-sizing: border-box;
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  /* 鼠标经过的选项，更改背景色 */
  .menu-li:hover {
    background-color: antiquewhite;
  }

  /* 第一个选项，顶部两角是圆角 */
  .menu-li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  /* 最后一个选项，底部两角是圆角，底部不需要边框 */
  .menu-li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
</style>
