Vue3 implements a custom right-click menu plug-in

🚀 Preliminary idea

• Only Vue is used to build the UI component of the right menu. It is necessary to use the component to provide the show method to evoke the menu, and then encapsulate the processing of the right menu event in the instruction
• Receives a menu item array configuration that provides a menu – after – click callback function. You can customize the parameters passed to the callback function
• DOM menu style as far as possible out of configurable, and use CSS variable injection, can customize the style of the menu
• provideshowMethod receivesx,yPosition the parameters, and then display the menu, while adding the check window after the collision processing
• Due to the special nature of the right-click menu, wrapable components are single instances, and only one menu instance exists on the page, which optimizes performance

🌈 Function

List of menu items -menuList

MenuList is required to render menu items, accepts an array of length at least 1, and can specify the children property to render second-level menus.

As far as possible, the configuration of menu items should be made to receive functions at the same time, so that different menus can be configured more quickly and dynamically by passing in parameters.

Currently, the following menu items are supported:

Each time the menu is opened, the following methods are called to format the final menu item:

const formatterFnOption = (list: MenuSetting[], clickDomEl: HTMLElement, el: HTMLElement, params: any): MenuSetting[] => {
  return list.map(item= > {
    if (item.children) {
      // Perform recursive processing on submenus
      item.children = formatterFnOption(item.children, clickDomEl, el, params);
    }
    if (isFunction(item.label)) {
      item.label = item.label(params, clickDomEl, el);
    }
    if (isFunction(item.tips)) {
      item.tips = item.tips(params, clickDomEl, el);
    }
    if (isFunction(item.hidden)) {
      item.hidden = item.hidden(params, clickDomEl, el);
    }
    if (isFunction(item.disabled)) {
      item.disabled = item.disabled(params, clickDomEl, el);
    }
    return item;
  });
};
Copy the code

• Example: Basic menu

Window collision handling

When the menu pops up, it is positioned as the upper left corner according to the passed coordinate. At this time, it needs to detect whether it collids with the window. When the passed coordinate plus the width or height of the menu exceeds the maximum width and height of the window, it should be adjusted.

const show = async (x = 0, y = 0) = > {/ /... some other code
  await nextTick();
  // The following code detects whether a window has been hit
  const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
  const menu = MenuWrapper.value;
  const menuHeight = menu.offsetHeight;
  const menuWidth = props.menuWidth || 200;
  menuLeft.value = x + menuWidth + 1 > windowWidth ? windowWidth - menuWidth - 5 : x + 1;
  menuTop.value = y + menuHeight + 1 > windowHeight ? windowHeight - menuHeight - 5 : y + 1;
};
Copy the code

Since the second level menu appears after hovering, collision detection of the second level menu also needs to be handled extra.

const handleMenuMouseEnter = ($event: MouseEvent, item: MenuSetting) = > {
  if(item.children && ! item.disabled) { hoverFlag.value =true;
    const el = $event.currentTarget as HTMLElement;
    if(! el)return;
    const { offsetWidth } = el;
    const subEl = el.querySelector('.__menu__sub__wrapper') as HTMLElement;
    if(! subEl)return;
    // The following code detects whether a window has been hit
    const { offsetWidth: subOffsetWidth, offsetHeight: subOffsetHeight } = subEl;
    const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
    const { top, left } = el.getBoundingClientRect();
    if (left + offsetWidth + subOffsetWidth > windowWidth - 5) {
      subLeft.value = left - subOffsetWidth + 5;
    } else {
      subLeft.value = left + offsetWidth;
    }
    if (top + subOffsetHeight > windowHeight - 5) {
      subTop.value = windowHeight - subOffsetHeight;
    } else {
      subTop.value = top + 5; }}};Copy the code

• Example: Secondary menu

Custom styles

Menu styles are controlled by CSS3 variables, which are passed in to modify CSS variables via menuWrapperCss and menuItemCss Props.

let el = MenuWrapper.value;
if (props.menuWrapperCss) {
  Object.keys(props.menuWrapperCss).map(item= > {
    el.style.setProperty(`--menu-${item}`, props.menuWrapperCss && props.menuWrapperCss[item]);
  });
}
if (props.menuItemCss) {
  Object.keys(props.menuItemCss).map(item= > {
    el.style.setProperty(`--menu-item-${item}`, props.menuItemCss && props.menuItemCss[item]);
  });
}
Copy the code

The supported styles are as follows:

• Example: Custom style

Browsers that do not support CSS variables can also override the CSS class name implementation

⚡ is wrapped as a function call

Currently only menu components are built with Vue, but direct component references are not recommended. Encapsulate it as a function for ease of use and call the function when needed, similar to MessageBox of ElementUI. The function invocation ensures that only one menu instance exists on the page, which optimizes performance.

The function call method must pass an EL in options (bind the Dom element that evokes the menu).

function CustomMouseMenu (options: CustomMouseMenuOptions) {
  const className = '__mouse__menu__container';
  let container:HTMLElement;
  if (document.querySelector(`.${className}`)) {
    container = document.querySelector(`.${className}`) as HTMLElement;
  } else {
    container = createClassDom('div', className);
  }
  const vm = h(MouseMenu, options);
  render(vm, container);
  document.body.appendChild(container);
  return vm.component?.proxy as ComponentPublicInstance<typeof MouseMenu>;
}
Copy the code

• Example: CustomMouseMenu function call

🔥 is wrapped as Vue3 instruction

Because using the command can know in advance which Dom element the menu is bound to, the processing of the right button and contextmenu event is encapsulated in the VUE command, which makes it more convenient to call out the menu. The Vue directive is also the most recommended method for this plug-in.

Since the contextMenu behavior on the mobile side is inconsistent, we can use the long-press event instead. In the instruction package, the process of right click arousing on PC side and long press arousing menu on mobile side is also done.

The principle of instruction implementation is to use the parameters passed in and bound Dom parameters, encapsulate the user’s right click and long press events and use CustomMouseMenu function to call out the menu.

View the source code

The command mode is as follows:

<template>
  <div v-mouse-menu="options">Dom</div>
</template>
<script>
import { MouseMenuDirective } from '@howdyjs/mouse-menu';
export default {
  directive: {
    MouseMenu: MouseMenuDirective
  },
  setup() {
    return {
      options: {} // Some Options}}}</script>
Copy the code

descr

For performance, instruction encapsulation mode only mounts mounted hooks by default. When the params parameter is passed to the menu function in a usage scenario, it is possible to update the menu when the component is updated, and you can mount the UPDATE as well. Please refer to the following writing method:

import { MouseMenuDirective } from '@howdyjs/mouse-menu';
export default {
  directive: {
    MouseMenu: {
      ...MouseMenuDirective,
      updated: MouseMenuDirective.mounted
    }
  }
}
Copy the code

Use the right-click menu in 🌟ElementPlus table

A common scenario is to right-click a list item in a table to pop up a menu and display different menus through the list item data. Here is an Example of how to manipulate a native table using a Vue command:

• Example: Directive binding to the native table

Since el-Table in the ElementPlusUI library provides the row-ContextMenu method, it’s easy to extend our right-click menu into el-Table.

With the row-ContextMenu method, you can right-click a pop-up menu in the EL-Table.

showMouseMenu(row, column, event) {
  const { x, y } = event
  const ctx = CustomMouseMenu({
    el: event.currentTarget,
    params: row, ... this.menuOptions }) ctx.show(x, y) event.preventDefault() }Copy the code

• Example in ElementPlusTable: Demo

✨ Other Instructions

The plugin also supports other configurations, such as menu ICONS, disable modes, and so on.

Configuration parameters (Props/ instruction Value) :

The plug-in is included in thehowdyjsFor one of its subcontractors, welcome start

🔗 Links

• Github
• Demo