initial commit

src/components/ContextMenu/index.ts

@@ -0,0 +1,65 @@
+import contextMenuVue from './src/index';
+import { isClient } from '/@/utils/is';
+import { Options, Props } from './src/types';
+import { createApp } from 'vue';
+const menuManager: {
+  doms: Element[];
+  resolve: Fn;
+} = {
+  doms: [],
+  resolve: () => {},
+};
+export const createContextMenu = function (options: Options) {
+  const { event } = options || {};
+  try {
+    event.preventDefault();
+  } catch (e) {
+    console.log(e);
+  }
+
+  if (!isClient) return;
+  return new Promise((resolve) => {
+    const wrapDom = document.createElement('div');
+    const propsData: Partial<Props> = {};
+    if (options.styles !== undefined) propsData.styles = options.styles;
+    if (options.items !== undefined) propsData.items = options.items;
+    if (options.event !== undefined) {
+      propsData.customEvent = event;
+      propsData.axis = { x: event.clientX, y: event.clientY };
+    }
+    createApp(contextMenuVue, propsData).mount(wrapDom);
+    const bodyClick = function () {
+      menuManager.resolve('');
+    };
+    const contextMenuDom = wrapDom.children[0];
+    menuManager.doms.push(contextMenuDom);
+    const remove = function () {
+      menuManager.doms.forEach((dom: Element) => {
+        try {
+          document.body.removeChild(dom);
+        } catch (error) {}
+      });
+      document.body.removeEventListener('click', bodyClick);
+      document.body.removeEventListener('scroll', bodyClick);
+      try {
+        (wrapDom as any) = null;
+      } catch (error) {}
+    };
+    menuManager.resolve = function (...arg: any) {
+      resolve(arg[0]);
+      remove();
+    };
+    remove();
+    document.body.appendChild(contextMenuDom);
+    document.body.addEventListener('click', bodyClick);
+    document.body.addEventListener('scroll', bodyClick);
+  });
+};
+export const unMountedContextMenu = function () {
+  if (menuManager) {
+    menuManager.resolve('');
+    menuManager.doms = [];
+  }
+};
+
+export * from './src/types';

src/components/ContextMenu/src/index.less

@@ -0,0 +1,49 @@
+@import (reference) '../../../design/index.less';
+
+.context-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1500;
+  display: block;
+  width: 156px;
+  min-width: 10rem;
+  margin: 0;
+  list-style: none;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
+    0 1px 5px 0 rgba(0, 0, 0, 0.06);
+  background-clip: padding-box;
+  user-select: none;
+
+  &.hidden {
+    display: none !important;
+  }
+
+  &__item {
+    a {
+      display: inline-block;
+      width: 100%;
+      padding: 10px 14px;
+
+      &:hover {
+        color: @text-color-base;
+        background: #eee;
+      }
+    }
+
+    &.disabled {
+      a {
+        color: @disabled-color;
+        cursor: not-allowed;
+
+        &:hover {
+          color: @disabled-color;
+          background: unset;
+        }
+      }
+    }
+  }
+}

src/components/ContextMenu/src/index.tsx

@@ -0,0 +1,90 @@
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  computed,
+  ref,
+  unref,
+  onUnmounted,
+} from 'vue';
+import { props } from './props';
+import Icon from '/@/components/Icon';
+import type { ContextMenuItem } from './types';
+import './index.less';
+const prefixCls = 'context-menu';
+export default defineComponent({
+  name: 'ContextMenu',
+  props,
+  setup(props) {
+    const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+    const state = reactive({
+      show: false,
+    });
+    onMounted(() => {
+      nextTick(() => {
+        state.show = true;
+      });
+    });
+    onUnmounted(() => {
+      const el = unref(wrapRef);
+      el && document.body.removeChild(el);
+    });
+    const getStyle = computed(() => {
+      const { axis, items, styles, width } = props;
+      const { x, y } = axis || { x: 0, y: 0 };
+      const menuHeight = (items || []).length * 40;
+      const menuWidth = width;
+      const body = document.body;
+      return {
+        ...(styles as any),
+        width: `${width}px`,
+        left: (body.clientWidth < x + menuWidth ? x - menuWidth : x) + 'px',
+        top: (body.clientHeight < y + menuHeight ? y - menuHeight : y) + 'px',
+      };
+    });
+    function handleAction(item: ContextMenuItem, e: MouseEvent) {
+      const { handler, disabled } = item;
+      if (disabled) {
+        return;
+      }
+      state.show = false;
+      if (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+
+      handler && handler();
+    }
+    function renderContent(item: ContextMenuItem) {
+      const { icon, label } = item;
+
+      const { showIcon } = props;
+      return (
+        <span style="display: inline-block; width: 100%;">
+          {showIcon && icon && <Icon class="mr-2" icon={icon} />}
+          <span>{label}</span>
+        </span>
+      );
+    }
+    function renderMenuItem(items: ContextMenuItem[]) {
+      return items.map((item) => {
+        const { disabled, label } = item;
+
+        return (
+          <li class={`${prefixCls}__item ${disabled ? 'disabled' : ''}`} key={label}>
+            <a onClick={handleAction.bind(null, item)}>{renderContent(item)}</a>
+          </li>
+        );
+      });
+    }
+    return () => {
+      const { items } = props;
+      return (
+        <ul class={[prefixCls, !state.show && 'hidden']} ref={wrapRef} style={unref(getStyle)}>
+          {renderMenuItem(items)}
+        </ul>
+      );
+    };
+  },
+});

src/components/ContextMenu/src/props.ts

@@ -0,0 +1,40 @@
+import type { PropType } from 'vue';
+import type { Axis, ContextMenuItem } from './types';
+export const props = {
+  width: {
+    type: Number as PropType<number>,
+    default: 180,
+  },
+  customEvent: {
+    type: Object as PropType<Event>,
+    default: null,
+  },
+  // 样式
+  styles: {
+    type: Object as PropType<any>,
+    default: null,
+  },
+  showIcon: {
+    // 是否显示icon
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  axis: {
+    // 鼠标右键点击的位置
+    type: Object as PropType<Axis>,
+    default() {
+      return { x: 0, y: 0 };
+    },
+  },
+  items: {
+    // 最重要的列表，没有的话直接不显示
+    type: Array as PropType<ContextMenuItem[]>,
+    default() {
+      return [];
+    },
+  },
+  resolve: {
+    type: Function as PropType<any>,
+    default: null,
+  },
+};

src/components/ContextMenu/src/types.ts

@@ -0,0 +1,30 @@
+export interface Axis {
+  x: number;
+  y: number;
+}
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  handler?: Fn;
+  divider?: boolean;
+  children?: ContextMenuItem[];
+}
+export interface Options {
+  event: MouseEvent;
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}
+
+export type Props = {
+  resolve?: (...arg: any) => void;
+  event?: MouseEvent;
+  styles?: any;
+  items: ContextMenuItem[];
+  customEvent?: MouseEvent;
+  axis?: Axis;
+  width?: number;
+  showIcon?: boolean;
+};