Quick and dirty check to see where to position the menu and expanded menus when right clicking

Author: Johnathan Barrett

example/App.vue

@@ -6,7 +6,9 @@
  Right Click Me!
  </div>
 
- <div class="console" v-html="consoleMessage.length ? consoleMessage.join('<br>') : '...'"></div>
+ <div class="console"
+ v-html="consoleMessage.length ? consoleMessage.join('<br>') : '...'">
+ </div>
 
  </div>
 </template>
@@ -18,34 +20,48 @@ export default {
  name: 'app',
  data() {
  return {
- menuItems: [
- {
- label: 'First Menu Item',
- },
- {
- label: 'Disabled Menu Item',
- disabled: true,
+ menuItems: [],
+ consoleMessage: [],
+ };
+ },
+
+ mounted() {
+ this.menuItems = [
+ {
+ label: 'First Menu Item',
+ handler: () => {
+ this.consoleMessage.unshift('First Menu Item Clicked');
  },
- {
- label: 'I have children',
- children: [
- {
- label: 'Child Item 1',
+ },
+ {
+ label: 'Disabled Menu Item',
+ disabled: true,
+ },
+ {
+ label: 'I have children',
+ children: [
+ {
+ label: 'Child Item 1',
+ handler: () => {
+ this.consoleMessage.unshift('Child Item 1 Clicked');
  },
- {
- label: 'I also have children',
- children: [
- {
- label: 'Child Item 2',
+ },
+ {
+ label: 'I also have children',
+ children: [
+ {
+ label: 'Child Item 2',
+ handler: () => {
+ this.consoleMessage.unshift('Child Item 2 Clicked');
  },
- ],
- },
- ],
- },
- ],
- consoleMessage: [],
- };
+ },
+ ],
+ },
+ ],
+ },
+ ];
  },
+
  components: {
  ContextMenu,
  },
@@ -55,6 +71,8 @@ export default {
 <style lang="scss">
  body, html {
  height: 100%;
+ margin: 0;
+ padding: 0;
  }
 
  #app {
@@ -72,8 +90,8 @@ export default {
  }
 
  .context-menu-trigger {
- width: 50%;
- margin: 2em auto;
+ width: 100%;
+ /*margin: 2em auto;*/
  padding: 2em;
  background: #c0c0c0;
  }

package.json

@@ -19,7 +19,7 @@
  "url": "https://github.com/Johnathan/vue-context-menu-popup/issues",
  "email": "johnathan.barrett@gmail.com"
  },
- "version": "1.0.2",
+ "version": "1.0.4",
  "private": false,
  "scripts": {
  "serve": "vue-cli-service serve ./example/main.js --open",

src/components/ContextMenu.vue

@@ -1,6 +1,11 @@
 <template>
- <div class="context-menu context-menu-container" v-if="visible" :style="contextMenuPosition"
- v-click-outside="close" @click="close">
+ <div class="context-menu context-menu-container"
+ :class="openPosition"
+ v-if="visible"
+ :style="contextMenuPosition"
+ v-click-outside="close" @click="close"
+ ref="contextMenu"
+ >
  <ul>
  <context-menu-item
  v-for="(menuItem, index) in menuItems"
@@ -39,6 +44,7 @@ export default {
  top: 0,
  left: 0,
  },
+ openPosition: 'context-menu-open-right',
  };
  },
 
@@ -51,25 +57,37 @@ export default {
  * Accepts an Object with an `x, y` position or an instance of Event
  */
  open(position) {
- let x = 0;
- let y = 0;
-
- if (typeof position !== 'undefined' && typeof position === 'object') {
- if (position instanceof Event) {
- x = position.pageX;
- y = position.pageY;
- } else {
- x = position.x;
- y = position.y;
- }
- }
+ this.visible = true;
+
+ this.$nextTick(() => {
+ let x = 0;
+ let y = 0;
+
+ if (typeof position !== 'undefined' && typeof position === 'object') {
+ if (position instanceof Event) {
+ const windowWidth = window.innerWidth;
+ const contextMenuWidth = this.$refs.contextMenu.getBoundingClientRect().width;
+
+ if (position.pageX >= (windowWidth - contextMenuWidth)) {
+ this.openPosition = 'context-menu-open-left';
+ x = windowWidth - contextMenuWidth - 10;
+ } else {
+ this.openPosition = 'context-menu-open-right';
+ x = position.pageX;
+ }
 
- this.contextMenuPosition = {
- left: `${x}px`,
- top: `${y}px`,
- };
+ y = position.pageY;
+ } else {
+ x = position.x;
+ y = position.y;
+ }
+ }
 
- this.visible = true;
+ this.contextMenuPosition = {
+ left: `${x}px`,
+ top: `${y}px`,
+ };
+ });
  },
  },
 
@@ -84,7 +102,6 @@ export default {
 </script>
 
 <style lang="scss">
- // Context Menu Stuff, should probably move this somewhere else.
  $context-menu-border-radius: 4px;
 
  .context-menu-container {
@@ -151,5 +168,18 @@ export default {
  }
  }
  }
+
+ &.context-menu-open-left {
+ ul {
+ li {
+ &:hover {
+ > ul {
+ left: auto;
+ right: calc(100% + 2px);
+ }
+ }
+ }
+ }
+ }
  }
 </style>