vxe-pc-ui 4.11.29 → 4.11.31

package/es/backtop/src/backtop.js

@@ -1,4 +1,4 @@
-import { ref, h, reactive, watch, onMounted, nextTick, computed, onBeforeUnmount, onUnmounted } from 'vue';
+import { ref, h, reactive, watch, onMounted, nextTick, computed, onBeforeUnmount } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, createEvent, useSize, renderEmptyElement } from '../../ui';
@@ -218,8 +218,6 @@ export default defineVxeComponent({
         onBeforeUnmount(() => {
             removeScrollEvent();
             XEUtils.assign(reactData, createReactData());
-        });
-        onUnmounted(() => {
             XEUtils.assign(internalData, createInternalData());
         });
         $xeBacktop.renderVN = renderVN;

package/es/button/src/button.js

@@ -89,6 +89,10 @@ const VxeButtonComponent = defineVxeComponent({
         prefixTooltip: Object,
         suffixTooltip: Object,
         options: Array,
+        showDropdownIcon: {
+            type: Boolean,
+            default: () => getConfig().button.showDropdownIcon
+        },
         /**
          * 在下拉面板关闭时销毁内容
          */
@@ -116,6 +120,7 @@ const VxeButtonComponent = defineVxeComponent({
         const $xeModal = inject('$xeModal', null);
         const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
+        const $xeTree = inject('$xeTree', null);
         const $xeForm = inject('$xeForm', null);
         const $xeButtonGroup = inject('$xeButtonGroup', null);
         const xID = XEUtils.uniqueId();
@@ -156,7 +161,7 @@ const VxeButtonComponent = defineVxeComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -529,7 +534,7 @@ const VxeButtonComponent = defineVxeComponent({
         };
         Object.assign($xeButton, buttonMethods);
         const renderVN = () => {
-            const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading } = props;
+            const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading, showDropdownIcon } = props;
             const { initialized, isAniVisible, visiblePanel } = reactData;
             const isFormBtn = computeIsFormBtn.value;
             const btnMode = computeBtnMode.value;
@@ -574,11 +579,13 @@ const VxeButtonComponent = defineVxeComponent({
                                 }], title,
                             name, type: isFormBtn ? type : 'button', disabled: btnDisabled || loading, to: routerLink, onClick: clickTargetEvent }, btnOns), {
                             default() {
-                                return renderContent().concat([
-                                    h('i', {
-                                        class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-                                    })
-                                ]);
+                                return renderContent().concat(showDropdownIcon
+                                    ? [
+                                        h('i', {
+                                            class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+                                        })
+                                    ]
+                                    : []);
                             }
                         })
                         : h('button', Object.assign({ ref: refButton, class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
@@ -589,11 +596,13 @@ const VxeButtonComponent = defineVxeComponent({
                                     'is--disabled': btnDisabled || loading,
                                     'is--loading': loading
                                 }], title,
-                            name, type: isFormBtn ? type : 'button', disabled: btnDisabled || loading, onClick: clickTargetEvent }, btnOns), renderContent().concat([
-                            h('i', {
-                                class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-                            })
-                        ])),
+                            name, type: isFormBtn ? type : 'button', disabled: btnDisabled || loading, onClick: clickTargetEvent }, btnOns), renderContent().concat(showDropdownIcon
+                            ? [
+                                h('i', {
+                                    class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+                                })
+                            ]
+                            : [])),
                     h(Teleport, {
                         to: 'body',
                         disabled: btnTransfer ? !initialized : true

package/es/components.js

@@ -22,6 +22,7 @@ import VxeCol from './col';
 import VxeCollapse from './collapse';
 import VxeCollapsePane from './collapse-pane';
 import VxeColorPicker from './color-picker';
+import VxeContextMenu from './context-menu';
 import VxeCountdown from './countdown';
 import VxeDatePanel from './date-panel';
 import VxeDatePicker from './date-picker';
@@ -114,6 +115,7 @@ const components = [
     VxeCollapse,
     VxeCollapsePane,
     VxeColorPicker,
+    VxeContextMenu,
     VxeCountdown,
     VxeDatePanel,
     VxeDatePicker,
@@ -222,6 +224,7 @@ export * from './col';
 export * from './collapse';
 export * from './collapse-pane';
 export * from './color-picker';
+export * from './context-menu';
 export * from './countdown';
 export * from './date-panel';
 export * from './date-picker';

package/es/context-menu/index.js

@@ -0,0 +1,46 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeContextMenuComponent from './src/context-menu';
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics';
+export const VxeContextMenu = Object.assign({}, VxeContextMenuComponent, {
+    install(app) {
+        app.component(VxeContextMenuComponent.name, VxeContextMenuComponent);
+    }
+});
+function openMenu(opts, x, y) {
+    dynamicStore.globalContextMenu = {
+        modelValue: true,
+        options: opts.options,
+        className: opts.className,
+        size: opts.size,
+        zIndex: opts.zIndex,
+        x,
+        y,
+        position: 'fixed',
+        destroyOnClose: true,
+        transfer: false,
+        events: opts.events
+    };
+    checkDynamic();
+}
+export const ContextMenuController = {
+    open(options) {
+        const opts = Object.assign({ x: 0, y: 0 }, options);
+        openMenu(opts, opts.x, opts.y);
+    },
+    openByEvent(evnt, options) {
+        evnt.preventDefault();
+        evnt.stopPropagation();
+        const opts = Object.assign({}, options);
+        const x = evnt.clientX;
+        const y = evnt.clientY;
+        openMenu(opts, x, y);
+    },
+    close() {
+        dynamicStore.globalContextMenu = null;
+    }
+};
+dynamicApp.use(VxeContextMenu);
+VxeUI.component(VxeContextMenuComponent);
+VxeUI.contextMenu = ContextMenuController;
+export const ContextMenu = VxeContextMenu;
+export default VxeContextMenu;

package/es/context-menu/src/context-menu.js

@@ -0,0 +1,344 @@
+import { ref, h, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, getI18n, createEvent, useSize, globalEvents, renderEmptyElement } from '../../ui';
+import { getLastZIndex, nextSubZIndex, nextZIndex, getFuncText } from '../../ui/src/utils';
+import { getEventTargetNode, toCssUnit } from '../../ui/src/dom';
+import { getSlotVNs } from '../../ui/src/vn';
+function createInternalData() {
+    return {};
+}
+function createReactData() {
+    return {
+        visible: false,
+        activeOption: null,
+        activeChildOption: null,
+        popupStyle: {
+            top: '',
+            left: '',
+            zIndex: 0
+        },
+        childPos: ''
+    };
+}
+export default defineVxeComponent({
+    name: 'VxeContextMenu',
+    props: {
+        modelValue: Boolean,
+        className: String,
+        size: {
+            type: String,
+            default: () => getConfig().contextMenu.size || getConfig().size
+        },
+        options: Array,
+        x: [Number, String],
+        y: [Number, String],
+        zIndex: [Number, String],
+        position: {
+            type: String,
+            default: () => getConfig().contextMenu.position
+        },
+        destroyOnClose: {
+            type: Boolean,
+            default: () => getConfig().contextMenu.destroyOnClose
+        },
+        transfer: {
+            type: Boolean,
+            default: () => getConfig().contextMenu.transfer
+        }
+    },
+    emits: [
+        'update:modelValue',
+        'option-click',
+        'change',
+        'show',
+        'hide'
+    ],
+    setup(props, context) {
+        const { emit } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const { computeSize } = useSize(props);
+        const internalData = createInternalData();
+        const reactData = reactive(createReactData());
+        const refMaps = {
+            refElem
+        };
+        const computeMenuGroups = computed(() => {
+            const { options } = props;
+            return options || [];
+        });
+        const computeTopAndLeft = computed(() => {
+            const { x, y } = props;
+            return `${x}${y}`;
+        });
+        const computeMaps = {};
+        const $xeContextMenu = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $contextMenu: $xeContextMenu }, params));
+        };
+        const emitModel = (value) => {
+            emit('update:modelValue', value);
+        };
+        const open = () => {
+            const { modelValue } = props;
+            const { visible } = reactData;
+            const value = true;
+            reactData.visible = value;
+            updateLocate();
+            updateZindex();
+            if (modelValue !== value) {
+                emitModel(value);
+                dispatchEvent('change', { value }, null);
+            }
+            if (visible !== value) {
+                dispatchEvent('show', { visible: value }, null);
+            }
+            return nextTick();
+        };
+        const close = () => {
+            const { modelValue } = props;
+            const { visible } = reactData;
+            const value = false;
+            reactData.visible = value;
+            if (modelValue !== value) {
+                emitModel(value);
+                dispatchEvent('change', { value }, null);
+            }
+            if (visible !== value) {
+                dispatchEvent('hide', { visible: value }, null);
+            }
+            return nextTick();
+        };
+        const updateLocate = () => {
+            const { x, y } = props;
+            const { popupStyle } = reactData;
+            popupStyle.left = toCssUnit(x || 0);
+            popupStyle.top = toCssUnit(y || 0);
+        };
+        const updateZindex = () => {
+            const { zIndex, transfer } = props;
+            const { popupStyle } = reactData;
+            const menuZIndex = popupStyle.zIndex;
+            if (zIndex) {
+                popupStyle.zIndex = XEUtils.toNumber(zIndex);
+            }
+            else {
+                if (menuZIndex < getLastZIndex()) {
+                    popupStyle.zIndex = transfer ? nextSubZIndex() : nextZIndex();
+                }
+            }
+        };
+        const handleVisible = () => {
+            const { modelValue } = props;
+            if (modelValue) {
+                open();
+            }
+            else {
+                close();
+            }
+        };
+        const tagMethods = {
+            dispatchEvent,
+            open,
+            close
+        };
+        const handleItemClickEvent = (evnt, item) => {
+            dispatchEvent('option-click', { option: item }, evnt);
+            close();
+        };
+        const handleItemMouseenterEvent = (evnt, item, parentitem) => {
+            reactData.activeOption = parentitem || item;
+            reactData.activeChildOption = parentitem ? item : null;
+        };
+        const handleItemMouseleaveEvent = () => {
+            reactData.activeOption = null;
+            reactData.activeChildOption = null;
+        };
+        const handleGlobalMousedownEvent = (evnt) => {
+            const { visible } = reactData;
+            if (visible) {
+                const el = refElem.value;
+                if (!getEventTargetNode(evnt, el, '').flag) {
+                    close();
+                }
+            }
+        };
+        const tagPrivateMethods = {};
+        Object.assign($xeContextMenu, tagMethods, tagPrivateMethods);
+        const renderMenuItem = (item, hasChildMenus) => {
+            const { visible, disabled, loading } = item;
+            if (visible === false) {
+                return renderEmptyElement($xeContextMenu);
+            }
+            const prefixOpts = Object.assign({}, item.prefixConfig);
+            const prefixIcon = prefixOpts.icon || item.prefixIcon;
+            const suffixOpts = Object.assign({}, item.suffixConfig);
+            const suffixIcon = suffixOpts.icon || item.suffixIcon;
+            const menuContent = loading ? getI18n('vxe.contextMenu.loadingText') : getFuncText(item.name);
+            return h('div', {
+                class: ['vxe-context-menu--item-inner', {
+                        'is--disabled': disabled,
+                        'is--loading': loading
+                    }]
+            }, [
+                h('div', {
+                    class: ['vxe-context-menu--item-prefix', prefixOpts.className || '']
+                }, loading
+                    ? [
+                        h('span', {
+                            key: '1'
+                        }, [
+                            h('i', {
+                                class: getIcon().CONTEXT_MENU_OPTION_LOADING
+                            })
+                        ])
+                    ]
+                    : [
+                        prefixIcon && XEUtils.isFunction(prefixIcon)
+                            ? h('span', {
+                                key: '2'
+                            }, getSlotVNs(prefixIcon({})))
+                            : h('span', {
+                                key: '3'
+                            }, [
+                                h('i', {
+                                    class: prefixIcon
+                                })
+                            ]),
+                        prefixOpts.content
+                            ? h('span', {
+                                key: '4'
+                            }, `${prefixOpts.content || ''}`)
+                            : renderEmptyElement($xeContextMenu)
+                    ]),
+                h('div', {
+                    class: 'vxe-context-menu--item-label'
+                }, menuContent),
+                !loading && (suffixIcon || suffixOpts.content)
+                    ? h('div', {
+                        class: ['vxe-context-menu--item-suffix', suffixOpts.className || '']
+                    }, [
+                        suffixIcon && XEUtils.isFunction(suffixIcon)
+                            ? h('span', {
+                                key: '2'
+                            }, getSlotVNs(suffixIcon({})))
+                            : h('span', {
+                                key: '3'
+                            }, [
+                                h('i', {
+                                    class: suffixIcon
+                                })
+                            ]),
+                        suffixOpts.content
+                            ? h('span', {
+                                key: '4'
+                            }, `${suffixOpts.content || ''}`)
+                            : renderEmptyElement($xeContextMenu)
+                    ])
+                    : renderEmptyElement($xeContextMenu),
+                hasChildMenus
+                    ? h('div', {
+                        class: 'vxe-context-menu--item-subicon'
+                    }, [
+                        h('i', {
+                            class: getIcon().CONTEXT_MENU_CHILDREN
+                        })
+                    ])
+                    : renderEmptyElement($xeContextMenu)
+            ]);
+        };
+        const renderMenus = () => {
+            const { activeOption, activeChildOption } = reactData;
+            const menuGroups = computeMenuGroups.value;
+            const mgVNs = [];
+            menuGroups.forEach((menuList, gIndex) => {
+                const moVNs = [];
+                menuList.forEach((firstItem, i) => {
+                    const { children } = firstItem;
+                    const hasChildMenus = children && children.some((child) => child.visible !== false);
+                    moVNs.push(h('div', {
+                        key: `${gIndex}_${i}`,
+                        class: ['vxe-context-menu--item-wrapper vxe-context-menu--first-item', {
+                                'is--active': activeOption === firstItem
+                            }],
+                        onClick(evnt) {
+                            handleItemClickEvent(evnt, firstItem);
+                        },
+                        onMouseenter(evnt) {
+                            handleItemMouseenterEvent(evnt, firstItem);
+                        },
+                        onMouseleave: handleItemMouseleaveEvent
+                    }, [
+                        hasChildMenus
+                            ? h('div', {
+                                class: 'vxe-context-menu--children-wrapper'
+                            }, children.map(twoItem => {
+                                return h('div', {
+                                    class: ['vxe-context-menu--item-wrapper vxe-context-menu--child-item', {
+                                            'is--active': activeChildOption === twoItem
+                                        }],
+                                    onClick(evnt) {
+                                        handleItemClickEvent(evnt, twoItem);
+                                    },
+                                    onMouseenter(evnt) {
+                                        handleItemMouseenterEvent(evnt, twoItem, firstItem);
+                                    },
+                                    onMouseleave: handleItemMouseleaveEvent
+                                }, [
+                                    renderMenuItem(twoItem)
+                                ]);
+                            }))
+                            : renderEmptyElement($xeContextMenu),
+                        renderMenuItem(firstItem, hasChildMenus)
+                    ]));
+                });
+                mgVNs.push(h('div', {
+                    key: gIndex,
+                    class: 'vxe-context-menu--group-wrapper'
+                }, moVNs));
+            });
+            return mgVNs;
+        };
+        const renderVN = () => {
+            const { className, position, destroyOnClose } = props;
+            const { visible, popupStyle, childPos } = reactData;
+            const vSize = computeSize.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-context-menu vxe-context-menu--wrapper', position === 'fixed' ? ('is--' + position) : 'is--absolute', `cp--${childPos === 'left' ? childPos : 'right'}`, className || '', {
+                        [`size--${vSize}`]: vSize,
+                        'is--visible': visible
+                    }],
+                style: popupStyle
+            }, (destroyOnClose ? visible : true) ? renderMenus() : []);
+        };
+        watch(computeTopAndLeft, () => {
+            updateLocate();
+        });
+        watch(() => props.modelValue, () => {
+            handleVisible();
+        });
+        handleVisible();
+        onMounted(() => {
+            globalEvents.on($xeContextMenu, 'mousedown', handleGlobalMousedownEvent);
+        });
+        onBeforeUnmount(() => {
+            globalEvents.off($xeContextMenu, 'mousedown');
+            XEUtils.assign(reactData, createReactData());
+            XEUtils.assign(internalData, createInternalData());
+        });
+        $xeContextMenu.renderVN = renderVN;
+        return $xeContextMenu;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/context-menu/style.css

@@ -0,0 +1,104 @@
+.vxe-context-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-context-menu.is--fixed {
+  position: fixed;
+}
+.vxe-context-menu.cp--left .vxe-context-menu--children-wrapper {
+  left: -100%;
+}
+.vxe-context-menu.cp--right .vxe-context-menu--children-wrapper {
+  left: 100%;
+}
+
+.vxe-context-menu--group-wrapper {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-context-menu--group-wrapper:first-child {
+  border: 0;
+}
+
+.vxe-context-menu--wrapper,
+.vxe-context-menu--children-wrapper {
+  padding: 0;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
+}
+
+.vxe-context-menu--children-wrapper {
+  display: none;
+  position: absolute;
+}
+
+.vxe-context-menu--item-wrapper {
+  position: relative;
+  min-width: 12em;
+  max-width: 20em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-context-menu--item-wrapper.is--active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.vxe-context-menu--first-item.is--active .vxe-context-menu--children-wrapper {
+  display: block;
+}
+
+.vxe-context-menu--item-inner {
+  height: var(--vxe-ui-context-menu-option-height);
+  display: flex;
+  align-items: center;
+  padding: 0 0.5em;
+  cursor: pointer;
+}
+.vxe-context-menu--item-inner.is--loading {
+  opacity: 0.5;
+  cursor: progress;
+}
+.vxe-context-menu--item-inner.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: no-drop;
+}
+
+.vxe-context-menu--item-prefix {
+  width: 1em;
+  text-align: center;
+}
+
+.vxe-context-menu--item-prefix,
+.vxe-context-menu--item-suffix {
+  flex-shrink: 0;
+}
+
+.vxe-context-menu--item-label {
+  font-size: 0.9em;
+  padding: 0 0.5em;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-context-menu {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-context-menu.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-context-menu.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-context-menu.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/context-menu/style.min.css

@@ -0,0 +1 @@
+.vxe-context-menu{position:absolute;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu.is--fixed{position:fixed}.vxe-context-menu.cp--left .vxe-context-menu--children-wrapper{left:-100%}.vxe-context-menu.cp--right .vxe-context-menu--children-wrapper{left:100%}.vxe-context-menu--group-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-context-menu--group-wrapper:first-child{border:0}.vxe-context-menu--children-wrapper,.vxe-context-menu--wrapper{padding:0;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);border:1px solid var(--vxe-ui-base-popup-border-color);background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);box-shadow:0 0 12px 0 rgba(0,0,0,.3)}.vxe-context-menu--children-wrapper{display:none;position:absolute}.vxe-context-menu--item-wrapper{position:relative;min-width:12em;max-width:20em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu--item-wrapper.is--active{background-color:rgba(0,0,0,.1)}.vxe-context-menu--first-item.is--active .vxe-context-menu--children-wrapper{display:block}.vxe-context-menu--item-inner{height:var(--vxe-ui-context-menu-option-height);display:flex;align-items:center;padding:0 .5em;cursor:pointer}.vxe-context-menu--item-inner.is--loading{opacity:.5;cursor:progress}.vxe-context-menu--item-inner.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-context-menu--item-prefix{width:1em;text-align:center}.vxe-context-menu--item-prefix,.vxe-context-menu--item-suffix{flex-shrink:0}.vxe-context-menu--item-label{font-size:.9em;padding:0 .5em;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-context-menu{font-size:var(--vxe-ui-font-size-default)}.vxe-context-menu.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-context-menu.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-context-menu.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/dynamics/index.js

@@ -6,7 +6,8 @@ export const dynamicStore = reactive({
     modals: [],
     drawers: [],
     globalLoading: null,
-    globalWatermark: null
+    globalWatermark: null,
+    globalContextMenu: null
 });
 /**
  * 动态组件
@@ -17,8 +18,32 @@ const VxeDynamics = defineVxeComponent({
         const VxeUIDrawerComponent = VxeUI.getComponent('vxe-drawer');
         const VxeUILoadingComponent = VxeUI.getComponent('vxe-loading');
         const VxeUIWatermarkComponent = VxeUI.getComponent('vxe-watermark');
+        const VxeUIContextMenuComponent = VxeUI.getComponent('vxe-context-menu');
         return () => {
-            const { modals, drawers, globalWatermark, globalLoading } = dynamicStore;
+            const { modals, drawers, globalWatermark, globalLoading, globalContextMenu } = dynamicStore;
+            let cmOpts = globalContextMenu;
+            if (globalContextMenu) {
+                const events = globalContextMenu.events || {};
+                const { optionClick, show, hide } = events;
+                cmOpts = Object.assign({}, globalContextMenu, {
+                    onShow(params) {
+                        if (show) {
+                            show(params);
+                        }
+                    },
+                    onHide(params) {
+                        if (hide) {
+                            hide(params);
+                        }
+                        dynamicStore.globalContextMenu = null;
+                    },
+                    onOptionClick(params) {
+                        if (optionClick) {
+                            optionClick(params);
+                        }
+                    }
+                });
+            }
             return [
                 modals.length
                     ? h('div', {
@@ -33,7 +58,8 @@ const VxeDynamics = defineVxeComponent({
                     }, drawers.map((item) => h(VxeUIDrawerComponent, item)))
                     : createCommentVNode(),
                 globalWatermark ? h(VxeUIWatermarkComponent, globalWatermark) : createCommentVNode(),
-                globalLoading ? h(VxeUILoadingComponent, globalLoading) : createCommentVNode()
+                globalLoading ? h(VxeUILoadingComponent, globalLoading) : createCommentVNode(),
+                globalContextMenu ? h(VxeUIContextMenuComponent, cmOpts) : createCommentVNode()
             ];
         };
     }