SHARE
TWEET

Untitled

a guest Jul 17th, 2019 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="bg-light" style="height: 300px;">
  3.     <button @contextmenu.prevent="contextmenu">hi</button>
  4.     <button @contextmenu.prevent="contextmenu">bye</button>
  5.     <div v-if="show" class="contextmenu" @contextmenu.stop.prevent="recontextmenu" @click="show = false">
  6.       <div class="modal-dialog m-0" :style="style">
  7.         <div class="modal-content">
  8.           {{ text }}
  9.         </div>
  10.       </div>
  11.     </div>
  12.   </div>
  13. </template>
  14.  
  15. <script lang="ts">
  16. import { Component, Vue } from "vue-property-decorator";
  17.  
  18. @Component
  19. export default class HelloWorld extends Vue {
  20.   show = false;
  21.   text = "hello world";
  22.   x = 0;
  23.   y = 0;
  24.  
  25.   get style() {
  26.     return {
  27.       position: "absolute",
  28.       left: `${this.x}px`,
  29.       top: `${this.y}px`
  30.     }
  31.   }
  32.  
  33.   contextmenu(e: MouseEvent) {
  34.     this.show = true;
  35.     this.text = (e.target as HTMLElement).innerText;
  36.     if (e.pageX) {
  37.       console.info(e);
  38.       this.x = e.pageX;
  39.       this.y = e.pageY;
  40.     }
  41.   }
  42.  
  43.   recontextmenu(e: MouseEvent) {
  44.     this.show = false;
  45.     this.x = e.pageX;
  46.     this.y = e.pageY;
  47.     this.$nextTick(() => {
  48.       const el = document.elementFromPoint(e.pageX, e.pageY);
  49.       if (!el) return;
  50.       // contextmenu again
  51.       // elを元に判定し直す方がいいかも
  52.       const cm = document.createEvent('HTMLEvents');
  53.       cm.initEvent('contextmenu', true, false);
  54.       el.dispatchEvent(cm);
  55.     })
  56.   }
  57. }
  58. </script>
  59.  
  60. <style scoped lang="scss">
  61. .contextmenu {
  62.   position: absolute;
  63.   left: 0;
  64.   top: 0;
  65.   right: 0;
  66.   bottom: 0;
  67. }
  68. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top