vxe-pc-ui 4.20.7 → 4.20.9

package/packages/layout-container/src/layout-container.ts

@@ -1,14 +1,22 @@
 import { ref, h, reactive, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { getConfig, useSize, createEvent } from '../../ui'
+import { VxeUI, useFns } from '../../ui'
 import XEUtils from 'xe-utils'
 
 import type { VxeLayoutContainerPropTypes, LayoutContainerReactData, LayoutContainerPrivateMethods, VxeLayoutContainerEmits, LayoutContainerMethods, LayoutContainerPrivateRef, VxeLayoutContainerPrivateComputed, VxeLayoutContainerConstructor, VxeLayoutContainerPrivateMethods, ValueOf } from '../../../types'
 
+const { getConfig, baseUtils, createEvent } = VxeUI
+
+const { getDefVal } = baseUtils
+
 export default defineVxeComponent({
   name: 'VxeLayoutContainer',
   props: {
     vertical: Boolean as PropType<VxeLayoutContainerPropTypes.Vertical>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeLayoutContainerPropTypes.UseScrollbar>,
+      default: () => getDefVal(getConfig().layoutContainer.useScrollbar, getConfig().useScrollbar)
+    },
     size: {
       type: String as PropType<VxeLayoutContainerPropTypes.Size>,
       default: () => getConfig().layoutContainer.size || getConfig().size
@@ -22,7 +30,8 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive<LayoutContainerReactData>({
     })
@@ -32,7 +41,8 @@ export default defineVxeComponent({
     }
 
     const computeMaps: VxeLayoutContainerPrivateComputed = {
-      computeSize
+      computeSize,
+      computeIsVScrollbar
     }
 
     const $xeLayoutContainer = {

package/packages/list/src/list.ts

@@ -1,7 +1,7 @@
 import { h, PropType, ref, Ref, computed, onBeforeUnmount, watch, reactive, nextTick, onActivated, onMounted, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, useSize, createEvent, renderEmptyElement } from '../../ui'
+import { VxeUI, createEvent, renderEmptyElement } from '../../ui'
 import { getCrossListDragRowInfo } from './store'
 import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom'
 import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils'
@@ -12,7 +12,7 @@ import VxeLoadingComponent from '../../loading'
 
 import type { VxeListConstructor, VxeListPropTypes, VxeListEmits, ListReactData, VxeListPrivateMethods, ListInternalData, VxeListDefines, ValueOf, ListMethods, ListPrivateMethods, ListPrivateRef, VxeComponentStyleType } from '../../../types'
 
-const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, menus, globalEvents, globalResize } = VxeUI
+const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, useFns, menus, globalEvents, globalResize } = VxeUI
 
 const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
 
@@ -167,7 +167,8 @@ export default defineVxeComponent({
 
     const browseObj = XEUtils.browse()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
 
@@ -179,6 +180,7 @@ export default defineVxeComponent({
     const refHeaderElem = ref() as Ref<HTMLDivElement>
     const refFooterElem = ref() as Ref<HTMLDivElement>
     const refVirtualWrapper = ref() as Ref<HTMLDivElement>
+    const refVirtualSpaceElem = ref() as Ref<HTMLDivElement>
     const refVirtualBody = ref() as Ref<HTMLDivElement>
 
     const refTrackXElem = ref<HTMLDivElement>()
@@ -521,7 +523,6 @@ export default defineVxeComponent({
      */
     const refreshScroll = () => {
       const { lastScrollLeft, lastScrollTop } = internalData
-      updateScrollbar()
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0
@@ -532,8 +533,14 @@ export default defineVxeComponent({
     }
 
     const updateScrollbar = () => {
-      updateThumbSize()
-      updateThumbOffset()
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        return nextTick().then(() => {
+          updateThumbSize()
+          updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     }
 
     /**
@@ -553,10 +560,11 @@ export default defineVxeComponent({
           parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight))
         }
         reactData.parentHeight = parentHeight
-        updateScrollbar()
         updateHeight()
         if (el.clientWidth && el.clientHeight) {
-          return computeScrollLoad()
+          return computeScrollLoad().then(() => {
+            updateScrollbar()
+          })
         }
       }
       return nextTick()
@@ -565,7 +573,7 @@ export default defineVxeComponent({
     const loadYData = (evnt: Event) => {
       const { scrollYStore } = internalData
       const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore
-      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollBodyElem = evnt.currentTarget as HTMLDivElement
       const scrollTop = scrollBodyElem.scrollTop
       const toVisibleIndex = Math.floor(scrollTop / rowHeight)
       const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize)
@@ -580,7 +588,7 @@ export default defineVxeComponent({
     }
 
     const scrollEvent = (evnt: Event) => {
-      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollBodyElem = evnt.currentTarget as HTMLDivElement
       const scrollTop = scrollBodyElem.scrollTop
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
@@ -1940,6 +1948,27 @@ export default defineVxeComponent({
       }
     }
 
+    const bindScrollbarResize = () => {
+      const { scrollObserver } = internalData
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value
+          const viewInnerEl = refVirtualSpaceElem.value
+          const scrollObserver = globalResize.create(() => {
+            reScrollFlag.value++
+          })
+          if (el) {
+            scrollObserver.observe(el)
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl)
+          }
+          internalData.scrollObserver = scrollObserver
+        }
+      }
+    }
+
     const updateThumbSize = () => {
       const viewEl = refVirtualWrapper.value
       if (!viewEl) {
@@ -2348,12 +2377,13 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { showCheckbox, className, loading, useScrollbar } = props
+      const { showCheckbox, className, loading } = props
       const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const wrapperStyles = computeWrapperStyles.value
       const virtualStyles = computeVirtualStyles.value
       const radioOpts = computeRadioOpts.value
@@ -2384,17 +2414,17 @@ export default defineVxeComponent({
         ref: refElem,
         class: [
           'vxe-list',
-          useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
-          useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
-          useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
-          useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+          isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+          isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+          isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+          isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
           className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
           {
             [`size--${vSize}`]: vSize,
-            'is--virtual-scrollbar': useScrollbar,
-            'ov-padding': useScrollbar && scrollbarOpts.padding,
-            'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-            'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+            'is--virtual-scrollbar': isVScrollbar,
+            'ov-padding': isVScrollbar && scrollbarOpts.padding,
+            'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+            'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
             'overflow-y': yThumbHeight,
             'overflow-x': xThumbWidth,
             'is--drag': isDrag,
@@ -2443,6 +2473,7 @@ export default defineVxeComponent({
           onScroll: scrollEvent
         }, [
           h('div', {
+            ref: refVirtualSpaceElem,
             class: 'vxe-list--y-space',
             style: {
               height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2471,7 +2502,7 @@ export default defineVxeComponent({
         /**
          * 滚动条
          */
-        useScrollbar
+        isVScrollbar
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
@@ -2536,44 +2567,56 @@ export default defineVxeComponent({
       loadData(props.data || [])
     })
 
-    const reFlag = ref(0)
+    const reScrollFlag = ref(0)
+    const reLayoutFlag = ref(0)
     watch(() => props.height, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.maxHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.syncResize, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
-    watch(() => props.useScrollbar, () => {
-      reFlag.value++
+    watch(computeIsVScrollbar, () => {
+      nextTick(() => {
+        bindScrollbarResize()
+        nextTick(() => {
+          reLayoutFlag.value++
+        })
+      })
     })
     watch(computeRowHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollYWidth, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollXHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollXVisible, () => {
       nextTick(() => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
     watch(computeScrollYVisible, () => {
       nextTick(() => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
-    watch(reFlag, () => {
+    watch(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate()
       })
     })
 
+    watch(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar()
+      })
+    })
+
     watch(() => props.checkRowKey, () => {
       updateRadioModeValue()
     })
@@ -2600,7 +2643,7 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props
+      const { showSeq, showRadio, showCheckbox, autoResize } = props
       const rowOpts = computeRowOpts.value
       const { useKey } = rowOpts
 
@@ -2623,25 +2666,12 @@ export default defineVxeComponent({
       if (useKey && !keyField) {
         errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField'])
       }
-      const el = refElem.value
-      if (useScrollbar) {
-        const viewInnerEl = refVirtualBody.value
-        const scrollObserver = globalResize.create(() => {
-          reFlag.value++
-        })
-        if (el) {
-          scrollObserver.observe(el)
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl)
-        }
-        internalData.scrollObserver = scrollObserver
-      }
       if (autoResize) {
+        const el = refElem.value
         const parentEl = getParentElem()
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++
+            reLayoutFlag.value++
           }
         })
         if (el) {
@@ -2652,9 +2682,10 @@ export default defineVxeComponent({
         }
         internalData.resizeObserver = resizeObserver
       }
-      reFlag.value++
+      reLayoutFlag.value++
+      bindScrollbarResize()
       globalEvents.on($xeList, 'resize', () => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
 

package/packages/menu/src/menu.ts

@@ -1,7 +1,7 @@
 import { ref, h, reactive, Teleport, PropType, inject, resolveComponent, watch, VNode, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui'
+import { VxeUI, createEvent, permission, globalEvents, renderEmptyElement } from '../../ui'
 import { getPopupContainer, scrollToView, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, isEnableConf, getDefaultConfig } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -13,7 +13,7 @@ import type { VxeMenuDefines, VxeMenuPropTypes, MenuInternalData, MenuReactData,
 
 const { errLog } = createComponentLog('menu')
 
-const { menus, getConfig, getIcon } = VxeUI
+const { menus, useFns, getConfig, getIcon } = VxeUI
 
 function createInternalData (): MenuInternalData {
   return {
@@ -100,7 +100,8 @@ export default defineVxeComponent({
     const refCollapseBodyElem = ref<HTMLDivElement>()
     const refCollapseBodyScrollbar = ref<VxeScrollbarInstance>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
     const internalData = createInternalData()
@@ -701,9 +702,10 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { loading, collapseFixed, appendTo, useScrollbar } = props
+      const { loading, collapseFixed, appendTo } = props
       const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const isCollapsed = computeIsCollapsed.value
       const currBorder = computeCurrBorder.value
       const varStyle = computeVarStyle.value
@@ -762,7 +764,7 @@ export default defineVxeComponent({
                     class: 'vxe-menu--header'
                   }, headerSlot(stParams))
                   : renderEmptyElement($xeMenu),
-                useScrollbar && isEnterCollapse
+                isVScrollbar && isEnterCollapse
                   ? h(VxeScrollbarComponent, {
                     ref: refCollapseBodyScrollbar,
                     class: 'vxe-menu--scrollbar-body',

package/packages/modal/src/modal.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getEventTargetNode, getPopupContainer, getPopupWrapperElement, isScale, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue, getDefaultConfig } from '../../ui/src/utils'
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { allActiveModals } from './store'
@@ -266,7 +266,8 @@ export default defineVxeComponent({
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
     const internalData = createInternalData()
@@ -1398,8 +1399,9 @@ export default defineVxeComponent({
     }
 
     const renderBody = () => {
-      const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props
+      const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props
       const content = props.content || message
+      const isVScrollbar = computeIsVScrollbar.value
       const isMsg = computeIsMsg.value
       const scrollbarProps = computeScrollbarProps.value
       const defaultSlot = slots.default || propSlots.default
@@ -1420,7 +1422,7 @@ export default defineVxeComponent({
 
       if (useHtml && !defaultSlot) {
         contVNs.push(
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               key: 'shc',
               class: 'vxe-modal--scrollbar-content',
@@ -1443,7 +1445,7 @@ export default defineVxeComponent({
         )
       } else {
         contVNs.push(
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               key: 'sdc',
               class: 'vxe-modal--scrollbar-content',

package/packages/scrollbar/src/scrollbar.ts

@@ -85,10 +85,18 @@ export default defineVxeComponent({
       type: String as PropType<VxeScrollbarPropTypes.ViewInnerClassName>,
       default: () => getConfig().scrollbar.viewInnerClassName
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     autoResize: {
       type: Boolean as PropType<VxeScrollbarPropTypes.AutoResize>,
       default: () => getConfig().scrollbar.autoResize
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     syncResize: [Boolean, String, Number] as PropType<VxeScrollbarPropTypes.SyncResize>
   },
   emits: [
@@ -711,7 +719,6 @@ export default defineVxeComponent({
       }
 
       reFlag.value++
-
       globalEvents.on($xeScrollbar, 'resize', () => {
         reFlag.value++
       })

package/packages/tabs/src/tabs.ts

@@ -1,6 +1,6 @@
 import { ref, h, reactive, inject, PropType, provide, computed, onUnmounted, watch, nextTick, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { VxeUI, useSize } from '../../ui'
+import { VxeUI, useFns } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
@@ -81,7 +81,8 @@ export default defineVxeComponent({
 
     const $xeParentTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const refElem = ref<HTMLDivElement>()
     const refHeadWrapperElem = ref<HTMLDivElement>()
@@ -791,13 +792,13 @@ export default defineVxeComponent({
     }
 
     const renderTabPane = (item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
-      const { useScrollbar } = props
       const { initNames, activeName } = reactData
       const { name, slots } = item
       const defaultSlot = slots ? slots.default : null
       const scrollbarProps = computeScrollbarProps.value
+      const isVScrollbar = computeIsVScrollbar.value
       if (name && initNames.includes(name)) {
-        return useScrollbar
+        return isVScrollbar
           ? h(VxeScrollbarComponent, {
             key: `${name}`,
             class: ['vxe-tabs-pane--scrollbar-item', {

package/packages/tooltip/src/tooltip.ts

@@ -1,7 +1,7 @@
 import { h, ref, nextTick, onBeforeUnmount, onMounted, computed, reactive, watch, PropType, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, useSize } from '../../ui'
+import { VxeUI, useFns } from '../../ui'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -137,7 +137,8 @@ export default defineVxeComponent({
 
     const xID = XEUtils.uniqueId()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
 
@@ -331,7 +332,7 @@ export default defineVxeComponent({
       const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData
       const panelElem = refElem.value
       if (!targetElem || !panelElem) {
-        return
+        return nextTick()
       }
       const targetRect = targetElem.getBoundingClientRect()
 
@@ -371,6 +372,7 @@ export default defineVxeComponent({
       tipStore.placement = ppObj.placement
       tipStore.style = panelStyle
       tipStore.arrowStyle.left = ppObj.arrowLeft ? `${ppObj.arrowLeft}px` : ''
+      return nextTick()
     }
 
     const tooltipMethods: TooltipMethods = {
@@ -398,8 +400,13 @@ export default defineVxeComponent({
         return handleVisible(target, content)
       },
       updatePlacement () {
-        updateTipStyle()
-        return nextTick().then(updateTipStyle)
+        return updateTipStyle().then(() => {
+          return updateTipStyle()
+        }).then(() => {
+          setTimeout(() => {
+            updateTipStyle()
+          }, 15)
+        })
       },
       isActived () {
         return reactData.tipActive
@@ -430,8 +437,9 @@ export default defineVxeComponent({
     Object.assign($xeTooltip, tooltipMethods, tooltipPrivateMethods)
 
     const renderContent = () => {
-      const { useScrollbar, theme, useHtml, useHTML } = props
+      const { theme, useHtml, useHTML } = props
       const { tipContent } = reactData
+      const isVScrollbar = computeIsVScrollbar.value
       const wrapperStyle = computeWrapperStyle.value
       const contentSlot = slots.content
       const contVNs: VNode[] = []
@@ -453,7 +461,7 @@ export default defineVxeComponent({
           key: 'cd'
         }, `${tipContent}`))
       }
-      if (useScrollbar) {
+      if (isVScrollbar) {
         return h(VxeScrollbarComponent, {
           key: 5,
           ref: contentScrollbar,