vxe-pc-ui 4.6.7 → 4.6.9

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-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'
@@ -287,7 +287,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 +309,7 @@ export default defineComponent({
                     return headerSlot({})
                   }
                 })
-                : createCommentVNode(),
+                : renderEmptyElement($xeFormView),
               ...widgetObjList.map(widget => {
                 const { name } = widget
                 const compConf = renderer.get(name) || {}
@@ -347,7 +347,7 @@ export default defineComponent({
                     return footerSlot({})
                   }
                 })
-                : createCommentVNode()
+                : renderEmptyElement($xeFormView)
             ]
           }
         }),
@@ -355,7 +355,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

package/packages/image/src/preview.ts

@@ -1,9 +1,9 @@
-import { defineComponent, h, provide, PropType, ref, reactive, computed, watch, onMounted, onUnmounted, createCommentVNode, onBeforeUnmount } from 'vue'
-import { VxeUI, getConfig, createEvent, getIcon, globalEvents, GLOBAL_EVENT_KEYS, getI18n } from '../../ui'
+import { defineComponent, h, provide, PropType, ref, reactive, computed, watch, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
+import { VxeUI, getConfig, createEvent, getIcon, globalEvents, GLOBAL_EVENT_KEYS, getI18n, renderEmptyElement } from '../../ui'
 import XEUtils from 'xe-utils'
 import { getDomNode, addClass, removeClass, hasControlKey } from '../../ui/src/dom'
 
-import type { VxeImagePreviewConstructor, ImagePreviewReactData, ImagePreviewPrivateRef, VxeGlobalIcon, VxeImagePreviewEmits, VxeImagePreviewPrivateMethods, ImagePreviewPrivateMethods, ImagePreviewPrivateComputed, ImagePreviewMethods, VxeImagePreviewPropTypes, ValueOf } from '../../../types'
+import type { VxeImagePreviewConstructor, ImagePreviewReactData, ImagePreviewPrivateRef, VxeGlobalIcon, VxeImagePreviewEmits, VxeImagePreviewPrivateMethods, ImagePreviewPrivateMethods, ImagePreviewPrivateComputed, ImagePreviewMethods, VxeImagePreviewPropTypes, ValueOf, VxeImagePreviewDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeImagePreview',
@@ -30,6 +30,7 @@ export default defineComponent({
       type: Boolean as PropType<VxeImagePreviewPropTypes.ShowDownloadButton>,
       default: () => getConfig().imagePreview.showDownloadButton
     },
+    toolbarConfig: Object as PropType<VxeImagePreviewPropTypes.ToolbarConfig>,
     beforeDownloadMethod: Function as PropType<VxeImagePreviewPropTypes.BeforeDownloadMethod>,
     downloadMethod: Function as PropType<VxeImagePreviewPropTypes.DownloadMethod>
   },
@@ -67,6 +68,10 @@ export default defineComponent({
       return XEUtils.toNumber(props.marginSize || 0) || 16
     })
 
+    const computeToolbarOpts = computed(() => {
+      return Object.assign({}, getConfig().imagePreview.toolbarConfig, props.toolbarConfig)
+    })
+
     const computeRotateText = computed(() => {
       const { offsetRotate } = reactData
       if (offsetRotate) {
@@ -314,10 +319,13 @@ export default defineComponent({
 
     const handleDownloadImg = (evnt: MouseEvent) => {
       const { activeIndex } = reactData
+      const toolbarOpts = computeToolbarOpts.value
+      const btnConf = toolbarOpts.download
+      const btnOpts = XEUtils.isBoolean(btnConf) ? {} : (btnConf ? Object.assign({}, btnConf) : {})
       const imgList = computeImgList.value
       const imgUrl = imgList[activeIndex || 0]
-      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().imagePreview.beforeDownloadMethod
-      const downloadFn = props.downloadMethod || getConfig().imagePreview.downloadMethod
+      const beforeDownloadFn = props.beforeDownloadMethod || btnOpts.beforeDownloadMethod || getConfig().imagePreview.beforeDownloadMethod
+      const downloadFn = props.downloadMethod || btnOpts.downloadMethod || getConfig().imagePreview.downloadMethod
       Promise.resolve(
         beforeDownloadFn
           ? beforeDownloadFn({
@@ -345,7 +353,7 @@ export default defineComponent({
       })
     }
 
-    const handleOperationBtn = (evnt: MouseEvent, code: string) => {
+    const handleOperationBtn = (evnt: MouseEvent, code: VxeImagePreviewDefines.ToolbarCode) => {
       const { activeIndex } = reactData
       const imgList = computeImgList.value
       const imgUrl = imgList[activeIndex || 0]
@@ -501,18 +509,24 @@ export default defineComponent({
       }))
     }
 
-    const renderOperationBtn = (code: string, icon: keyof VxeGlobalIcon) => {
-      return h('div', {
-        class: 'vxe-image-preview--operation-btn',
-        title: getI18n(`vxe.imagePreview.operBtn.${code}`),
-        onClick (evnt) {
-          handleOperationBtn(evnt, code)
-        }
-      }, [
-        h('i', {
-          class: getIcon()[icon]
-        })
-      ])
+    const renderOperationBtn = (code: VxeImagePreviewDefines.ToolbarCode, icon: keyof VxeGlobalIcon) => {
+      const toolbarOpts = computeToolbarOpts.value
+      const btnConf = toolbarOpts[code]
+      const btnOpts = XEUtils.isBoolean(btnConf) ? {} : (btnConf ? Object.assign({}, btnConf) : {})
+      const showBtn = btnConf !== false
+      return showBtn
+        ? h('div', {
+          class: 'vxe-image-preview--operation-btn',
+          title: getI18n(`vxe.imagePreview.operBtn.${code}`),
+          onClick (evnt) {
+            handleOperationBtn(evnt, code)
+          }
+        }, [
+          h('i', {
+            class: btnOpts.icon || getIcon()[icon]
+          })
+        ])
+        : renderEmptyElement($xeImagePreview)
     }
 
     const renderBtnWrapper = () => {
@@ -521,6 +535,7 @@ export default defineComponent({
       const imgList = computeImgList.value
       const rotateText = computeRotateText.value
       const scaleText = computeScaleText.value
+      const toolbarOpts = computeToolbarOpts.value
 
       return h('div', {
         class: 'vxe-image-preview--btn-wrapper'
@@ -551,7 +566,7 @@ export default defineComponent({
               class: getIcon().IMAGE_PREVIEW_PREVIOUS
             })
           ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeImagePreview),
         imgList.length > 1
           ? h('div', {
             class: 'vxe-image-preview--next-btn',
@@ -563,7 +578,7 @@ export default defineComponent({
               class: getIcon().IMAGE_PREVIEW_NEXT
             })
           ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeImagePreview),
         h('div', {
           class: 'vxe-image-preview--operation-info'
         }, [
@@ -593,8 +608,8 @@ export default defineComponent({
           renderOperationBtn('pct11', 'IMAGE_PREVIEW_PCT_1_1'),
           renderOperationBtn('rotateLeft', 'IMAGE_PREVIEW_ROTATE_LEFT'),
           renderOperationBtn('rotateRight', 'IMAGE_PREVIEW_ROTATE_RIGHT'),
-          showPrintButton ? renderOperationBtn('print', 'IMAGE_PREVIEW_PRINT') : createCommentVNode(),
-          showDownloadButton ? renderOperationBtn('download', 'IMAGE_PREVIEW_DOWNLOAD') : createCommentVNode()
+          showPrintButton || toolbarOpts.print ? renderOperationBtn('print', 'IMAGE_PREVIEW_PRINT') : renderEmptyElement($xeImagePreview),
+          showDownloadButton || toolbarOpts.download ? renderOperationBtn('download', 'IMAGE_PREVIEW_DOWNLOAD') : renderEmptyElement($xeImagePreview)
         ])
       ])
     }

package/packages/image/src/util.ts

@@ -30,6 +30,7 @@ export const openPreviewImage: VxeImageDefines.PreviewImageFunction = (options)
             urlField: opts.urlField,
             marginSize: opts.marginSize,
             maskClosable: opts.maskClosable,
+            toolbarConfig: opts.toolbarConfig,
             showPrintButton: opts.showPrintButton,
             showDownloadButton: opts.showDownloadButton,
             beforeDownloadMethod: opts.beforeDownloadMethod,

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

@@ -1,5 +1,5 @@
-import { defineComponent, ref, PropType, h, reactive, provide, watch, nextTick, computed, createCommentVNode } from 'vue'
-import { VxeUI, getConfig, createEvent, getI18n, renderer, useSize } from '../../ui'
+import { defineComponent, ref, PropType, h, reactive, provide, watch, nextTick, computed } from 'vue'
+import { VxeUI, getConfig, createEvent, getI18n, renderer, useSize, renderEmptyElement } from '../../ui'
 import { errLog } from '../../ui/src/log'
 import { toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -445,7 +445,7 @@ export default defineComponent({
                 }), Object.assign({}, slots, {
                   default: undefined
                 }))
-                : createCommentVNode())
+                : renderEmptyElement($xeListView))
         ]),
         /**
          * 加载中

package/packages/loading/src/loading.ts

@@ -1,5 +1,5 @@
-import { reactive, defineComponent, h, computed, PropType, watch, createCommentVNode } from 'vue'
-import { getConfig, getIcon, getI18n, createEvent, useSize } from '../../ui'
+import { reactive, defineComponent, h, computed, PropType, watch } from 'vue'
+import { getConfig, getIcon, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import XEUtils from 'xe-utils'
 
@@ -94,7 +94,7 @@ export default defineComponent({
       const loadingText = computeLoadingText.value
 
       if (!initialized && !modelValue) {
-        return createCommentVNode()
+        return renderEmptyElement($xeLoading)
       }
 
       return h('div', {

package/packages/menu/src/menu.ts

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, reactive, PropType, inject, resolveComponent, createCommentVNode, watch, VNode, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
+import { defineComponent, ref, h, reactive, PropType, inject, resolveComponent, watch, VNode, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, createEvent, permission, useSize, globalEvents } from '../../ui'
+import { getConfig, getIcon, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -302,7 +302,7 @@ export default defineComponent({
               class: isExpand ? getIcon().MENU_ITEM_EXPAND_OPEN : getIcon().MENU_ITEM_EXPAND_CLOSE
             })
           ])
-          : createCommentVNode()
+          : renderEmptyElement($xeMenu)
       ]
     }
 
@@ -312,7 +312,7 @@ export default defineComponent({
       const isCollapsed = computeIsCollapsed.value
       if (item.permissionCode) {
         if (!permission.checkVisible(item.permissionCode)) {
-          return createCommentVNode()
+          return renderEmptyElement($xeMenu)
         }
       }
       return h('div', {
@@ -343,7 +343,7 @@ export default defineComponent({
           ? h('div', {
             class: 'vxe-menu--item-group'
           }, childList.map(child => renderDefaultChildren(child)))
-          : createCommentVNode()
+          : renderEmptyElement($xeMenu)
       ])
     }
 
@@ -351,7 +351,7 @@ export default defineComponent({
       const { itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item
       if (item.permissionCode) {
         if (!permission.checkVisible(item.permissionCode)) {
-          return createCommentVNode()
+          return renderEmptyElement($xeMenu)
         }
       }
       return h('div', {
@@ -381,7 +381,7 @@ export default defineComponent({
           ? h('div', {
             class: 'vxe-menu--item-group'
           }, childList.map(child => renderDefaultChildren(child)))
-          : createCommentVNode()
+          : renderEmptyElement($xeMenu)
       ])
     }
 
@@ -418,9 +418,9 @@ export default defineComponent({
               ? h('div', {
                 class: 'vxe-menu--item-list'
               }, menuList.map(child => renderDefaultChildren(child)))
-              : createCommentVNode()
+              : renderEmptyElement($xeMenu)
           ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeMenu),
         /**
          * 加载中
          */

package/packages/modal/src/modal.ts

@@ -1,8 +1,8 @@
-import { defineComponent, h, Teleport, ref, Ref, inject, computed, reactive, provide, nextTick, watch, PropType, VNode, onMounted, onUnmounted, createCommentVNode } from 'vue'
+import { defineComponent, h, Teleport, ref, Ref, inject, computed, reactive, provide, nextTick, watch, PropType, VNode, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { getDomNode, getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText, handleBooleanDefaultValue } from '../../ui/src/utils'
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui'
+import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
 import VxeButtonComponent from '../../button/src/button'
 import VxeLoadingComponent from '../../loading/index'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -1167,7 +1167,7 @@ export default defineComponent({
             ? h('div', {
               class: 'vxe-modal--corner-wrapper'
             }, getSlotVNs(cornerSlot({ $modal: $xeModal })))
-            : createCommentVNode(),
+            : renderEmptyElement($xeModal),
           (XEUtils.isBoolean(showMinimize) ? showMinimize : showZoom)
             ? h('div', {
               class: ['vxe-modal--zoom-btn', 'trigger--btn'],
@@ -1178,7 +1178,7 @@ export default defineComponent({
                 class: zoomStatus === 'minimize' ? getIcon().MODAL_ZOOM_REVERT : getIcon().MODAL_ZOOM_MIN
               })
             ])
-            : createCommentVNode(),
+            : renderEmptyElement($xeModal),
           (XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && zoomStatus !== 'minimize'
             ? h('div', {
               class: ['vxe-modal--zoom-btn', 'trigger--btn'],
@@ -1189,7 +1189,7 @@ export default defineComponent({
                 class: zoomStatus === 'maximize' ? getIcon().MODAL_ZOOM_OUT : getIcon().MODAL_ZOOM_IN
               })
             ])
-            : createCommentVNode(),
+            : renderEmptyElement($xeModal),
           showClose
             ? h('div', {
               class: ['vxe-modal--close-btn', 'trigger--btn'],
@@ -1200,7 +1200,7 @@ export default defineComponent({
                 class: getIcon().MODAL_CLOSE
               })
             ])
-            : createCommentVNode()
+            : renderEmptyElement($xeModal)
         ])
       ]
     }
@@ -1224,7 +1224,7 @@ export default defineComponent({
           ...headerOns
         }, headerSlot ? getSlotVNs(headerSlot({ $modal: $xeModal })) : renderTitles())
       }
-      return createCommentVNode()
+      return renderEmptyElement($xeModal)
     }
 
     const renderBody = () => {
@@ -1258,7 +1258,7 @@ export default defineComponent({
           ? h('div', {
             class: 'vxe-modal--body-left'
           }, getSlotVNs(leftSlot({ $modal: $xeModal })))
-          : createCommentVNode(),
+          : renderEmptyElement($xeModal),
         h('div', {
           class: 'vxe-modal--body-default'
         }, contVNs),
@@ -1266,9 +1266,9 @@ export default defineComponent({
           ? h('div', {
             class: 'vxe-modal--body-right'
           }, getSlotVNs(rightSlot({ $modal: $xeModal })))
-          : createCommentVNode(),
+          : renderEmptyElement($xeModal),
         isMsg
-          ? createCommentVNode()
+          ? renderEmptyElement($xeModal)
           : h(VxeLoadingComponent, {
             class: 'vxe-modal--loading',
             modelValue: props.loading
@@ -1323,7 +1323,7 @@ export default defineComponent({
           class: 'vxe-modal--footer'
         }, footerSlot ? getSlotVNs(footerSlot({ $modal: $xeModal })) : [renderDefaultFooter()])
       }
-      return createCommentVNode()
+      return renderEmptyElement($xeModal)
     }
 
     const renderVN = () => {
@@ -1386,10 +1386,10 @@ export default defineComponent({
                           class: ['vxe-modal--status-icon', iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase() as 'MODAL_SUCCESS' | 'MODAL_ERROR']]
                         })
                       ])
-                      : createCommentVNode()
+                      : renderEmptyElement($xeModal)
                   ]
               )
-              : createCommentVNode(),
+              : renderEmptyElement($xeModal),
             h('div', {
               class: 'vxe-modal--container'
             }, !reactData.initialized || (destroyOnClose && !reactData.visible)
@@ -1408,7 +1408,7 @@ export default defineComponent({
                         onMousedown: dragEvent
                       })
                     }))
-                    : createCommentVNode()
+                    : renderEmptyElement($xeModal)
                 ])
           ])
         ])

package/packages/password-input/src/password-input.ts

@@ -1,6 +1,6 @@
-import { defineComponent, h, ref, Ref, computed, reactive, inject, nextTick, watch, createCommentVNode, PropType } from 'vue'
+import { defineComponent, h, ref, Ref, computed, reactive, inject, nextTick, watch, PropType } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, createEvent, useSize } from '../../ui'
+import { getConfig, getIcon, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 
@@ -267,8 +267,8 @@ export default defineComponent({
                 class: getIcon().INPUT_CLEAR
               })
             ])
-            : createCommentVNode(),
-          controls ? renderPasswordIcon() : createCommentVNode(),
+            : renderEmptyElement($xePasswordInput),
+          controls ? renderPasswordIcon() : renderEmptyElement($xePasswordInput),
           suffixSlot || suffixIcon
             ? h('div', {
               class: 'vxe-password-input--suffix-icon',
@@ -280,7 +280,7 @@ export default defineComponent({
                     class: suffixIcon
                   })
                 ])
-            : createCommentVNode()
+            : renderEmptyElement($xePasswordInput)
         ])
         : null
     }
@@ -339,7 +339,7 @@ export default defineComponent({
         }],
         spellcheck: false
       }, [
-        prefix || createCommentVNode(),
+        prefix || renderEmptyElement($xePasswordInput),
         h('div', {
           class: 'vxe-password-input--wrapper'
         }, [
@@ -361,7 +361,7 @@ export default defineComponent({
             onBlur: blurEvent
           })
         ]),
-        suffix || createCommentVNode()
+        suffix || renderEmptyElement($xePasswordInput)
       ])
     }
 

package/packages/print/src/print.ts

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, reactive, PropType, provide, createCommentVNode } from 'vue'
+import { defineComponent, ref, h, reactive, PropType, provide } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent } from '../../ui'
+import { getConfig, createEvent, renderEmptyElement } from '../../ui'
 import { printHtml, trimHtml } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 
@@ -125,7 +125,7 @@ export default defineComponent({
                   ? h('div', {
                     class: 'vxe-print-page-break--header-title'
                   }, `${title || ''}`)
-                  : createCommentVNode()
+                  : renderEmptyElement($xePrint)
               ]),
           h('div', {
             class: 'vxe-print-page-break--body'
@@ -149,7 +149,7 @@ export default defineComponent({
                   ? h('div', {
                     class: 'vxe-print-page-break--footer-page-number'
                   }, `${currentPage}/${pageCount}`)
-                  : createCommentVNode()
+                  : renderEmptyElement($xePrint)
               ])
         ])
       })
@@ -185,7 +185,7 @@ export default defineComponent({
                   ? h('div', {
                     class: 'vxe-print-page-break--header-title'
                   }, `${title || ''}`)
-                  : createCommentVNode()
+                  : renderEmptyElement($xePrint)
               ]),
           h('div', {
             class: 'vxe-print-page-break--body'
@@ -209,7 +209,7 @@ export default defineComponent({
                   ? h('div', {
                     class: 'vxe-print-page-break--footer-page-number'
                   }, `${currentPage}/${pageCount}`)
-                  : createCommentVNode()
+                  : renderEmptyElement($xePrint)
               ])
         ])
       })

package/packages/pulldown/src/pulldown.ts

@@ -1,10 +1,10 @@
-import { defineComponent, h, Teleport, ref, Ref, onUnmounted, reactive, inject, computed, nextTick, PropType, watch, createCommentVNode } from 'vue'
+import { defineComponent, h, Teleport, ref, Ref, onUnmounted, reactive, inject, computed, nextTick, PropType, watch } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, globalEvents, createEvent, useSize, ValueOf } from '../../ui'
+import { getConfig, globalEvents, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 
-import type { VxePulldownConstructor, VxePulldownPropTypes, PulldownInternalData, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
+import type { VxePulldownConstructor, VxePulldownPropTypes, PulldownInternalData, VxePulldownEmits, PulldownReactData, ValueOf, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -365,7 +365,7 @@ export default defineComponent({
                     ? h('div', {
                       class: 'vxe-pulldown--panel-header'
                     }, headerSlot({ $pulldown: $xePulldown }))
-                    : createCommentVNode(),
+                    : renderEmptyElement($xePulldown),
                   h('div', {
                     class: 'vxe-pulldown--panel-body'
                   }, dropdownSlot
@@ -377,7 +377,7 @@ export default defineComponent({
                     ? h('div', {
                       class: 'vxe-pulldown--panel-footer'
                     }, footerSlot({ $pulldown: $xePulldown }))
-                    : createCommentVNode()
+                    : renderEmptyElement($xePulldown)
                 ]
               : [])
           ])