Vue vue-context-menu

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/vue-context-menu.min.js"></script>
<div id="app">
  <div id="clickArea"  @contextmenu.prevent="$refs.ctxMenu.open">
    <p>ここで右クリック</p>    
  </div>
  <context-menu id="context-menu" ref="ctxMenu">
    <li @click="doSomething()">アラートイベント</li>
    <li class="disabled">disabled</li>
    <li>option 3</li>
  </context-menu>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

#app {
  text-align: center;
}
#clickArea {
  border: 1px dotted #000;
  height: 250px;
  width: 250px;
  margin: auto;
}
#clickArea p{
  padding-top:100px;
}
ul.ctx-menu {
  padding: 5px;
}
ul.ctx-menu li {
  cursor: pointer;
  padding: 2px;
}
ul.ctx-menu li.disabled {
  background-color: #f9f9f9;
  cursor: not-allowed;
}

Vue

const contextMenu   = window.VueContextMenu;

let app = new Vue({
  el: '#app',
  components: {
    contextMenu 
  },
  methods: { 
    doSomething:function(){
      alert('click');
    }
  }
});