vxe-pc-ui 3.16.17 → 3.16.18

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

@@ -335,6 +335,7 @@
 }
 
 .vxe-button.type--button,
+.vxe-button.vxe-button--link,
 .vxe-button--dropdown {
   margin-right: var(--vxe-ui-button-current-margin-left);
   &:last-of-type {

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/tree-select.d.ts

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