我正在 vue.js 中编写一个简单的上下文菜单。当我右键单击一个特殊元素时,它会打开菜单(使用@contextmenu.prevent)。这很有效。
但是当我在菜单之外单击时,我希望它消失。这不起作用…我为此使用 v-on:blur ,也尝试过 @blur 。它们都不起作用。这是我的html:
<!-- my context menu -->
<ul class="context-menu"
ref="contextMenuTrack"
v-if="openedMenu === 'contextMenuTrack'"
v-bind:style="{top: top, left: left}"
v-on:blur="closeMenu()">
<li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li>
</ul>
<div>
[ ...... stuff here ......]
<!-- Where the menu is called-->
<li class="track"
v-for="track in project.structure.tracks">
<div class="track-name-row">
<li @contextmenu.prevent="openContextMenuTrack(track,$event)"
v-on:click="expandTrack(project.structure.tracks.indexOf(track))"
class="track-color-viewer"></li>
[ .... other li tags .....]
</div>
</li>
[ ...... stuff here ......]
</div>
这是用于我的 Vue 组件菜单的数据:
data() {
return {
//the kind of menu which is opened
openedMenu: undefined,
//the coordinate of the menu
top: "0px",
left: "0px",
//the element which is targeted by the menu
targetOfMenu: undefined
};
},
以下是我的 Vue.js 组件中用于菜单的方法:
methods: {
setMenu(top, left) {
this.top = top - 170 + "px";
this.left = left + "px";
},
// opening menu : calling set menu whith x and y
openContextMenuTrack(track, event) {
this.openedMenu = "contextMenuTrack";
this.targetOfMenu = track;
this.$nextTick((() => {
this.$refs.contextMenuTrack.focus();
this.setMenu(event.y, event.x);
}).bind(this));
},
closeMenu() {
this.openedMenu = undefined;
this.targetOfMenu = undefined;
}
}
原文由 Bénédicte Lagouge 发布,翻译遵循 CC BY-SA 4.0 许可协议
blur
事件仅存在于表单控件(<input>
等)。您的问题通常可以通过创建一个自定义指令来解决,该指令在您单击菜单外部时运行一个方法。
像这样的东西:
https://www.npmjs.com/package/v-click-outside
希望这可以帮助
编辑:
一个更好的包( vue-clickaway )的例子:
https://jsfiddle.net/Linusborg/hqkgp4hm/