vxe-pc-ui 4.6.8 → 4.6.10

package/packages/anchor/src/anchor.ts

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, reactive, PropType, VNode, provide, nextTick, onBeforeUnmount, onMounted, watch, createCommentVNode, computed } from 'vue'
+import { defineComponent, ref, h, reactive, PropType, VNode, provide, nextTick, onBeforeUnmount, onMounted, watch, computed } from 'vue'
 import XEUtils from 'xe-utils'
-import { createEvent } from '@vxe-ui/core'
+import { createEvent, renderEmptyElement } from '../../ui'
 import { getOffsetPos } from '../../ui/src/dom'
 import VxeAnchorLinkComponent from './anchor-link'
 
@@ -197,7 +197,7 @@ export default defineComponent({
             ref: refMarkerElem,
             class: 'vxe-anchor--marker'
           })
-          : createCommentVNode()
+          : renderEmptyElement($xeAnchor)
       ])
     }
 

package/packages/breadcrumb/src/breadcrumb-item.ts

@@ -1,5 +1,6 @@
-import { defineComponent, ref, h, reactive, computed, resolveComponent, inject, createCommentVNode, PropType } from 'vue'
+import { defineComponent, ref, h, reactive, computed, resolveComponent, inject, PropType } from 'vue'
 import XEUtils from 'xe-utils'
+import { renderEmptyElement } from '../../ui'
 
 import type { VxeBreadcrumbItemPropTypes, VxeBreadcrumbItemEmits, BreadcrumbItemReactData, BreadcrumbItemPrivateRef, VxeBreadcrumbItemPrivateComputed, VxeBreadcrumbItemConstructor, VxeBreadcrumbItemPrivateMethods, VxeBreadcrumbConstructor, VxeBreadcrumbPrivateMethods } from '../../../types'
 
@@ -90,7 +91,7 @@ export default defineComponent({
           ? h('span', {
             class: 'vxe-breadcrumb-item--separator'
           }, `${separator}`)
-          : createCommentVNode()
+          : renderEmptyElement($xeBreadcrumbItem)
       ])
     }
 

package/packages/button/src/button-group.ts

@@ -1,5 +1,5 @@
-import { defineComponent, h, reactive, provide, PropType, createCommentVNode } from 'vue'
-import { getConfig, createEvent, useSize, usePermission } from '@vxe-ui/core'
+import { defineComponent, h, reactive, provide, PropType } from 'vue'
+import { getConfig, createEvent, useSize, usePermission, renderEmptyElement } from '../../ui'
 import XEUtils from 'xe-utils'
 import VxeButtonComponent from './button'
 
@@ -71,7 +71,7 @@ export default defineComponent({
       const permissionInfo = computePermissionInfo.value
       const defaultSlot = slots.default
       if (!permissionInfo.visible) {
-        return createCommentVNode()
+        return renderEmptyElement($xeButtonGroup)
       }
       return h('div', {
         class: ['vxe-button-group', className ? (XEUtils.isFunction(className) ? className({ $buttonGroup: $xeButtonGroup }) : className) : '', {

package/packages/button/src/button.ts

@@ -1,6 +1,6 @@
-import { defineComponent, h, ref, computed, Teleport, resolveComponent, VNode, onUnmounted, reactive, nextTick, PropType, onMounted, inject, createCommentVNode } from 'vue'
+import { defineComponent, h, ref, computed, Teleport, resolveComponent, VNode, onUnmounted, reactive, nextTick, PropType, onMounted, inject } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, globalEvents, getIcon, createEvent, useSize, usePermission, permission } from '../../ui'
+import { getConfig, globalEvents, getIcon, createEvent, useSize, usePermission, permission, renderEmptyElement } from '../../ui'
 import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { warnLog } from '../../ui/src/log'
@@ -98,7 +98,8 @@ const VxeButtonComponent = defineComponent({
     'click',
     'mouseenter',
     'mouseleave',
-    'dropdown-click'
+    'dropdown-click',
+    'dropdownClick'
   ] as VxeButtonEmits,
   setup (props, context) {
     const { slots, emit } = context
@@ -545,7 +546,7 @@ const VxeButtonComponent = defineComponent({
       const dropdownsSlot = slots.dropdowns
 
       if (!permissionInfo.visible) {
-        return createCommentVNode()
+        return renderEmptyElement($xeButton)
       }
       if (dropdownsSlot || downBtnList.length) {
         const btnOns: Record<string, any> = {}
@@ -716,10 +717,8 @@ const VxeButtonComponent = defineComponent({
     $xeButton.renderVN = renderVN
 
     onMounted(() => {
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (props.type === 'text') {
-          warnLog('vxe.error.delProp', ['type=text', 'mode=text'])
-        }
+      if (props.type === 'text') {
+        warnLog('vxe.error.delProp', ['type=text', 'mode=text'])
       }
 
       globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent)

package/packages/card/src/card.ts

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, reactive, PropType, createCommentVNode, computed } from 'vue'
+import { defineComponent, ref, h, reactive, PropType, computed } from 'vue'
 import { getSlotVNs } from '../../ui/src/vn'
-import { getConfig, createEvent } from '../../ui'
+import { getConfig, createEvent, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
 import XEUtils from 'xe-utils'
@@ -120,9 +120,9 @@ export default defineComponent({
                   ? h('div', {
                     class: 'vxe-card--header-extra'
                   }, getSlotVNs(extraSlot({})))
-                  : createCommentVNode()
+                  : renderEmptyElement($xeCard)
               ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeCard),
         h('div', {
           class: 'vxe-card--body'
         }, [
@@ -130,7 +130,7 @@ export default defineComponent({
             ? h('div', {
               class: 'vxe-card--body-left'
             }, getSlotVNs(leftSlot({})))
-            : createCommentVNode(),
+            : renderEmptyElement($xeCard),
           h('div', {
             class: 'vxe-card--body-content'
           }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
@@ -138,13 +138,13 @@ export default defineComponent({
             ? h('div', {
               class: 'vxe-card--body-right'
             }, getSlotVNs(rightSlot({})))
-            : createCommentVNode()
+            : renderEmptyElement($xeCard)
         ]),
         footerSlot
           ? h('div', {
             class: 'vxe-card--footer'
           }, getSlotVNs(footerSlot({})))
-          : createCommentVNode(),
+          : renderEmptyElement($xeCard),
         /**
          * 加载中
          */

package/packages/carousel/src/carousel.ts

@@ -1,5 +1,5 @@
-import { defineComponent, ref, h, reactive, provide, PropType, watch, nextTick, onMounted, computed, onUnmounted, createCommentVNode } from 'vue'
-import { getConfig, getIcon, createEvent } from '../../ui'
+import { defineComponent, ref, h, reactive, provide, PropType, watch, nextTick, onMounted, computed, onUnmounted } from 'vue'
+import { getConfig, getIcon, createEvent, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit } from '../../ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
@@ -333,7 +333,7 @@ export default defineComponent({
         }, [
           renderItemWrapper(list)
         ]),
-        showIndicators ? renderIndicators(list) : createCommentVNode(),
+        showIndicators ? renderIndicators(list) : renderEmptyElement($xeCarousel),
         h('div', {
           class: 'vxe-carousel--btn-wrapper'
         }, [

package/packages/countdown/src/countdown.ts

@@ -1,5 +1,5 @@
-import { defineComponent, ref, h, reactive, watch, computed, PropType, onUnmounted, onMounted, createCommentVNode } from 'vue'
-import { getConfig, getI18n, createEvent, useSize } from '../../ui'
+import { defineComponent, ref, h, reactive, watch, computed, PropType, onUnmounted, onMounted } from 'vue'
+import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeTextComponent from '../../text/src/text'
 import XEUtils from 'xe-utils'
@@ -211,7 +211,7 @@ export default defineComponent({
                   status: prefixOpts.status
                 })
               ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeCountdown),
         h('div', {
           class: 'vxe-countdown--content'
         }, defaultSlot
@@ -230,7 +230,7 @@ export default defineComponent({
                   status: suffixOpts.status
                 })
               ])
-          : createCommentVNode()
+          : renderEmptyElement($xeCountdown)
       ])
     }
 

package/packages/form/render/index.ts

@@ -100,10 +100,8 @@ function getComponentOns (renderOpts: any, params: any, eFns?: {
   const ons: any = {}
   XEUtils.objectEach(events, (func, key: any) => {
     ons[getOnName(key)] = function (...args: any[]) {
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (!XEUtils.isFunction(func)) {
-          errLog('vxe.error.errFunc', [func])
-        }
+      if (!XEUtils.isFunction(func)) {
+        errLog('vxe.error.errFunc', [func])
       }
       func(params, ...args)
     }

package/packages/form/src/form-group.ts

@@ -1,6 +1,6 @@
-import { defineComponent, onUnmounted, inject, ref, h, reactive, onMounted, provide, createCommentVNode } from 'vue'
+import { defineComponent, onUnmounted, inject, ref, h, reactive, onMounted, provide } from 'vue'
 import { createItem, watchItem, destroyItem, assembleItem, XEFormItemProvide } from './util'
-import { renderer } from '../../ui'
+import { renderer, renderEmptyElement } from '../../ui'
 import { isEnableConf } from '../../ui/src/utils'
 import { formItemProps } from './form-item'
 import { renderTitle, getItemClass, getItemContentClass } from './render'
@@ -13,6 +13,9 @@ export default defineComponent({
   props: formItemProps,
   setup (props, context) {
     const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
     const refElem = ref<HTMLDivElement>()
     const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
     const $xeParentFormGroup = inject<XEFormItemProvide | null>('$xeFormGroup', null)
@@ -36,7 +39,7 @@ export default defineComponent({
       const defaultSlot = slots ? slots.default : null
       const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid }
       if (visible === false) {
-        return createCommentVNode()
+        return renderEmptyElement($xeFormGroup)
       }
       return h('div', {
         ref: refElem,
@@ -53,6 +56,7 @@ export default defineComponent({
     }
 
     const $xeFormGroup = {
+      xID,
       formItem,
 
       renderVN

package/packages/form/src/form-item.ts

@@ -1,6 +1,6 @@
-import { defineComponent, h, onUnmounted, inject, ref, provide, onMounted, PropType, reactive, createCommentVNode } from 'vue'
+import { defineComponent, h, onUnmounted, inject, ref, provide, onMounted, PropType, reactive } from 'vue'
 import { createItem, watchItem, destroyItem, assembleItem, XEFormItemProvide } from './util'
-import { renderer } from '../../ui'
+import { renderer, renderEmptyElement } from '../../ui'
 import { isEnableConf } from '../../ui/src/utils'
 import { renderTitle, renderItemContent, getItemClass, getItemContentClass } from './render'
 import XEUtils from 'xe-utils'
@@ -90,6 +90,8 @@ export default defineComponent({
   name: 'VxeFormItem',
   props: formItemProps,
   setup (props, { slots }) {
+    const xID = XEUtils.uniqueId()
+
     const refElem = ref<HTMLDivElement>()
     const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
     const $xeFormGroup = inject<XEFormItemProvide | null>('$xeFormGroup', null)
@@ -110,7 +112,7 @@ export default defineComponent({
       const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null
       const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid }
       if (visible === false) {
-        return createCommentVNode()
+        return renderEmptyElement($xeFormitem)
       }
       return h('div', {
         ref: refElem,
@@ -120,7 +122,7 @@ export default defineComponent({
       }, [
         renderTitle($xeForm, item),
         showContent === false
-          ? createCommentVNode()
+          ? renderEmptyElement($xeFormitem)
           : h('div', {
             class: getItemContentClass($xeForm, item),
             style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
@@ -140,6 +142,7 @@ export default defineComponent({
     }
 
     const $xeFormitem = {
+      xID,
       formItem,
 
       renderVN

package/packages/form/src/form.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, ref, Ref, provide, computed, inject, reactive, watch, nextTick, PropType, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { getConfig, validators, renderer, createEvent, useSize } from '../../ui'
-import { getFuncText, isEnableConf, eqEmptyValue } from '../../ui/src/utils'
+import { getFuncText, isEnableConf } from '../../ui/src/utils'
 import { scrollToView } from '../../ui/src/dom'
 import { createItem, handleFieldOrItem, isHiddenItem, isActiveItem } from './util'
 import VxeTooltipComponent from '../../tooltip/src/tooltip'
@@ -39,27 +39,104 @@ class Rule {
   [key: string]: any
 }
 
-const validErrorRuleValue = (rule: VxeFormDefines.FormRule, val: any) => {
+// 如果存在 pattern，判断正则
+function validREValue (pattern: string | RegExp | undefined, val: string) {
+  if (pattern && !(XEUtils.isRegExp(pattern) ? pattern : new RegExp(pattern)).test(val)) {
+    return false
+  }
+  return true
+}
+
+// 如果存在 max，判断最大值
+function validMaxValue (max: string | number | undefined, num: number) {
+  if (!XEUtils.eqNull(max) && num > XEUtils.toNumber(max)) {
+    return false
+  }
+  return true
+}
+
+// 如果存在 min，判断最小值
+function validMinValue (min: string | number | undefined, num: number) {
+  if (!XEUtils.eqNull(min) && num < XEUtils.toNumber(min)) {
+    return false
+  }
+  return true
+}
+
+function validRuleValue (rule: VxeFormDefines.FormRule, val: any, required: boolean | undefined) {
   const { type, min, max, pattern } = rule
+  const isArrType = type === 'array'
   const isNumType = type === 'number'
-  const numVal = isNumType ? XEUtils.toNumber(val) : XEUtils.getSize(val)
-  // 判断数值
-  if (isNumType && isNaN(val)) {
-    return true
-  }
-  // 如果存在 min，判断最小值
-  if (!XEUtils.eqNull(min) && numVal < XEUtils.toNumber(min)) {
-    return true
+  const isStrType = type === 'string'
+  const strVal = `${val}`
+  if (!validREValue(pattern, strVal)) {
+    return false
   }
-  // 如果存在 max，判断最大值
-  if (!XEUtils.eqNull(max) && numVal > XEUtils.toNumber(max)) {
-    return true
+  if (isArrType) {
+    if (!XEUtils.isArray(val)) {
+      return false
+    }
+    if (required) {
+      if (!val.length) {
+        return false
+      }
+    }
+    if (!validMinValue(min, val.length)) {
+      return false
+    }
+    if (!validMaxValue(max, val.length)) {
+      return false
+    }
+  } else if (isNumType) {
+    const numVal = Number(val)
+    if (isNaN(numVal)) {
+      return false
+    }
+    if (!validMinValue(min, numVal)) {
+      return false
+    }
+    if (!validMaxValue(max, numVal)) {
+      return false
+    }
+  } else {
+    if (isStrType) {
+      if (!XEUtils.isString(val)) {
+        return false
+      }
+    }
+    if (required) {
+      if (!strVal) {
+        return false
+      }
+    }
+    if (!validMinValue(min, strVal.length)) {
+      return false
+    }
+    if (!validMaxValue(max, strVal.length)) {
+      return false
+    }
   }
-  // 如果存在 pattern，正则校验
-  if (pattern && !(XEUtils.isRegExp(pattern) ? pattern : new RegExp(pattern)).test(val)) {
-    return true
+  return true
+}
+
+function checkRuleStatus (rule: VxeFormDefines.FormRule, val: any) {
+  const { required } = rule
+  const isEmptyVal = XEUtils.eqNull(val)
+  if (required) {
+    if (isEmptyVal) {
+      return false
+    }
+    if (!validRuleValue(rule, val, required)) {
+      return false
+    }
+  } else {
+    if (!isEmptyVal) {
+      if (!validRuleValue(rule, val, required)) {
+        return false
+      }
+    }
   }
-  return false
+  return true
 }
 
 export default defineComponent({
@@ -416,7 +493,7 @@ export default defineComponent({
             if (rules) {
               const itemValue = XEUtils.isUndefined(val) ? XEUtils.get(data, property) : val
               rules.forEach((rule) => {
-                const { type, trigger, required, validator } = rule
+                const { trigger, validator } = rule
                 if (validType === 'all' || !trigger || validType === trigger) {
                   if (validator) {
                     const validParams = {
@@ -436,14 +513,10 @@ export default defineComponent({
                         if (validatorMethod) {
                           customValid = validatorMethod(validParams)
                         } else {
-                          if (process.env.VUE_APP_VXE_ENV === 'development') {
-                            warnLog('vxe.error.notValidators', [validator])
-                          }
+                          warnLog('vxe.error.notValidators', [validator])
                         }
                       } else {
-                        if (process.env.VUE_APP_VXE_ENV === 'development') {
-                          errLog('vxe.error.notValidators', [validator])
-                        }
+                        errLog('vxe.error.notValidators', [validator])
                       }
                     } else {
                       customValid = validator(validParams)
@@ -461,17 +534,7 @@ export default defineComponent({
                       }
                     }
                   } else {
-                    const isArrType = type === 'array'
-                    const isArrVal = XEUtils.isArray(itemValue)
-                    let hasEmpty = true
-                    if (isArrType || isArrVal) {
-                      hasEmpty = !isArrVal || !itemValue.length
-                    } else if (XEUtils.isString(itemValue)) {
-                      hasEmpty = eqEmptyValue(itemValue.trim())
-                    } else {
-                      hasEmpty = eqEmptyValue(itemValue)
-                    }
-                    if (required ? (hasEmpty || validErrorRuleValue(rule, itemValue)) : (!hasEmpty && validErrorRuleValue(rule, itemValue))) {
+                    if (!checkRuleStatus(rule, itemValue)) {
                       errorRules.push(new Rule(rule))
                     }
                   }

package/packages/form-design/src/default-setting-form.ts

@@ -1,5 +1,5 @@
 import { h, defineComponent, PropType, inject, createCommentVNode } from 'vue'
-import { getIcon, getI18n } from '@vxe-ui/core'
+import { getIcon, getI18n } from '../../ui'
 import VxeFormComponent from '../../form/src/form'
 import VxeFormItemComponent from '../../form/src/form-item'
 import VxeSwitchComponent from '../../switch/src/switch'

package/packages/form-design/src/form-view.ts

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, reactive, nextTick, PropType, inject, provide, watch, createCommentVNode } from 'vue'
+import { defineComponent, ref, h, reactive, nextTick, PropType, inject, provide, watch } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, renderer, useSize, createEvent } from '../../ui'
+import { getConfig, renderer, useSize, createEvent, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createDefaultFormViewPCFormConfig } from './default-setting-data'
 import VxeFormComponent from '../../form/src/form'
@@ -248,9 +248,7 @@ export default defineComponent({
        * @deprecated
        */
       updateItemStatus (widget, value) {
-        if (process.env.VUE_APP_VXE_ENV === 'development') {
-          warnLog('vxe.error.delFunc', ['updateItemStatus', 'updateWidgetStatus'])
-        }
+        warnLog('vxe.error.delFunc', ['updateItemStatus', 'updateWidgetStatus'])
         return updateWidgetStatus(widget, value)
       }
     }
@@ -287,7 +285,7 @@ export default defineComponent({
           ? h('div', {
             class: 'vxe-form-view--top'
           }, getSlotVNs(topSlot({ $formView: $xeFormView })))
-          : createCommentVNode(),
+          : renderEmptyElement($xeFormView),
         h(VxeFormComponent, {
           ref: formRef,
           ...formConfig,
@@ -309,7 +307,7 @@ export default defineComponent({
                     return headerSlot({})
                   }
                 })
-                : createCommentVNode(),
+                : renderEmptyElement($xeFormView),
               ...widgetObjList.map(widget => {
                 const { name } = widget
                 const compConf = renderer.get(name) || {}
@@ -347,7 +345,7 @@ export default defineComponent({
                     return footerSlot({})
                   }
                 })
-                : createCommentVNode()
+                : renderEmptyElement($xeFormView)
             ]
           }
         }),
@@ -355,7 +353,7 @@ export default defineComponent({
           ? h('div', {
             class: 'vxe-form-view--bottom'
           }, getSlotVNs(bottomSlot({ $formView: $xeFormView })))
-          : createCommentVNode()
+          : renderEmptyElement($xeFormView)
       ])
     }
 

package/packages/icon-picker/src/icon-picker.ts

@@ -1,6 +1,6 @@
-import { defineComponent, h, Teleport, PropType, ref, inject, watch, computed, provide, onUnmounted, reactive, nextTick, onMounted, createCommentVNode } from 'vue'
+import { defineComponent, h, Teleport, PropType, ref, inject, watch, computed, provide, onUnmounted, reactive, nextTick, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, globalEvents, createEvent, useSize, GLOBAL_EVENT_KEYS } from '../../ui'
+import { getConfig, getIcon, getI18n, globalEvents, createEvent, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui'
 import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 
@@ -478,7 +478,7 @@ export default defineComponent({
               ? h('div', {
                 class: 'vxe-ico-picker--item-title'
               }, `${item.title || ''}`)
-              : createCommentVNode()
+              : renderEmptyElement($xeIconPicker)
           ])
         }))
       }))
@@ -575,7 +575,7 @@ export default defineComponent({
               }, [
                 renderIconWrapper()
               ])
-              : createCommentVNode()
+              : renderEmptyElement($xeIconPicker)
           ])
         ])
       ])

package/packages/image/src/group.ts

@@ -16,6 +16,7 @@ export default defineComponent({
     },
     imageStyle: Object as PropType<VxeImageGroupPropTypes.ImageStyle>,
     size: { type: String as PropType<VxeImageGroupPropTypes.Size>, default: () => getConfig().imageGroup.size || getConfig().size },
+    toolbarConfig: Object as PropType<VxeImageGroupPropTypes.ToolbarConfig>,
     showPrintButton: {
       type: Boolean as PropType<VxeImageGroupPropTypes.ShowPrintButton>,
       default: () => getConfig().imageGroup.showPrintButton
@@ -78,13 +79,14 @@ export default defineComponent({
 
     const imageGroupPrivateMethods: ImageGroupPrivateMethods = {
       handleClickImgEvent (evnt, params) {
-        const { showPreview, showPrintButton, showDownloadButton } = props
+        const { showPreview, toolbarConfig, showPrintButton, showDownloadButton } = props
         const { url } = params
         const imgList = computeImgList.value
         if (showPreview && url) {
           openPreviewImage({
             activeIndex: Math.max(0, XEUtils.findIndexOf(imgList, item => item.url === url)),
             urlList: imgList,
+            toolbarConfig,
             showPrintButton,
             showDownloadButton
           })

package/packages/image/src/image.ts

@@ -20,6 +20,7 @@ export default defineComponent({
       type: Boolean as PropType<VxeImagePropTypes.MaskClosable>,
       default: () => getConfig().image.maskClosable
     },
+    toolbarConfig: Object as PropType<VxeImagePropTypes.ToolbarConfig>,
     showPreview: {
       type: Boolean as PropType<VxeImagePropTypes.ShowPreview>,
       default: () => getConfig().image.showPreview
@@ -122,7 +123,7 @@ export default defineComponent({
     }
 
     const clickEvent = (evnt: MouseEvent) => {
-      const { showPreview, showPrintButton, showDownloadButton, maskClosable } = props
+      const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable } = props
       const imgList = computeImgList.value
       const imgUrl = computeImgUrl.value
       if ($xeImageGroup) {
@@ -131,6 +132,7 @@ export default defineComponent({
         if (showPreview && imgUrl) {
           openPreviewImage({
             urlList: imgList,
+            toolbarConfig,
             showPrintButton,
             showDownloadButton,
             maskClosable