vxe-pc-ui 4.6.4 → 4.6.6

package/packages/button/src/button.ts

@@ -1,15 +1,15 @@
 import { defineComponent, h, ref, computed, Teleport, resolveComponent, VNode, onUnmounted, reactive, nextTick, PropType, onMounted, inject, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, globalEvents, getIcon, createEvent, useSize, usePermission } from '../../ui'
-import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
+import { getConfig, globalEvents, getIcon, createEvent, useSize, usePermission, permission } from '../../ui'
+import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { warnLog } from '../../ui/src/log'
 import VxeTooltipComponent from '../../tooltip/src/tooltip'
 
-import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types'
+import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, VxeButtonDefines, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
-export default defineComponent({
+const VxeButtonComponent = defineComponent({
   name: 'VxeButton',
   props: {
     /**
@@ -78,6 +78,7 @@ export default defineComponent({
     align: String as PropType<VxeButtonPropTypes.Align>,
     prefixTooltip: Object as PropType<VxeButtonPropTypes.PrefixTooltip>,
     suffixTooltip: Object as PropType<VxeButtonPropTypes.SuffixTooltip>,
+    options: Array as PropType<VxeButtonPropTypes.Options>,
     /**
      * 在下拉面板关闭时销毁内容
      */
@@ -228,6 +229,17 @@ export default defineComponent({
       return false
     })
 
+    const computeDownBtnList = computed(() => {
+      const { options } = props
+      if (options) {
+        return options.filter(item => {
+          const { permissionCode } = item
+          return !permissionCode || permission.checkVisible(permissionCode)
+        })
+      }
+      return []
+    })
+
     const computePrefixTipOpts = computed(() => {
       return Object.assign({}, props.prefixTooltip)
     })
@@ -243,75 +255,24 @@ export default defineComponent({
     }
 
     const updatePlacement = () => {
-      return nextTick().then(() => {
-        const { placement } = props
-        const { panelIndex } = reactData
-        const targetElem = refButton.value
-        const panelElem = refBtnPanel.value
-        const btnTransfer = computeBtnTransfer.value
-        if (panelElem && targetElem) {
-          const targetHeight = targetElem.offsetHeight
-          const targetWidth = targetElem.offsetWidth
-          const panelHeight = panelElem.offsetHeight
-          const panelWidth = panelElem.offsetWidth
-          const marginSize = 5
-          const panelStyle: { [key: string]: string | number } = {
-            zIndex: panelIndex
-          }
-          const { top, left, boundingTop, visibleHeight, visibleWidth } = getAbsolutePos(targetElem)
-          let panelPlacement = 'bottom'
-          if (btnTransfer) {
-            let btnLeft = left + targetWidth - panelWidth
-            let btnTop = top + targetHeight
-            if (placement === 'top') {
-              panelPlacement = 'top'
-              btnTop = top - panelHeight
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (boundingTop + targetHeight + panelHeight + marginSize > visibleHeight) {
-                panelPlacement = 'top'
-                btnTop = top - panelHeight
-              }
-              // 如果上面不够放，则向下（优先）
-              if (btnTop < marginSize) {
-                panelPlacement = 'bottom'
-                btnTop = top + targetHeight
-              }
-            }
-            // 如果溢出右边
-            if (btnLeft + panelWidth + marginSize > visibleWidth) {
-              btnLeft -= btnLeft + panelWidth + marginSize - visibleWidth
-            }
-            // 如果溢出左边
-            if (btnLeft < marginSize) {
-              btnLeft = marginSize
-            }
-            Object.assign(panelStyle, {
-              left: `${btnLeft}px`,
-              right: 'auto',
-              top: `${btnTop}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 = refButton.value
+      const panelElem = refBtnPanel.value
+      const btnTransfer = computeBtnTransfer.value
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          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 clickEvent = (evnt: Event) => {
@@ -321,6 +282,12 @@ export default defineComponent({
       dispatchEvent('click', { $event: evnt }, evnt)
     }
 
+    const downBtnClickEvent = (params: VxeButtonDefines.ClickEventParams, option: VxeButtonDefines.DownButtonOption) => {
+      const { $event } = params
+      hidePanel()
+      dispatchEvent('dropdown-click', { name: option.name, option }, $event)
+    }
+
     const mousedownDropdownEvent = (evnt: MouseEvent) => {
       const isLeftBtn = evnt.button === 0
       if (isLeftBtn) {
@@ -342,7 +309,7 @@ export default defineComponent({
             reactData.isAniVisible = false
           }
         }, 350)
-        dispatchEvent('dropdown-click', { name: targetElem.getAttribute('name'), $event: evnt }, evnt)
+        dispatchEvent('dropdown-click', { name: targetElem.getAttribute('name'), option: null }, evnt)
       }
     }
 
@@ -376,7 +343,7 @@ export default defineComponent({
     }
 
     const mouseleaveTargetEvent = (evnt: MouseEvent) => {
-      closePanel()
+      hidePanel()
       mouseleaveEvent(evnt)
     }
 
@@ -394,7 +361,7 @@ export default defineComponent({
       if (!(btnDisabled || loading)) {
         if (trigger === 'click') {
           if (reactData.visiblePanel) {
-            closePanel()
+            hidePanel()
           } else {
             openPanel()
           }
@@ -422,7 +389,7 @@ export default defineComponent({
       return nextTick()
     }
 
-    const closePanel = () => {
+    const hidePanel = () => {
       const panelElem = refBtnPanel.value
       clearTimeout(internalData.showTime)
       if (panelElem) {
@@ -445,7 +412,7 @@ export default defineComponent({
     }
 
     const mouseleaveDropdownEvent = () => {
-      closePanel()
+      hidePanel()
     }
 
     const renderTooltipIcon = (tipOpts: VxeButtonPropTypes.PrefixTooltip | VxeButtonPropTypes.SuffixTooltip, type: 'prefix' | 'suffix') => {
@@ -522,7 +489,7 @@ export default defineComponent({
     buttonMethods = {
       dispatchEvent,
       openPanel,
-      closePanel,
+      closePanel: hidePanel,
       focus () {
         const btnElem = refButton.value
         if (btnElem) {
@@ -542,7 +509,7 @@ export default defineComponent({
     const handleGlobalMousewheelEvent = (evnt: Event) => {
       const panelElem = refBtnPanel.value
       if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
-        closePanel()
+        hidePanel()
       }
     }
 
@@ -554,7 +521,7 @@ export default defineComponent({
         const panelElem = refBtnPanel.value
         reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
         if (visiblePanel && !reactData.isActivated) {
-          closePanel()
+          hidePanel()
         }
       }
     }
@@ -573,13 +540,14 @@ export default defineComponent({
       const btnTransfer = computeBtnTransfer.value
       const btnDisabled = computeBtnDisabled.value
       const permissionInfo = computePermissionInfo.value
+      const downBtnList = computeDownBtnList.value
       const vSize = computeSize.value
-      const downsSlot = slots.dropdowns
+      const dropdownsSlot = slots.dropdowns
 
       if (!permissionInfo.visible) {
         return createCommentVNode()
       }
-      if (downsSlot) {
+      if (dropdownsSlot || downBtnList.length) {
         const btnOns: Record<string, any> = {}
         const panelOns: Record<string, any> = {}
         if (trigger === 'hover') {
@@ -653,6 +621,7 @@ export default defineComponent({
               ref: refBtnPanel,
               class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: $xeButton }) : popupClassName) : '', {
                 [`size--${vSize}`]: vSize,
+                'is--transfer': btnTransfer,
                 'ani--leave': isAniVisible,
                 'ani--enter': visiblePanel
               }],
@@ -661,11 +630,39 @@ export default defineComponent({
               ...panelOns
             }, initialized && (visiblePanel || isAniVisible)
               ? [
-                  h('div', {
-                    class: 'vxe-button--dropdown-wrapper',
-                    onMousedown: mousedownDropdownEvent,
-                    onClick: clickDropdownEvent
-                  }, destroyOnClose && !visiblePanel ? [] : downsSlot({}))
+                  dropdownsSlot
+                    ? h('div', {
+                      class: 'vxe-button--dropdown-wrapper',
+                      onMousedown: mousedownDropdownEvent,
+                      onClick: clickDropdownEvent
+                    }, initialized && (destroyOnClose ? (visiblePanel || isAniVisible) : true) ? dropdownsSlot({}) : [])
+                    : h('div', {
+                      class: 'vxe-button--dropdown-wrapper'
+                    }, initialized && (destroyOnClose ? (visiblePanel || isAniVisible) : true)
+                      ? downBtnList.map((option, i) => {
+                        return h(VxeButtonComponent, {
+                          key: i,
+                          type: option.type,
+                          mode: option.mode || btnMode,
+                          className: option.className,
+                          name: option.name,
+                          routerLink: option.routerLink,
+                          permissionCode: option.permissionCode,
+                          title: option.title,
+                          content: option.content,
+                          status: option.status,
+                          icon: option.icon,
+                          round: XEUtils.isBoolean(option.round) ? option.round : (btnMode === 'text' ? false : btnRound),
+                          circle: XEUtils.isBoolean(option.circle) ? option.circle : (btnMode === 'text' ? false : btnCircle),
+                          disabled: option.disabled,
+                          loading: option.loading,
+                          align: option.align,
+                          onClick (params: VxeButtonDefines.ClickEventParams) {
+                            downBtnClickEvent(params, option)
+                          }
+                        })
+                      })
+                      : [])
                 ]
               : [])
           ])
@@ -740,3 +737,5 @@ export default defineComponent({
     return this.renderVN()
   }
 })
+
+export default VxeButtonComponent

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

@@ -1,7 +1,7 @@
 import { defineComponent, watch, computed, provide, ref, inject, Teleport, h, nextTick, PropType, reactive, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI, getIcon, getConfig, getI18n, globalEvents, createEvent, useSize, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, getAbsolutePos, toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, 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/src/button'
@@ -268,74 +268,24 @@ export default defineComponent({
     }
 
     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 handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          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 = () => {

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

@@ -2,7 +2,7 @@ import { defineComponent, h, Teleport, ref, Ref, computed, provide, reactive, in
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
-import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
+import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import { parseDateObj, getDateByCode } from '../../date-panel/src/util'
 import { errLog } from '../../ui/src/log'
@@ -10,7 +10,7 @@ import VxeDatePanelComponent from '../../date-panel/src/date-panel'
 import VxeButtonComponent from '../../button/src/button'
 import VxeButtonGroupComponent from '../../button/src/button-group'
 
-import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
+import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -511,76 +511,24 @@ export default defineComponent({
     }
 
     const updatePlacement = () => {
-      return nextTick().then(() => {
-        const { placement } = props
-        const { panelIndex } = reactData
-        const targetElem = refInputTarget.value
-        const panelElem = refInputPanel.value
-        const btnTransfer = computeBtnTransfer.value
-        if (targetElem && panelElem) {
-          const targetHeight = targetElem.offsetHeight
-          const targetWidth = targetElem.offsetWidth
-          const panelHeight = panelElem.offsetHeight
-          const panelWidth = panelElem.offsetWidth
-          const marginSize = 5
-          const panelStyle: VxeComponentStyleType = {
-            zIndex: panelIndex
-          }
-          const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem)
-          let panelPlacement: VxeDatePickerPropTypes.Placement = '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) {
-              // 如果下面不够放，则向上
-              panelStyle.top = `${targetHeight}px`
-              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                // 如果上面不够放，则向下（优先）
-                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                  panelPlacement = 'top'
-                  panelStyle.top = ''
-                  panelStyle.bottom = `${targetHeight}px`
-                }
-              }
-            }
-          }
-          reactData.panelStyle = panelStyle
-          reactData.panelPlacement = panelPlacement
-          return nextTick()
-        }
-      })
+      const { placement } = props
+      const { panelIndex } = reactData
+      const targetElem = refInputTarget.value
+      const panelElem = refInputPanel.value
+      const btnTransfer = computeBtnTransfer.value
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          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 showPanel = () => {

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

@@ -2,7 +2,7 @@ import { defineComponent, h, Teleport, ref, Ref, computed, provide, reactive, in
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
-import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
+import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom'
 import { parseDateString, parseDateObj, getRangeDateByCode } from '../../date-panel/src/util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
@@ -10,7 +10,7 @@ import VxeDatePanelComponent from '../../date-panel/src/date-panel'
 import VxeButtonComponent from '../../button/src/button'
 import VxeButtonGroupComponent from '../../button/src/button-group'
 
-import type { VxeDateRangePickerConstructor, VxeDateRangePickerEmits, DateRangePickerInternalData, DateRangePickerReactData, VxeComponentStyleType, DateRangePickerMethods, VxeDateRangePickerPropTypes, DateRangePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDateRangePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
+import type { VxeDateRangePickerConstructor, VxeDateRangePickerEmits, DateRangePickerInternalData, DateRangePickerReactData, DateRangePickerMethods, VxeDateRangePickerPropTypes, DateRangePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDateRangePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -242,7 +242,7 @@ export default defineComponent({
       if (globalPlaceholder) {
         return getFuncText(globalPlaceholder)
       }
-      return getI18n('vxe.base.pleaseSelect')
+      return getI18n('vxe.dateRangePicker.pleaseRange')
     })
 
     const computeInpImmediate = computed(() => {
@@ -541,11 +541,11 @@ export default defineComponent({
       if ($startDatePanel && $endDatePanel) {
         const startValue = $startDatePanel.getModelValue()
         const endValue = $endDatePanel.getModelValue()
-        if (startValue && endValue) {
+        if ((startValue && !endValue) || (!startValue && endValue)) {
+          handleChange('', '', evnt)
+        } else {
           $startDatePanel.confirmByEvent(evnt)
           $endDatePanel.confirmByEvent(evnt)
-        } else {
-          handleChange('', '', evnt)
         }
       }
       hidePanel()
@@ -640,76 +640,24 @@ export default defineComponent({
     }
 
     const updatePlacement = () => {
-      return nextTick().then(() => {
-        const { placement } = props
-        const { panelIndex } = reactData
-        const targetElem = refInputTarget.value
-        const panelElem = refInputPanel.value
-        const btnTransfer = computeBtnTransfer.value
-        if (targetElem && panelElem) {
-          const targetHeight = targetElem.offsetHeight
-          const targetWidth = targetElem.offsetWidth
-          const panelHeight = panelElem.offsetHeight
-          const panelWidth = panelElem.offsetWidth
-          const marginSize = 5
-          const panelStyle: VxeComponentStyleType = {
-            zIndex: panelIndex
-          }
-          const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem)
-          let panelPlacement: VxeDateRangePickerPropTypes.Placement = '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) {
-              // 如果下面不够放，则向上
-              panelStyle.top = `${targetHeight}px`
-              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                // 如果上面不够放，则向下（优先）
-                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                  panelPlacement = 'top'
-                  panelStyle.top = ''
-                  panelStyle.bottom = `${targetHeight}px`
-                }
-              }
-            }
-          }
-          reactData.panelStyle = panelStyle
-          reactData.panelPlacement = panelPlacement
-          return nextTick()
-        }
-      })
+      const { placement } = props
+      const { panelIndex } = reactData
+      const targetElem = refInputTarget.value
+      const panelElem = refInputPanel.value
+      const btnTransfer = computeBtnTransfer.value
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          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 showPanel = () => {