Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- 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>
- 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
- };
- },
- 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;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement