vxe-pc-ui 4.11.44 → 4.11.45

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

@@ -117,6 +117,7 @@ export default defineVxeComponent({
       default: null
     },
 
+    popupConfig: Object as PropType<VxeDateRangePickerPropTypes.PopupConfig>,
     shortcutConfig: Object as PropType<VxeDateRangePickerPropTypes.ShortcutConfig>
   },
   emits: [
@@ -195,6 +196,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().dateRangePicker.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -292,6 +297,10 @@ export default defineVxeComponent({
       return immediate
     })
 
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().dateRangePicker.popupConfig, props.popupConfig)
+    })
+
     const computeShortcutOpts = computed(() => {
       return Object.assign({}, getConfig().dateRangePicker.shortcutConfig, props.shortcutConfig)
     })
@@ -718,9 +727,10 @@ export default defineVxeComponent({
 
     // 弹出面板
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -732,9 +742,10 @@ export default defineVxeComponent({
       const targetElem = refInputTarget.value
       const panelElem = refInputPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -917,6 +928,7 @@ export default defineVxeComponent({
       const isDateTimeType = computeIsDateTimeType.value
       const defaultDates = computeDefaultDates.value
       const defaultTimes = computeDefaultTimes.value
+      const popupOpts = computePopupOpts.value
       const { startLabel, endLabel } = panelLabelObj
       const { position } = shortcutOpts
       const headerSlot = slots.header
@@ -925,6 +937,7 @@ export default defineVxeComponent({
       const bottomSlot = slots.bottom
       const leftSlot = slots.left
       const rightSlot = slots.right
+      const ppClassName = popupOpts.className
       const [sdDate, edDate] = defaultDates
       const [sdTime, edTime] = defaultTimes
       const hasShortcutBtn = shortcutList.length > 0
@@ -936,7 +949,7 @@ export default defineVxeComponent({
       }, [
         h('div', {
           ref: refInputPanel,
-          class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, {
+          class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $dateRangePicker: $xeDateRangePicker }) : ppClassName) : '', {
             [`size--${vSize}`]: vSize,
             'is--transfer': btnTransfer,
             'ani--leave': isAniVisible,

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

@@ -2,7 +2,7 @@ import { h, Teleport, PropType, ref, inject, watch, computed, provide, onUnmount
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, globalEvents, createEvent, renderer, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom'
+import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 
@@ -20,6 +20,10 @@ export default defineVxeComponent({
       default: () => getConfig().iconPicker.size || getConfig().size
     },
     className: [String, Function] as PropType<VxeIconPickerPropTypes.ClassName>,
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxeIconPickerPropTypes.PopupClassName>,
     showIconTitle: {
       type: Boolean as PropType<VxeIconPickerPropTypes.ShowIconTitle>,
@@ -35,6 +39,7 @@ export default defineVxeComponent({
     },
     icons: Array as PropType<VxeIconPickerPropTypes.Icons>,
     placement: String as PropType<VxeIconPickerPropTypes.Placement>,
+    popupConfig: Object as PropType<VxeIconPickerPropTypes.PopupConfig>,
     transfer: {
       type: Boolean as PropType<VxeIconPickerPropTypes.Transfer>,
       default: null
@@ -116,6 +121,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().iconPicker.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -160,6 +169,10 @@ export default defineVxeComponent({
       })
     })
 
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().iconPicker.popupConfig, props.popupConfig)
+    })
+
     const computeIconGroupList = computed(() => {
       const iconList = computeIconList.value
       return XEUtils.chunk(iconList, 4)
@@ -178,74 +191,25 @@ export default defineVxeComponent({
     }
 
     const updatePlacement = () => {
-      return nextTick().then(() => {
-        const { placement } = props
-        const { panelIndex } = reactData
-        const el = refElem.value
-        const panelElem = refOptionPanel.value
-        const btnTransfer = computeBtnTransfer.value
-        if (panelElem && el) {
-          const targetHeight = el.offsetHeight
-          const targetWidth = el.offsetWidth
-          const panelHeight = panelElem.offsetHeight
-          const panelWidth = panelElem.offsetWidth
-          const marginSize = 5
-          const panelStyle: { [key: string]: any } = {
-            zIndex: panelIndex
-          }
-          const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(el)
-          let panelPlacement = 'bottom'
-          if (btnTransfer) {
-            let left = boundingLeft
-            let top = boundingTop + targetHeight
-            if (placement === 'top') {
-              panelPlacement = 'top'
-              top = boundingTop - panelHeight
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (top + panelHeight + marginSize > visibleHeight) {
-                panelPlacement = 'top'
-                top = boundingTop - panelHeight
-              }
-              // 如果上面不够放，则向下（优先）
-              if (top < marginSize) {
-                panelPlacement = 'bottom'
-                top = boundingTop + targetHeight
-              }
-            }
-            // 如果溢出右边
-            if (left + panelWidth + marginSize > visibleWidth) {
-              left -= left + panelWidth + marginSize - visibleWidth
-            }
-            // 如果溢出左边
-            if (left < marginSize) {
-              left = marginSize
-            }
-            Object.assign(panelStyle, {
-              left: `${left}px`,
-              top: `${top}px`,
-              minWidth: `${targetWidth}px`
-            })
-          } else {
-            if (placement === 'top') {
-              panelPlacement = 'top'
-              panelStyle.bottom = `${targetHeight}px`
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                // 如果上面不够放，则向下（优先）
-                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                  panelPlacement = 'top'
-                  panelStyle.bottom = `${targetHeight}px`
-                }
-              }
-            }
-          }
-          reactData.panelStyle = panelStyle
-          reactData.panelPlacement = panelPlacement
-          return nextTick()
-        }
-      })
+      const { placement } = props
+      const { panelIndex } = reactData
+      const targetElem = refElem.value
+      const panelElem = refOptionPanel.value
+      const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          teleportTo: btnTransfer
+        })
+        const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        })
+        reactData.panelStyle = panelStyle
+        reactData.panelPlacement = ppObj.placement
+      }
+      handleStyle()
+      return nextTick().then(handleStyle)
     }
 
     const showOptionPanel = () => {
@@ -535,13 +499,15 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { className, popupClassName, clearable } = props
+      const { className, clearable } = props
       const { initialized, isActivated, isAniVisible, visiblePanel, selectIcon } = reactData
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
       const btnTransfer = computeBtnTransfer.value
       const formReadonly = computeFormReadonly.value
       const inpPlaceholder = computeInpPlaceholder.value
+      const popupOpts = computePopupOpts.value
+      const ppClassName = popupOpts.className || props.popupClassName
 
       if (formReadonly) {
         return h('div', {
@@ -604,7 +570,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-ico-picker--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $iconPicker: $xeIconPicker }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-ico-picker--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': isAniVisible,

package/packages/pulldown/src/pulldown.ts

@@ -18,6 +18,10 @@ export default defineVxeComponent({
       type: String as PropType<VxePulldownPropTypes.Trigger>,
       default: getConfig().pulldown.trigger
     },
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxePulldownPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxePulldownPropTypes.Size>,
@@ -28,8 +32,13 @@ export default defineVxeComponent({
       type: [String, Function] as PropType<VxePulldownPropTypes.ClassName>,
       default: getConfig().pulldown.className
     },
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxePulldownPropTypes.PopupClassName>,
     showPopupShadow: Boolean as PropType<VxePulldownPropTypes.ShowPopupShadow>,
+    popupConfig: Object as PropType<VxePulldownPropTypes.PopupConfig>,
     destroyOnClose: {
       type: Boolean as PropType<VxePulldownPropTypes.DestroyOnClose>,
       default: getConfig().pulldown.destroyOnClose
@@ -79,6 +88,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().pulldown.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -91,6 +104,10 @@ export default defineVxeComponent({
       return transfer
     })
 
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().pulldown.popupConfig, props.popupConfig)
+    })
+
     const refMaps: PulldownPrivateRef = {
       refElem
     }
@@ -107,9 +124,10 @@ export default defineVxeComponent({
     let pulldownMethods = {} as PulldownMethods
 
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -128,9 +146,10 @@ export default defineVxeComponent({
       const targetElem = refPulldownContent.value
       const panelElem = refPulldownPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -338,14 +357,16 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { className, options, popupClassName, showPopupShadow, destroyOnClose, disabled } = props
+      const { className, options, showPopupShadow, destroyOnClose, disabled } = props
       const { initialized, isActivated, isAniVisible, visiblePanel, panelStyle, panelPlacement } = reactData
       const btnTransfer = computeBtnTransfer.value
       const vSize = computeSize.value
+      const popupOpts = computePopupOpts.value
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const dropdownSlot = slots.dropdown
+      const ppClassName = popupOpts.className || props.popupClassName
 
       return h('div', {
         ref: refElem,
@@ -367,7 +388,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refPulldownPanel,
-            class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xePulldown }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-pulldown--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $pulldown: $xePulldown }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': isAniVisible,

package/packages/select/src/select.ts

@@ -80,11 +80,19 @@ export default defineVxeComponent({
     optionGroupProps: Object as PropType<VxeSelectPropTypes.OptionGroupProps>,
     optionConfig: Object as PropType<VxeSelectPropTypes.OptionConfig>,
     className: [String, Function] as PropType<VxeSelectPropTypes.ClassName>,
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxeSelectPropTypes.PopupClassName>,
     max: {
       type: [String, Number] as PropType<VxeSelectPropTypes.Max>,
       default: null
     },
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxeSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeSelectPropTypes.Size>,
@@ -232,6 +240,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().select.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -293,7 +305,7 @@ export default defineVxeComponent({
     })
 
     const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().treeSelect.popupConfig, props.popupConfig)
+      return Object.assign({}, getConfig().select.popupConfig, props.popupConfig)
     })
 
     const computeVirtualYOpts = computed(() => {
@@ -527,9 +539,10 @@ export default defineVxeComponent({
     }
 
     const updateZIndex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -541,9 +554,10 @@ export default defineVxeComponent({
       const targetElem = refElem.value
       const panelElem = refOptionPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -1441,11 +1455,11 @@ export default defineVxeComponent({
       const inpPlaceholder = computeInpPlaceholder.value
       const popupWrapperStyle = computePopupWrapperStyle.value
       const popupOpts = computePopupOpts.value
-      const popupClassName = popupOpts.className || props.popupClassName
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const prefixSlot = slots.prefix
+      const ppClassName = popupOpts.className || props.popupClassName
       if (formReadonly) {
         return h('div', {
           ref: refElem,
@@ -1505,7 +1519,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $select: $xeSelect }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-select--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $select: $xeSelect }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': !loading && isAniVisible,

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

@@ -50,6 +50,10 @@ export default defineVxeComponent({
     options: Array as PropType<VxeTableSelectPropTypes.Options>,
     optionProps: Object as PropType<VxeTableSelectPropTypes.OptionProps>,
     lazyOptions: Array as PropType<VxeTableSelectPropTypes.LazyOptions>,
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxeTableSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeTableSelectPropTypes.Size>,
@@ -139,8 +143,12 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
-        const globalTransfer = getConfig().select.transfer
+        const globalTransfer = getConfig().tableSelect.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
@@ -407,9 +415,10 @@ export default defineVxeComponent({
     }
 
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -421,9 +430,10 @@ export default defineVxeComponent({
       const targetElem = refElem.value
       const panelElem = refOptionPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -620,13 +630,13 @@ export default defineVxeComponent({
       const btnTransfer = computeBtnTransfer.value
       const formReadonly = computeFormReadonly.value
       const popupOpts = computePopupOpts.value
-      const { className: popupClassName } = popupOpts
       const selectGridOpts = computeSelectGridOpts.value
       const rowOpts = computeRowOpts.value
       const popupWrapperStyle = computePopupWrapperStyle.value
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const prefixSlot = slots.prefix
+      const ppClassName = popupOpts.className
 
       if (formReadonly) {
         return h('div', {
@@ -674,7 +684,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-table-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $tableSelect: $xeTableSelect }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-table-select--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $tableSelect: $xeTableSelect }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': !loading && isAniVisible,

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

@@ -48,12 +48,20 @@ export default defineVxeComponent({
     filterConfig: Object as PropType<VxeTreeSelectPropTypes.FilterConfig>,
     multiple: Boolean as PropType<VxeTreeSelectPropTypes.Multiple>,
     className: [String, Function] as PropType<VxeTreeSelectPropTypes.ClassName>,
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxeTreeSelectPropTypes.PopupClassName>,
     prefixIcon: String as PropType<VxeTreeSelectPropTypes.PrefixIcon>,
     placement: String as PropType<VxeTreeSelectPropTypes.Placement>,
     lazyOptions: Array as PropType<VxeTreeSelectPropTypes.LazyOptions>,
     options: Array as PropType<VxeTreeSelectPropTypes.Options>,
     optionProps: Object as PropType<VxeTreeSelectPropTypes.OptionProps>,
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxeTreeSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeTreeSelectPropTypes.Size>,
@@ -169,8 +177,12 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
-        const globalTransfer = getConfig().select.transfer
+        const globalTransfer = getConfig().treeSelect.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
@@ -386,9 +398,10 @@ export default defineVxeComponent({
     }
 
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -400,9 +413,10 @@ export default defineVxeComponent({
       const targetElem = refElem.value
       const panelElem = refOptionPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -680,7 +694,7 @@ export default defineVxeComponent({
       const footerSlot = slots.footer
       const prefixSlot = slots.prefix
       const popupOpts = computePopupOpts.value
-      const popupClassName = popupOpts.className || props.popupClassName
+      const ppClassName = popupOpts.className || props.popupClassName
 
       if (formReadonly) {
         return h('div', {
@@ -762,7 +776,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-tree-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $treeSelect: $xeTreeSelect }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-tree-select--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $treeSelect: $xeTreeSelect }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': !loading && isAniVisible,

package/types/components/button.d.ts

@@ -26,10 +26,18 @@ export interface VxeButtonPrivateRef extends ButtonPrivateRef { }
 
 export namespace VxeButtonPropTypes {
   export type Size = VxeComponentSizeType
+  /**
+   * 已废弃，请使用 PopupConfig.zIndex
+   * @deprecated
+   */
   export type ZIndex = number
   export type Type = string
   export type Mode = null | '' | 'button' | 'text'
   export type ClassName = string | ((params: { $button: VxeButtonConstructor }) => string)
+  /**
+   * 已废弃，请使用 PopupConfig.className
+   * @deprecated
+   */
   export type PopupClassName = string | ((params: { $button: VxeButtonConstructor }) => string)
   export type Name = string | number
   export type RouterLink = {
@@ -82,6 +90,15 @@ export namespace VxeButtonPropTypes {
 
   export type ShowDropdownIcon = boolean
   export type DestroyOnClose = boolean
+  export interface PopupConfig {
+    /**
+     * 设置弹出面板方向
+     */
+    placement?: 'top' | 'bottom' | '' | null
+    transfer?: boolean
+    zIndex?: number | string
+    className?: string | ((params: { $button: VxeButtonConstructor }) => string)
+  }
   export type Transfer = boolean
 }
 
@@ -171,6 +188,7 @@ export interface VxeButtonProps {
    * 是否将弹框容器插入于 body 内
    */
   transfer?: VxeButtonPropTypes.Transfer
+  popupConfig?: VxeButtonPropTypes.PopupConfig
 }
 
 export interface ButtonPrivateComputed {

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

@@ -34,6 +34,10 @@ export namespace VxeDatePickerPropTypes {
   export type Name = string
   export type Type = VxeDatePanelPropTypes.Type
   export type Clearable = boolean
+  /**
+   * 已废弃，请使用 PopupConfig.zIndex
+   * @deprecated
+   */
   export type ZIndex = number
   export type Readonly = boolean
   export type Disabled = boolean
@@ -74,6 +78,10 @@ export namespace VxeDatePickerPropTypes {
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
     transfer?: boolean
+    width?: number | string
+    height?: number | string
+    zIndex?: number | string
+    className?: string | ((params: { $datePicker: VxeDatePickerConstructor }) => string)
   }
   export interface ShortcutConfig {
     enabled?: boolean

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

@@ -36,6 +36,10 @@ export namespace VxeDateRangePickerPropTypes {
   export type Name = string
   export type Type = VxeDatePanelPropTypes.Type
   export type Clearable = boolean
+  /**
+   * 已废弃，请使用 PopupConfig.zIndex
+   * @deprecated
+   */
   export type ZIndex = number
   export type Readonly = boolean
   export type Disabled = boolean
@@ -78,6 +82,10 @@ export namespace VxeDateRangePickerPropTypes {
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
     transfer?: boolean
+    width?: number | string
+    height?: number | string
+    zIndex?: number | string
+    className?: string | ((params: { $dateRangePicker: VxeDateRangePickerConstructor }) => string)
   }
   export interface ShortcutConfig {
     enabled?: boolean