[Vuejs]-Open a dropdown with right click in Vue3 and Vuetify3

by

0👍

✅

I couldn’t discover any context menu event in Vue3’s doc and Vuetify’s menu API. Although, I have an alternative in my mind that can do this job. You can utilize the .right modifier sync with v-model to open the menu with the right click of a button.

Here is the strategy-

  1. Use v-model to control the v-menu toggling status.
  2. On the right-click, set the v-model to true so the menu will be open.
  3. On the left-click (default) set the v-model to false. (Do this step only if you don’t want to open the menu on the default click.)

Here is a functioning demo-

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    menu: false,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <div class="d-flex justify-space-around mb-5 font-weight-bold">
      I will open only with the right-click.
    </div>
    <div class="d-flex justify-space-around">
      <v-menu v-model="menu">
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
            @click.left.prevent="menu = false"
            @click.right.prevent="menu = true"
            >
            Dropdown
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
            >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

Leave a comment