vxe-pc-ui 3.16.17 → 3.16.19

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

@@ -2,7 +2,7 @@ import { CreateElement, VNode, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getIcon, getConfig, getI18n, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
+import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { parseColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHex, hexToRgb, hsvToRgb, toRgb } from './util'
 import VxeButtonComponent from '../../button'
@@ -372,12 +372,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
           internalData.hpTimeout = undefined
         }
         const btnTransfer = $xeColorPicker.computeBtnTransfer
+        const popupOpts = $xeColorPicker.computePopupOpts
         const panelElem = $xeColorPicker.$refs.refOptionPanel as HTMLElement
         if (!reactData.initialized) {
           reactData.initialized = true
           if (btnTransfer) {
             if (panelElem) {
-              document.body.appendChild(panelElem)
+              const { appendTo } = popupOpts
+              getPopupContainer(appendTo).appendChild(panelElem)
             }
           }
         }

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

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, GLOBAL_EVENT_KEYS, globalMixins, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
-import { updatePanelPlacement, getEventTargetNode, hasControlKey } from '../../ui/src/dom'
+import { updatePanelPlacement, getEventTargetNode, hasControlKey, getPopupContainer } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import { parseDateObj, parseDateValue, getDateByCode, handleValueFormat, hasDateValueType, hasTimestampValueType, isAllSameChar, getChunkDefaultNum, checkDateInputFormat } from '../../date-panel/src/util'
 import { createComponentLog } from '../../ui/src/log'
@@ -1388,12 +1388,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { visiblePanel } = reactData
       const isDisabled = $xeDatePicker.computeIsDisabled
       const btnTransfer = $xeDatePicker.computeBtnTransfer
+      const popupOpts = $xeDatePicker.computePopupOpts
       const panelElem = $xeDatePicker.$refs.refInputPanel as HTMLElement
       if (!isDisabled && !visiblePanel) {
         if (!reactData.initialized) {
           reactData.initialized = true
           if (btnTransfer && panelElem) {
-            document.body.appendChild(panelElem)
+            const { appendTo } = popupOpts
+            getPopupContainer(appendTo).appendChild(panelElem)
           }
         }
         if (internalData.hpTimeout) {

package/packages/date-range-picker/src/date-range-picker.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, GLOBAL_EVENT_KEYS, globalMixins, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
-import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom'
+import { updatePanelPlacement, getEventTargetNode, getPopupContainer } from '../../ui/src/dom'
 import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat, hasTimestampValueType, hasDateValueType, parseDateValue, getNextMonth, getPrevMonth, getNextYear, getPrevYear } from '../../date-panel/src/util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
@@ -1183,12 +1183,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { visiblePanel } = reactData
       const isDisabled = $xeDateRangePicker.computeIsDisabled
       const btnTransfer = $xeDateRangePicker.computeBtnTransfer
+      const popupOpts = $xeDateRangePicker.computePopupOpts
       const panelElem = $xeDateRangePicker.$refs.refInputPanel as HTMLElement
       if (!isDisabled && !visiblePanel) {
         if (!reactData.initialized) {
           reactData.initialized = true
           if (btnTransfer && panelElem) {
-            document.body.appendChild(panelElem)
+            const { appendTo } = popupOpts
+            getPopupContainer(appendTo).appendChild(panelElem)
           }
         }
         if (internalData.hpTimeout) {

package/packages/drawer/src/drawer.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { globalMixins, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, renderEmptyElement } from '../../ui'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
-import { getDomNode, toCssUnit } from '../../ui/src/dom'
+import { getDomNode, getPopupContainer, toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeButtonComponent from '../../button'
 import VxeLoadingComponent from '../../loading'
@@ -110,6 +110,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeDrawerPropTypes.Transfer>,
       default: () => getConfig().drawer.transfer
     },
+    appendTo: {
+      type: [String, Function] as PropType<VxeDrawerPropTypes.AppendTo>,
+      default: () => getConfig().drawer.appendTo
+    },
     padding: {
       type: Boolean as PropType<VxeDrawerPropTypes.Padding>,
       default: () => getConfig().drawer.padding
@@ -340,14 +344,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeDrawer
       const reactData = $xeDrawer.reactData
 
-      const { showFooter } = props
+      const { showFooter, appendTo } = props
       const { initialized, visible } = reactData
       const btnTransfer = $xeDrawer.computeBtnTransfer
       if (!initialized) {
         reactData.initialized = true
         if (btnTransfer) {
           const panelElem = $xeDrawer.$refs.refElem as HTMLDivElement
-          document.body.appendChild(panelElem)
+          getPopupContainer(appendTo).appendChild(panelElem)
         }
       }
       if (!visible) {

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

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, globalEvents, renderer, createEvent, globalMixins, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
+import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeInputComponent from '../../input/src/input'
@@ -381,6 +381,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { hpTimeout } = internalData
       const isDisabled = $xeIconPicker.computeIsDisabled
+      const popupOpts = $xeIconPicker.computePopupOpts
       if (!isDisabled) {
         if (hpTimeout) {
           clearTimeout(hpTimeout)
@@ -392,7 +393,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
           reactData.initialized = true
           if (btnTransfer) {
             if (panelElem) {
-              document.body.appendChild(panelElem)
+              const { appendTo } = popupOpts
+              getPopupContainer(appendTo).appendChild(panelElem)
             }
           }
         }

package/packages/menu/src/menu.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, createEvent, permission, globalMixins, globalEvents, renderEmptyElement } from '../../ui'
-import { scrollToView, toCssUnit } from '../../ui/src/dom'
+import { getPopupContainer, scrollToView, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
@@ -74,7 +74,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: String as PropType<VxeMenuPropTypes.Size>,
       default: () => getConfig().menu.size || getConfig().size
     },
-    menuConfig: Object as PropType<VxeMenuPropTypes.MenuConfig>
+    menuConfig: Object as PropType<VxeMenuPropTypes.MenuConfig>,
+    appendTo: {
+      type: [String, Function] as PropType<VxeMenuPropTypes.AppendTo>,
+      default: () => getConfig().menu.appendTo
+    }
   },
   inject: {
     $xeLayoutAside: {
@@ -419,7 +423,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeMenu
       const reactData = $xeMenu.reactData
 
-      const { collapseFixed } = props
+      const { collapseFixed, appendTo } = props
       if (collapseFixed) {
         const { initialized } = reactData
         const isCollapsed = $xeMenu.computeIsCollapsed
@@ -429,7 +433,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             $xeMenu.$nextTick(() => {
               const collapseEl = $xeMenu.$refs.refCollapseElem as HTMLDivElement
               if (collapseEl) {
-                document.body.appendChild(collapseEl)
+                getPopupContainer(appendTo).appendChild(collapseEl)
               }
             })
           }

package/packages/modal/src/modal.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getI18n, getIcon, createEvent, globalEvents, globalMixins, renderEmptyElement, GLOBAL_EVENT_KEYS } from '../../ui'
-import { getDomNode, getEventTargetNode, toCssUnit } from '../../ui/src/dom'
+import { getDomNode, getEventTargetNode, getPopupContainer, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue } from '../../ui/src/utils'
 import VxeButtonComponent from '../../button'
 import VxeLoadingComponent from '../../loading'
@@ -167,6 +167,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeModalPropTypes.Transfer>,
       default: () => getConfig().modal.transfer
     },
+    appendTo: {
+      type: [String, Function] as PropType<VxeModalPropTypes.AppendTo>,
+      default: () => getConfig().modal.appendTo
+    },
     storage: {
       type: Boolean as PropType<VxeModalPropTypes.Storage>,
       default: () => getConfig().modal.storage
@@ -901,7 +905,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeModal
       const reactData = $xeModal.reactData
 
-      const { remember, showFooter } = props
+      const { remember, showFooter, appendTo } = props
       const { initialized, visible } = reactData
       const isMsg = $xeModal.computeIsMsg
       const btnTransfer = $xeModal.computeBtnTransfer
@@ -909,7 +913,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         reactData.initialized = true
         if (btnTransfer) {
           const panelElem = $xeModal.$refs.refElem as HTMLDivElement
-          document.body.appendChild(panelElem)
+          getPopupContainer(appendTo).appendChild(panelElem)
         }
       }
       if (!visible) {
@@ -1176,7 +1180,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { visibleHeight, visibleWidth } = getDomNode()
       const marginSize = XEUtils.toNumber(props.marginSize)
       const targetElem = evnt.target as HTMLSpanElement
-      const type = targetElem.getAttribute('type')
+      const type = targetElem.getAttribute('data-type')
       const minWidth = XEUtils.toNumber(props.minWidth)
       const minHeight = XEUtils.toNumber(props.minHeight)
       const maxWidth = visibleWidth
@@ -1636,7 +1640,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                         return h('span', {
                           class: `${type}-resize`,
                           attrs: {
-                            type: type
+                            'data-type': type
                           },
                           on: {
                             mousedown: $xeModal.dragEvent

package/packages/select/src/select.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
+import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
@@ -849,6 +849,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const isDisabled = $xeSelect.computeIsDisabled
       const remoteOpts = $xeSelect.computeRemoteOpts
       const selectVals = $xeSelect.computeSelectVals
+      const popupOpts = $xeSelect.computePopupOpts
       if (!loading && !isDisabled) {
         if (hpTimeout) {
           clearTimeout(hpTimeout)
@@ -859,7 +860,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
           const btnTransfer = $xeSelect.computeBtnTransfer
           const panelElem = $xeSelect.$refs.refOptionPanel as HTMLElement
           if (btnTransfer && panelElem) {
-            document.body.appendChild(panelElem)
+            const { appendTo } = popupOpts
+            getPopupContainer(appendTo).appendChild(panelElem)
           }
         }
         reactData.isActivated = true

package/packages/table-select/src/table-select.ts

@@ -2,7 +2,7 @@ import { CreateElement, PropType, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getIcon, globalEvents, getI18n, createEvent, renderEmptyElement, globalMixins } from '../../ui'
-import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom'
 import { getOnName } from '../../ui/src/vn'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
@@ -496,6 +496,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { loading } = props
       const isDisabled = $xeTableSelect.computeIsDisabled
+      const popupOpts = $xeTableSelect.computePopupOpts
       if (!loading && !isDisabled) {
         if (internalData.vpTimeout) {
           clearTimeout(internalData.vpTimeout)
@@ -509,7 +510,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
           const panelElem = $xeTableSelect.$refs.refOptionPanel as HTMLElement
           if (btnTransfer) {
             if (panelElem) {
-              document.body.appendChild(panelElem)
+              const { appendTo } = popupOpts
+              getPopupContainer(appendTo).appendChild(panelElem)
             }
           }
         }

package/packages/tree-select/src/tree-select.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getI18n, getIcon, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, deModelValue } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -588,6 +588,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { fullOptionList } = internalData
       const isDisabled = $xeTreeSelect.computeIsDisabled
       const remoteOpts = $xeTreeSelect.computeRemoteOpts
+      const popupOpts = $xeTreeSelect.computePopupOpts
       if (!loading && !isDisabled) {
         if (internalData.hpTimeout) {
           clearTimeout(internalData.hpTimeout)
@@ -598,7 +599,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
           const panelElem = $xeTreeSelect.$refs.refOptionPanel as HTMLElement
           if (btnTransfer) {
             if (panelElem) {
-              document.body.appendChild(panelElem)
+              const { appendTo } = popupOpts
+              getPopupContainer(appendTo).appendChild(panelElem)
             }
           }
         }

package/packages/ui/src/dom.ts

@@ -278,3 +278,11 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
     placement: panelPlacement
   }
 }
+
+export function getPopupContainer (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
+  const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
+  if (XEUtils.isString(selectElem)) {
+    return document.querySelector(selectElem) || document.body
+  }
+  return selectElem || document.body
+}

package/styles/components/button.scss

@@ -334,15 +334,9 @@
   }
 }
 
-.vxe-button.type--button,
-.vxe-button--dropdown {
-  margin-right: var(--vxe-ui-button-current-margin-left);
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-
-.vxe-button+.vxe-button--dropdown,
-.vxe-button--dropdown+.vxe-button {
+.vxe-button.type--button+.vxe-button.type--button,
+.vxe-button.type--button+.vxe-button--dropdown,
+.vxe-button--dropdown+.vxe-button.type--button,
+.vxe-button--dropdown+.vxe-button--dropdown {
   margin-left: var(--vxe-ui-button-current-margin-left);
 }

package/styles/components/image-preview.scss

@@ -82,7 +82,7 @@
   z-index: 99;
   width: 30em;
   height: 10em;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--vxe-ui-vxe-image-preview-operation-background-color);
   color: var(--vxe-ui-status-error-color);
   transform: rotate(45deg);
   cursor: pointer;
@@ -126,7 +126,7 @@
   width: 2.2em;
   height: 2.2em;
   line-height: 2.2em;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--vxe-ui-vxe-image-preview-operation-background-color);
   cursor: pointer;
   @include baseMixin.createAnimationTransition(all, 0.1s);
 }
@@ -139,6 +139,10 @@
   transform: translate(2em, -50%);
 }
 
+.vxe-image-preview--btn-wrapper {
+  color: var(--vxe-ui-vxe-image-preview-operation-color);
+}
+
 .vxe-image-preview--operation-info {
   right: 0.2em;
   bottom: 0.2em;
@@ -149,7 +153,7 @@
   border-radius: var(--vxe-ui-base-border-radius);
   text-align: center;
   transform: translate(2em, 2em);
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--vxe-ui-vxe-image-preview-operation-background-color);
   @include baseMixin.createAnimationTransition(all, 0.2s);
 }
 .vxe-image-preview--operation-wrapper {
@@ -161,7 +165,7 @@
   transform: translate(-50%, 3em);
   padding: 0 1.5em;
   border-radius: 3em;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--vxe-ui-vxe-image-preview-operation-background-color);
   @include baseMixin.createAnimationTransition(all, 0.2s);
 }
 .vxe-image-preview--operation-active-count {

package/styles/theme/dark.scss

@@ -140,4 +140,8 @@
   --vxe-ui-list-row-current-background-color: #18222c;
   --vxe-ui-list-row-hover-current-background-color: #262727;
   --vxe-ui-list-drag-over-background-color:rgba(48, 48, 0, 0.3);
+
+  /*image-preview*/
+  --vxe-ui-vxe-image-preview-operation-color: rgba(0,0,0,0.7);
+  --vxe-ui-vxe-image-preview-operation-background-color: rgba(255,255,255,0.4);
 }

package/styles/theme/light.scss

@@ -139,4 +139,8 @@
   --vxe-ui-list-row-current-background-color: #{light_variable.$vxe-ui-list-row-current-background-color};
   --vxe-ui-list-row-hover-current-background-color: #{light_variable.$vxe-ui-list-row-hover-current-background-color};
   --vxe-ui-list-drag-over-background-color: #{light_variable.$vxe-ui-list-drag-over-background-color};
+
+  /*image-preview*/
+  --vxe-ui-vxe-image-preview-operation-color: #{light_variable.$vxe-ui-vxe-image-preview-operation-color};
+  --vxe-ui-vxe-image-preview-operation-background-color: #{light_variable.$vxe-ui-vxe-image-preview-operation-background-color};
 }

package/styles/variable.scss

@@ -134,3 +134,7 @@ $vxe-ui-list-row-hover-checkbox-checked-background-color: #ffebbc !default;
 $vxe-ui-list-row-current-background-color: #e6f7ff !default;
 $vxe-ui-list-row-hover-current-background-color: #d7effb !default;
 $vxe-ui-list-drag-over-background-color: rgba(255,255,200,0.3) !default;
+
+/*image-preview*/
+$vxe-ui-vxe-image-preview-operation-color: rgba(255,255,255,0.6) !default;
+$vxe-ui-vxe-image-preview-operation-background-color: rgba(0, 0, 0, 0.7) !default;

package/types/components/button.d.ts

@@ -94,7 +94,7 @@ export namespace VxeButtonPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     zIndex?: number | string
     className?: string | ((params: { $button: VxeButtonConstructor }) => string)
   }

package/types/components/color-picker.d.ts

@@ -65,7 +65,7 @@ export namespace VxeColorPickerPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/date-picker.d.ts

@@ -116,7 +116,7 @@ export namespace VxeDatePickerPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/date-range-picker.d.ts

@@ -99,7 +99,7 @@ export namespace VxeDateRangePickerPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/drawer.d.ts

@@ -58,6 +58,7 @@ export namespace VxeDrawerPropTypes {
   export type DestroyOnClose = boolean
   export type ShowTitleOverflow = boolean
   export type Transfer = boolean
+  export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
   export type Padding = boolean
   export type BeforeHideMethod = (params: VxeDrawerDefines.DrawerVisibleParams) => Promise<any>
   export type Slots = VxeDrawerSlots
@@ -94,7 +95,14 @@ export interface VxeDrawerProps {
   zIndex?: VxeDrawerPropTypes.ZIndex
   destroyOnClose?: VxeDrawerPropTypes.DestroyOnClose
   showTitleOverflow?: VxeDrawerPropTypes.ShowTitleOverflow
+  /**
+   * 是否启用元素挂载
+   */
   transfer?: VxeDrawerPropTypes.Transfer
+  /**
+   * 挂载到指定元素下
+   */
+  appendTo?: VxeDrawerPropTypes.AppendTo
   padding?: VxeDrawerPropTypes.Padding
   beforeHideMethod?: VxeDrawerPropTypes.BeforeHideMethod
   slots?: VxeDrawerPropTypes.Slots

package/types/components/icon-picker.d.ts

@@ -59,7 +59,14 @@ export namespace VxeIconPickerPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     /**
      * 每行显示出多少个图标，如果设置了 chunkWidth 则该参数无效
      */

package/types/components/menu.d.ts

@@ -33,7 +33,6 @@ export namespace VxeMenuPropTypes {
    linkUrl?: string
    linkTarget?: string
    routerLink?: string
-   routerTarget?: string
   }
 
   export interface MenuOption {
@@ -79,6 +78,7 @@ export namespace VxeMenuPropTypes {
       currentOption: VxeMenuPropTypes.MenuOption
     }): boolean
   }
+  export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
 }
 
 export interface VxeMenuProps {
@@ -100,6 +100,10 @@ export interface VxeMenuProps {
   expandKeys?: VxeMenuPropTypes.ExpandKeys
   options?: VxeMenuPropTypes.Options
   menuConfig?: VxeMenuPropTypes.MenuConfig
+  /**
+   * 挂载到指定元素下
+   */
+  appendTo?: VxeMenuPropTypes.AppendTo
 }
 
 export interface MenuPrivateComputed {

package/types/components/modal.d.ts

@@ -108,6 +108,7 @@ export namespace VxeModalPropTypes {
   export type DestroyOnClose = boolean
   export type ShowTitleOverflow = boolean
   export type Transfer = boolean
+  export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
   export type Storage = boolean
   export type StorageKey = string
   export type Animat = boolean
@@ -165,7 +166,14 @@ export interface VxeModalProps {
   remember?: VxeModalPropTypes.Remember
   destroyOnClose?: VxeModalPropTypes.DestroyOnClose
   showTitleOverflow?: VxeModalPropTypes.ShowTitleOverflow
+  /**
+   * 是否启用元素挂载
+   */
   transfer?: VxeModalPropTypes.Transfer
+  /**
+   * 挂载到指定元素下
+   */
+  appendTo?: VxeModalPropTypes.AppendTo
   storage?: VxeModalPropTypes.Storage
   storageKey?: VxeModalPropTypes.StorageKey
   animat?: VxeModalPropTypes.Animat

package/types/components/pulldown.d.ts

@@ -63,7 +63,7 @@ export namespace VxePulldownPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/select.d.ts

@@ -159,7 +159,7 @@ export namespace VxeSelectPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/table-select.d.ts

@@ -63,7 +63,7 @@ export namespace VxeTableSelectPropTypes {
     /**
      * 挂载到指定元素下
      */
-    appendTo?: string | HTMLElement | (() => string | HTMLElement)
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/table.d.ts

@@ -1043,7 +1043,11 @@ export namespace VxeTablePropTypes {
       column: VxeTableDefines.ColumnInfo<D>
     }): boolean
     /**
-     * 是否允许个性化列显示与隐藏
+     * 是否允许设置分页设置
+     */
+    allowPager?: boolean
+    /**
+     * 是否允许设置列的显示与隐藏
      */
     allowVisible?: boolean
     /**
@@ -2618,7 +2622,7 @@ export namespace VxeTablePropTypes {
    */
   export interface EditDirtyConfig {
     /**
-     * 监听数据额外的列的字段，如果同时指定 includeFields 则会被覆盖
+     * 监听数据额外的列的字段，如果同时指定 includeFields 则无效
      */
     extraFields?: string[]
     /**
@@ -3027,6 +3031,7 @@ export namespace VxeTablePropTypes {
     type?: string
     field?: string
     width?: number | string
+    children?: ExportOrPrintColumnOption[]
   }
 
   interface ExportAndPrintConfig<D = any> {
@@ -3101,6 +3106,10 @@ export namespace VxeTablePropTypes {
      * 自定义列
      */
     columns?: VxeTableDefines.ColumnInfo[] | ExportOrPrintColumnOption[]
+    /**
+     * 额外的列
+     */
+    extraFields?: string[]
     /**
      * 指定列
      */
@@ -7080,6 +7089,9 @@ export namespace VxeTableDefines {
   export type CustomEventType = 'reset' | 'confirm' | 'update:width' | 'update:fixed' | 'update:sort' | 'update:visible' | 'update:align' | 'update:headerAlign' | 'update:footerAlign' | 'update:aggGroup' | 'update:aggFunc'
 
   export interface CustomStoreData {
+    pageData?: {
+      ps?: number
+    }
     alignData?: Record<string, VxeColumnPropTypes.Align>
     headerAlignData?: Record<string, VxeColumnPropTypes.HeaderAlign>
     footerAlignData?: Record<string, VxeColumnPropTypes.FooterAlign>
@@ -7092,6 +7104,10 @@ export namespace VxeTableDefines {
   }
 
   export interface VxeTableCustomStorageObj {
+    /**
+     * 保存分页设置
+     */
+    pager?: boolean | null
     /**
      * 保存列对齐方式
      */