JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <span>No menu</span>
  <button v-menu="menuOptions">
    Right click
  </button>
</div>

JavaScript

const { createApp } = Vue

const app = createApp({
  data () {
    return {
      menuOptions: ['Hello']
    }
  }
})

app.directive('menu', (el, { value }) => {
  if (value) {
    el.setAttribute('data-v-menu', true)
    el.menuOptions = value
  } else {
    el.removeAttribute('data-v-menu')
    delete el.menuOptions
  }
})

document.addEventListener('contextmenu', ev => {
  const target = ev.target.closest('[data-v-menu]')
  
  if (target) {
    console.log('options are', target.menuOptions)
    ev.preventDefault()
  }
})

app.mount('#app')