CODEWITHSUNDEEP
vuejs2vuetify.js
huangjs
huangjs

Reputation: 479

How to add right click event for v-treeview to open menu in vuetify?

I want to add right click event for v-treeview to open menu but I fail. I created a version that can open menu when left click and the main code is

<v-treeview v-model="tree"  :open="open"  :items="items"  activatable item-key="name"  >
      <template v-slot:label="{item, open, selected}">
      <v-menu
        :value="showMenu"
      >
        <template v-slot:activator="{ on }">
          <v-btn
            flat
            :ripple="false"
            class="ma-0 pa-0"
            v-on="on"
          >
            <!--button icon-->
            <v-icon v-if="!item.file">
              {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
            </v-icon>
            <v-icon v-else>
              {{ files[item.file] }}
            </v-icon>
            <!--button text-->
            {{item.name}}
          </v-btn>
        </template>
        <v-list>
          <v-list-tile v-for="menuItem in menuItems" :key="menuItem">
            <v-list-tile-title>{{menuItem}}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </template>
    </v-treeview>

Note: the source code can be run at https://codepen.io/lhuangjs/pen/axMpYJ

And I am confused with v-on="on" in activator slot so much and I get some info from https://github.com/vuetifyjs/vuetify/issues/6866. However I still cannot understand it. Is there any more clear explanation?

thanks!

Upvotes: 2

Views: 10202

Answers (2)

BubbleQuote
BubbleQuote

Reputation: 49

you can popup a context menu by adding @contextmenu event in a label slot:

    <v-treeview :items="files" dense open-on-click transition hoverable>
      <template v-slot:prepend="{ item, open }">
        <v-icon v-if="item.children">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
        <v-icon v-else>{{ icon(item.basename) }}</v-icon>
      </template>
      <template v-slot:label="{ item }">
        <div @contextmenu.prevent="right($event, item)">{{ item.basename }}</div>
      </template>
    </v-treeview>

Upvotes: 0

Mahbub
Mahbub

Reputation: 3118

You have to use @contextmenu on the tree nodes.

I have tried to achieve what you tried. https://codepen.io/anon/pen/QPoYOQ?editors=1010#anon-login

But to make the tree look good, you have to do some CSS adjustments. I'm not sure any element other than v-btn or v-card accepts the @contextmenu event handler. 

<div id="app">
  <v-app id="inspire">
    <v-treeview v-model="tree" :open="open" :items="items" activatable item-key="name">
      <template v-slot:label="{item, open, selected}">        
        <v-btn flat @contextmenu="show"> 
            <!--button icon-->
            <v-icon v-if="!item.file">
              {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
            </v-icon>
            <v-icon v-else>
              {{ files[item.file] }}
            </v-icon>
            <!--button text-->
            {{item.name}}                  
          </v-btn>
    </template>
    </v-treeview>
    <v-menu v-model="showMenu" :position-x="x" :position-y="y" absolute offset-y>
      <v-list>
        <v-list-tile v-for="menuItem in menuItems" :key="menuItem" @click="clickAction">
          <v-list-tile-title>{{menuItem}}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </v-app>
</div>

Upvotes: 8

Related Questions