Vuejs2 如何为v-treeview添加右键单击事件以在vuetify中打开菜单?
我想为v-treeview添加Vuejs2 如何为v-treeview添加右键单击事件以在vuetify中打开菜单?,vuejs2,vuetify.js,Vuejs2,Vuetify.js,我想为v-treeview添加右键单击事件,以打开菜单,但我失败了。我创建了一个版本,可以打开菜单时,左键单击,主代码是 <v-treeview v-model="tree" :open="open" :items="items" activatable item-key="name" > <template v-slot:label="{item, open, selected}"> <v-menu :value="
右键单击事件
,以打开菜单,但我失败了。我创建了一个版本,可以打开菜单时,左键单击,主代码是
<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>
{{open?'mdi folder open':'mdi folder'}}
{{files[item.file]}
{{item.name}
{{menuItem}}
注意:源代码可以在以下位置运行:
我对activator插槽中的v-on=“on”
感到非常困惑,我从中获得了一些信息。但是我还是不明白。还有更清楚的解释吗
谢谢 必须在树节点上使用@contextmenu
我已经试着实现你所尝试的
但是为了使树看起来更好,你必须做一些CSS调整。我不确定v-btn或v-card以外的任何元素是否接受@contextmenu事件处理程序
<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>
{{open?'mdi folder open':'mdi folder'}}
{{files[item.file]}
{{item.name}
{{menuItem}}
我想你指的是v-list-item而不是v-list-tile@fabio我写它的时候v-list-tile就在那里,它已经被弃用了。实际上它被重命名了,看这里