我正在使用vue.js编写一个简单的上下文菜单。当我在特定元素上右键单击时,它会打开菜单(使用@contextmenu.prevent)。这个功能有效。
但是,当我在菜单外面点击时,我希望菜单消失。但这不起作用...我使用v-on:blur尝试了解决这个问题,也试过@blur。但都没有成功。以下是我的HTML代码:
但是,当我在菜单外面点击时,我希望菜单消失。但这不起作用...我使用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;
}
}