vxe-pc-ui 4.11.30 → 4.11.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.11.30",
+  "version": "4.11.32",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/backtop/src/backtop.ts

@@ -1,4 +1,4 @@
-import { ref, h, reactive, PropType, watch, onMounted, nextTick, computed, onBeforeUnmount, onUnmounted } from 'vue'
+import { ref, h, reactive, PropType, 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'
@@ -248,9 +248,6 @@ export default defineVxeComponent({
     onBeforeUnmount(() => {
       removeScrollEvent()
       XEUtils.assign(reactData, createReactData())
-    })
-
-    onUnmounted(() => {
       XEUtils.assign(internalData, createInternalData())
     })
 

package/packages/button/src/button.ts

@@ -8,7 +8,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog } from '../../ui/src/log'
 import VxeTooltipComponent from '../../tooltip/src/tooltip'
 
-import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, VxeButtonDefines, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types'
+import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, VxeButtonDefines, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf, VxeTreeConstructor, VxeTreePrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const VxeButtonComponent = defineVxeComponent({
@@ -93,6 +93,10 @@ const VxeButtonComponent = defineVxeComponent({
     prefixTooltip: Object as PropType<VxeButtonPropTypes.PrefixTooltip>,
     suffixTooltip: Object as PropType<VxeButtonPropTypes.SuffixTooltip>,
     options: Array as PropType<VxeButtonPropTypes.Options>,
+    showDropdownIcon: {
+      type: Boolean,
+      default: () => getConfig().button.showDropdownIcon
+    },
     /**
      * 在下拉面板关闭时销毁内容
      */
@@ -121,6 +125,7 @@ const VxeButtonComponent = defineVxeComponent({
     const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null)
     const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeTree = inject<(VxeTreeConstructor & VxeTreePrivateMethods) | null>('$xeTree', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
     const $xeButtonGroup = inject<(VxeButtonGroupConstructor & VxeButtonGroupPrivateMethods) | null>('$xeButtonGroup', null)
 
@@ -171,7 +176,7 @@ const VxeButtonComponent = defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
           return true
         }
       }
@@ -592,7 +597,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
@@ -648,11 +653,13 @@ const VxeButtonComponent = defineVxeComponent({
               ...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', {
@@ -671,11 +678,13 @@ const VxeButtonComponent = defineVxeComponent({
               disabled: btnDisabled || loading,
               onClick: clickTargetEvent,
               ...btnOns
-            }, renderContent().concat([
-              h('i', {
-                class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-              })
-            ])),
+            }, renderContent().concat(showDropdownIcon
+              ? [
+                  h('i', {
+                    class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+                  })
+                ]
+              : [])),
           h(Teleport, {
             to: 'body',
             disabled: btnTransfer ? !initialized : true

package/packages/components.ts

@@ -25,6 +25,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'
@@ -122,6 +123,7 @@ const components = [
   VxeCollapse,
   VxeCollapsePane,
   VxeColorPicker,
+  VxeContextMenu,
   VxeCountdown,
   VxeDatePanel,
   VxeDatePicker,
@@ -236,6 +238,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/packages/context-menu/index.ts

@@ -0,0 +1,54 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeContextMenuComponent from './src/context-menu'
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'
+
+import type { VxeContextMenuDefines } from '../../types'
+
+export const VxeContextMenu = Object.assign({}, VxeContextMenuComponent, {
+  install (app: App) {
+    app.component(VxeContextMenuComponent.name as string, VxeContextMenuComponent)
+  }
+})
+
+function openMenu (opts: VxeContextMenuDefines.ContextMenuOpenOptions, x: number, y :number) {
+  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: VxeContextMenuDefines.ContextMenuOpenOptions) {
+    const opts = Object.assign({ x: 0, y: 0 }, options)
+    openMenu(opts, opts.x, opts.y)
+  },
+  openByEvent (evnt: MouseEvent, options: VxeContextMenuDefines.ContextMenuEventOpenOptions) {
+    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/packages/context-menu/src/context-menu.ts

@@ -0,0 +1,388 @@
+import { ref, h, reactive, PropType, computed, VNode, 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'
+
+import type { ContextMenuInternalData, ContextMenuReactData, VxeContextMenuPropTypes, VxeContextMenuDefines, ContextMenuPrivateRef, VxeContextMenuEmits, VxeContextMenuPrivateComputed, ContextMenuMethods, ContextMenuPrivateMethods, VxeContextMenuConstructor, VxeContextMenuPrivateMethods, ValueOf } from '../../../types'
+
+function createInternalData (): ContextMenuInternalData {
+  return {
+  }
+}
+
+function createReactData (): ContextMenuReactData {
+  return {
+    visible: false,
+    activeOption: null,
+    activeChildOption: null,
+    popupStyle: {
+      top: '',
+      left: '',
+      zIndex: 0
+    },
+    childPos: ''
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeContextMenu',
+  props: {
+    modelValue: Boolean as PropType<VxeContextMenuPropTypes.ModelValue>,
+    className: String as PropType<VxeContextMenuPropTypes.ClassName>,
+    size: {
+      type: String as PropType<VxeContextMenuPropTypes.Size>,
+      default: () => getConfig().contextMenu.size || getConfig().size
+    },
+    options: Array as PropType<VxeContextMenuPropTypes.Options>,
+    x: [Number, String] as PropType<VxeContextMenuPropTypes.X>,
+    y: [Number, String] as PropType<VxeContextMenuPropTypes.Y>,
+    zIndex: [Number, String] as PropType<VxeContextMenuPropTypes.ZIndex>,
+    position: {
+      type: String as PropType<VxeContextMenuPropTypes.Position>,
+      default: () => getConfig().contextMenu.position
+    },
+    destroyOnClose: {
+      type: Boolean as PropType<VxeContextMenuPropTypes.DestroyOnClose>,
+      default: () => getConfig().contextMenu.destroyOnClose
+    },
+    transfer: {
+      type: Boolean as PropType<VxeContextMenuPropTypes.Transfer>,
+      default: () => getConfig().contextMenu.transfer
+    }
+  },
+  emits: [
+    'update:modelValue',
+    'option-click',
+    'change',
+    'show',
+    'hide'
+  ] as VxeContextMenuEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const { computeSize } = useSize(props)
+
+    const internalData = createInternalData()
+    const reactData = reactive(createReactData())
+
+    const refMaps: ContextMenuPrivateRef = {
+      refElem
+    }
+
+    const computeMenuGroups = computed(() => {
+      const { options } = props
+      return options || []
+    })
+
+    const computeTopAndLeft = computed(() => {
+      const { x, y } = props
+      return `${x}${y}`
+    })
+
+    const computeMaps: VxeContextMenuPrivateComputed = {
+    }
+
+    const $xeContextMenu = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeContextMenuConstructor & VxeContextMenuPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeContextMenuEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $contextMenu: $xeContextMenu }, params))
+    }
+
+    const emitModel = (value: any) => {
+      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: ContextMenuMethods = {
+      dispatchEvent,
+      open,
+      close
+    }
+
+    const hasChildMenu = (item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption) => {
+      const { children } = item as VxeContextMenuDefines.MenuFirstOption
+      return children && children.some((child) => child.visible !== false)
+    }
+
+    const handleItemClickEvent = (evnt: MouseEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption) => {
+      if (!hasChildMenu(item)) {
+        dispatchEvent('option-click', { option: item }, evnt)
+        close()
+      }
+    }
+
+    const handleItemMouseenterEvent = (evnt: MouseEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption, parentitem?: VxeContextMenuDefines.MenuFirstOption | null) => {
+      reactData.activeOption = parentitem || item
+      reactData.activeChildOption = parentitem ? item : null
+    }
+
+    const handleItemMouseleaveEvent = () => {
+      reactData.activeOption = null
+      reactData.activeChildOption = null
+    }
+
+    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
+      const { visible } = reactData
+      if (visible) {
+        const el = refElem.value
+        if (!getEventTargetNode(evnt, el, '').flag) {
+          close()
+        }
+      }
+    }
+
+    const tagPrivateMethods: ContextMenuPrivateMethods = {
+    }
+
+    Object.assign($xeContextMenu, tagMethods, tagPrivateMethods)
+
+    const renderMenuItem = (item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption, parentItem: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption | null, hasChildMenus?: boolean) => {
+      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
+        }],
+        onClick (evnt) {
+          handleItemClickEvent(evnt, item)
+        },
+        onMouseenter (evnt) {
+          handleItemMouseenterEvent(evnt, item, parentItem)
+        },
+        onMouseleave: handleItemMouseleaveEvent
+      }, [
+        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: VNode[] = []
+      menuGroups.forEach((menuList, gIndex) => {
+        const moVNs: VNode[] = []
+        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', firstItem.className || '', {
+                'is--active': activeOption === firstItem
+              }]
+            }, [
+              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', twoItem.className || '', {
+                      'is--active': activeChildOption === twoItem
+                    }]
+                  }, [
+                    renderMenuItem(twoItem, firstItem)
+                  ])
+                }))
+                : renderEmptyElement($xeContextMenu),
+              renderMenuItem(firstItem, null, 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 === 'absolute' ? ('is--' + position) : 'is--fixed', `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/packages/dynamics/index.ts

@@ -2,7 +2,7 @@ import { h, createApp, reactive, createCommentVNode } from 'vue'
 import { defineVxeComponent } from '../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
 
-import type { VxeModalDefines, VxeDrawerDefines, VxeLoadingProps, VxeWatermarkProps } from '../../types'
+import type { VxeModalDefines, VxeDrawerDefines, VxeLoadingProps, VxeWatermarkProps, VxeContextMenuProps, VxeContextMenuDefines, VxeContextMenuEventProps } from '../../types'
 
 let dynamicContainerElem: HTMLElement
 
@@ -11,12 +11,14 @@ export const dynamicStore = reactive<{
   drawers: VxeDrawerDefines.DrawerOptions[]
   globalLoading: null | VxeLoadingProps
   globalWatermark: null | VxeWatermarkProps
-}>({
-  modals: [],
-  drawers: [],
-  globalLoading: null,
-  globalWatermark: null
-})
+  globalContextMenu: null |(VxeContextMenuProps & VxeContextMenuDefines.ContextMenuOpenOptions)
+    }>({
+      modals: [],
+      drawers: [],
+      globalLoading: null,
+      globalWatermark: null,
+      globalContextMenu: null
+    })
 
 /**
  * 动态组件
@@ -27,9 +29,33 @@ 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: (VxeContextMenuProps & VxeContextMenuEventProps) | null = globalContextMenu
+      if (globalContextMenu) {
+        const events = globalContextMenu.events || {}
+        const { optionClick, show, hide } = events
+        cmOpts = Object.assign({}, globalContextMenu, {
+          onShow (params: VxeContextMenuDefines.ShowEventParams) {
+            if (show) {
+              show(params)
+            }
+          },
+          onHide (params: VxeContextMenuDefines.HideEventParams) {
+            if (hide) {
+              hide(params)
+            }
+            dynamicStore.globalContextMenu = null
+          },
+          onOptionClick (params: VxeContextMenuDefines.OptionClickEventParams) {
+            if (optionClick) {
+              optionClick(params)
+            }
+          }
+        })
+      }
       return [
         modals.length
           ? h('div', {
@@ -44,7 +70,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()
       ]
     }
   }

package/packages/language/ar-EG.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'ثانية'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/de-DE.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Zweite'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/en-US.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Second'
       }
     },
+    contextMenu: {
+      loadingText: 'Loading'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/es-ES.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Segundo'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',