<template>
  <div class="bg-light" style="height: 300px;">
    <button @contextmenu.prevent="contextmenu">hi</button>
    <button @contextmenu.prevent="contextmenu">bye</button>
    <div v-if="show" class="contextmenu" @contextmenu.stop.prevent="recontextmenu" @click="show = false">
      <div class="modal-dialog m-0" :style="style">
        <div class="modal-content">
          {{ text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  show = false;
  text = "hello world";
  x = 0;
  y = 0;

  get style() {
    return {
      position: "absolute",
      left: `${this.x}px`,
      top: `${this.y}px`
    }
  }

  contextmenu(e: MouseEvent) {
    this.show = true;
    this.text = (e.target as HTMLElement).innerText;
    if (e.pageX) {
      console.info(e);
      this.x = e.pageX;
      this.y = e.pageY;
    }
  }

  recontextmenu(e: MouseEvent) {
    this.show = false;
    this.x = e.pageX;
    this.y = e.pageY;
    this.$nextTick(() => {
      const el = document.elementFromPoint(e.pageX, e.pageY);
      if (!el) return;
      // contextmenu again
      // elを元に判定し直す方がいいかも
      const cm = document.createEvent('HTMLEvents');
      cm.initEvent('contextmenu', true, false);
      el.dispatchEvent(cm);
    })
  }
}
</script>

<style scoped lang="scss">
.contextmenu {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>