如何将vuetify的右键单击事件添加到vuetify中打开菜单？
如何将vuetify的右键单击事件添加到vuetify中打开菜单？
提问于 2019-04-28 16:36:02
我想为v-treeview添加right click event以打开菜单，但失败了.我创建了一个可以在单击左键时打开菜单的版本，主要代码是
<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>注意:源代码可以在https://codepen.io/lhuangjs/pen/axMpYJ上运行
我对
v-on="on"在activator slot中很困惑，我从https://github.com/vuetifyjs/vuetify/issues/6866那里得到了一些信息。不过，我还是不明白。还有什么更清楚的解释吗？
谢谢!
Stack Overflow用户
回答已采纳
发布于 2019-04-29 05:22:54
必须在树节点上使用@contextmenu。
我一直在努力实现你所做的一切。https://codepen.io/anon/pen/QPoYOQ?editors=1010#anon-login
但是为了使树看起来很好，你必须做一些CSS调整。我不确定除event或v卡之外的任何元素都接受@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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55892377
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号