vxe-pc-ui 4.20.11 → 4.20.13

package/lib/vxe-scrollbar/style/style.min.css

@@ -1 +1 @@
-.vxe-scrollbar{position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-y-width);height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar--view{height:100%;width:100%;overflow-x:auto;overflow-y:auto}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{display:none;position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar.overflow-x>.vxe-scrollbar--track-x{display:block}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;left:0;height:var(--vxe-ui-scrollbar-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;top:0;width:var(--vxe-ui-scrollbar-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.vxe-scrollbar.sx-pos--top>.vxe-scrollbar--track-x{top:0}.vxe-scrollbar.sx-pos--bottom>.vxe-scrollbar--track-x{bottom:0}.vxe-scrollbar.sy-pos--left>.vxe-scrollbar--track-y{left:0}.vxe-scrollbar.sy-pos--right>.vxe-scrollbar--track-y{right:0}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-x{width:calc(100% - var(--vxe-ui-scrollbar-x-height))}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-y{height:calc(100% - var(--vxe-ui-scrollbar-y-width))}.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--left>.vxe-scrollbar--track-y,.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--right>.vxe-scrollbar--track-y{top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--bottom>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--top>.vxe-scrollbar--track-x{left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-scrollbar-thumb-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar.theme--light{--vxe-ui-scrollbar-thumb-background-color:rgba(0,0,0,0.4);--vxe-ui-scrollbar-thumb-hover-background-color:rgba(0,0,0,0.5);--vxe-ui-scrollbar-thumb-active-background-color:rgba(0,0,0,0.6)}.vxe-scrollbar.theme--dark{--vxe-ui-scrollbar-thumb-background-color:rgba(255,255,255,0.4);--vxe-ui-scrollbar-thumb-hover-background-color:rgba(255,255,255,0.5);--vxe-ui-scrollbar-thumb-active-background-color:rgba(255,255,255,0.6)}
+.vxe-scrollbar{position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-current-y-width);height:var(--vxe-ui-scrollbar-current-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar--view{height:100%;width:100%;overflow-x:auto;overflow-y:auto}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{display:none;position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar.overflow-x>.vxe-scrollbar--track-x{display:block}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;left:0;height:var(--vxe-ui-scrollbar-current-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;top:0;width:var(--vxe-ui-scrollbar-current-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.vxe-scrollbar.sx-pos--top>.vxe-scrollbar--track-x{top:0}.vxe-scrollbar.sx-pos--bottom>.vxe-scrollbar--track-x{bottom:0}.vxe-scrollbar.sy-pos--left>.vxe-scrollbar--track-y{left:0}.vxe-scrollbar.sy-pos--right>.vxe-scrollbar--track-y{right:0}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-x{width:calc(100% - var(--vxe-ui-scrollbar-current-x-height))}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-y{height:calc(100% - var(--vxe-ui-scrollbar-current-y-width))}.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--left>.vxe-scrollbar--track-y,.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--right>.vxe-scrollbar--track-y{top:var(--vxe-ui-scrollbar-current-x-height)}.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--bottom>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--top>.vxe-scrollbar--track-x{left:var(--vxe-ui-scrollbar-current-y-width)}.vxe-scrollbar.is--fluent-overlay{--vxe-ui-scrollbar-current-y-width:var(--vxe-ui-scrollbar-overlay-y-width);--vxe-ui-scrollbar-current-x-height:var(--vxe-ui-scrollbar-overlay-x-height)}.vxe-scrollbar.is--fluent-overlay>.vxe-scrollbar--track-x:hover,.vxe-scrollbar.is--fluent-overlay>.vxe-scrollbar--track-y:hover{--vxe-ui-scrollbar-current-y-width:var(--vxe-ui-scrollbar-overlay-action-y-width);--vxe-ui-scrollbar-current-x-height:var(--vxe-ui-scrollbar-overlay-action-x-height)}.vxe-scrollbar.is--default-mode{--vxe-ui-scrollbar-current-y-width:var(--vxe-ui-scrollbar-y-width);--vxe-ui-scrollbar-current-x-height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-current-x-height)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-current-x-height)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-current-y-width)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-current-y-width)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-scrollbar-thumb-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar.theme--light{--vxe-ui-scrollbar-thumb-background-color:rgba(0,0,0,0.4);--vxe-ui-scrollbar-thumb-hover-background-color:rgba(0,0,0,0.5);--vxe-ui-scrollbar-thumb-active-background-color:rgba(0,0,0,0.6)}.vxe-scrollbar.theme--dark{--vxe-ui-scrollbar-thumb-background-color:rgba(255,255,255,0.4);--vxe-ui-scrollbar-thumb-hover-background-color:rgba(255,255,255,0.5);--vxe-ui-scrollbar-thumb-active-background-color:rgba(255,255,255,0.6)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.20.11",
+  "version": "4.20.13",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -66,8 +66,8 @@
     "typescript": "~5.9.3",
     "vue": "3.4.27",
     "vue-router": "~4.5.1",
-    "vxe-table": "^4.22.3",
-    "vxe-gantt": "^4.8.0"
+    "vxe-table": "^4.23.1",
+    "vxe-gantt": "^4.9.1"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/list/src/list.ts

@@ -335,12 +335,14 @@ export default defineVxeComponent({
 
     const computeScrollbarWrapperClss = computed(() => {
       const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
       const scrollXVisible = computeScrollXVisible.value
       const scrollYVisible = computeScrollYVisible.value
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
+        scrollbarOpts.fluentOverlay ? 'is--fluent-overlay' : 'is--default-mode',
         `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
         `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
@@ -1970,13 +1972,17 @@ export default defineVxeComponent({
       if (isVScrollbar) {
         if (!scrollObserver) {
           const el = refElem.value
-          const viewInnerEl = refVirtualSpaceElem.value
+          const viewSpaceEl = refVirtualSpaceElem.value
+          const viewInnerEl = refVirtualBody.value
           const scrollObserver = globalResize.create(() => {
             reScrollFlag.value++
           })
           if (el) {
             scrollObserver.observe(el)
           }
+          if (viewSpaceEl) {
+            scrollObserver.observe(viewSpaceEl)
+          }
           if (viewInnerEl) {
             scrollObserver.observe(viewInnerEl)
           }

package/packages/scrollbar/src/scrollbar.ts

@@ -49,6 +49,10 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeScrollbarPropTypes.Native>,
       default: () => getConfig().scrollbar.native
     },
+    fluentOverlay: {
+      type: Boolean as PropType<VxeScrollbarPropTypes.FluentOverlay>,
+      default: () => getConfig().scrollbar.fluentOverlay
+    },
     padding: {
       type: Boolean as PropType<VxeScrollbarPropTypes.Padding>,
       default: () => getConfig().scrollbar.padding
@@ -185,7 +189,7 @@ export default defineVxeComponent({
     })
 
     const computeWrapperClss = computed(() => {
-      const { native, theme, className, padding } = props
+      const { native, theme, className, padding, fluentOverlay } = props
       const { yThumbHeight, xThumbWidth } = reactData
       const vSize = computeSize.value
       const xToTop = computeXToTop.value
@@ -198,6 +202,7 @@ export default defineVxeComponent({
         'vxe-scrollbar',
         vSize ? `size--${vSize}` : '',
         theme ? `theme--${theme}` : '',
+        fluentOverlay ? 'is--fluent-overlay' : 'is--default-mode',
         `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
         `ov-y--${yVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${xToTop ? 'top' : 'bottom'}`,

package/packages/select/src/select.ts

@@ -529,12 +529,14 @@ export default defineVxeComponent({
 
     const computeScrollbarWrapperClss = computed(() => {
       const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
       const scrollXVisible = computeScrollXVisible.value
       const scrollYVisible = computeScrollYVisible.value
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
+        scrollbarOpts.fluentOverlay ? 'is--fluent-overlay' : 'is--default-mode',
         `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
         `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
@@ -1560,13 +1562,17 @@ export default defineVxeComponent({
       if (isVScrollbar) {
         if (!scrollObserver) {
           const el = refElem.value
-          const viewInnerEl = refVirtualSpaceElem.value
+          const viewSpaceEl = refVirtualSpaceElem.value
+          const viewInnerEl = refVirtualBody.value
           const scrollObserver = globalResize.create(() => {
             reScrollFlag.value++
           })
           if (el) {
             scrollObserver.observe(el)
           }
+          if (viewSpaceEl) {
+            scrollObserver.observe(viewSpaceEl)
+          }
           if (viewInnerEl) {
             scrollObserver.observe(viewInnerEl)
           }

package/packages/tabs/src/tabs.ts

@@ -280,7 +280,7 @@ export default defineVxeComponent({
             if (index > -1) {
               const tabEl = children[index] as HTMLDivElement
               if (tabEl) {
-                const tabHeight = tabEl.clientHeight
+                let tabHeight = tabEl.clientHeight
                 const tabWidth = tabEl.clientWidth
                 if (tabType === 'card') {
                   lintWidth = tabWidth
@@ -291,8 +291,12 @@ export default defineVxeComponent({
                   lintHeight = tabHeight
                   lintTop = tabEl.offsetTop - 1
                 } else {
-                  lintHeight = Math.max(4, Math.floor(tabHeight * 0.6))
-                  lintTop = tabEl.offsetTop + Math.floor((tabHeight - lintHeight) / 2)
+                  const tabStyle = getComputedStyle(tabEl)
+                  const paddingTop = XEUtils.toNumber(tabStyle.paddingTop)
+                  const paddingBottom = XEUtils.toNumber(tabStyle.paddingBottom)
+                  tabHeight -= (paddingTop + paddingBottom)
+                  lintHeight = Math.max(4, tabHeight)
+                  lintTop = tabEl.offsetTop + paddingTop + Math.floor((tabHeight - lintHeight) / 2)
                 }
               }
             }
@@ -301,7 +305,7 @@ export default defineVxeComponent({
             if (index > -1) {
               const tabEl = children[index] as HTMLDivElement
               if (tabEl) {
-                const tabWidth = tabEl.clientWidth
+                let tabWidth = tabEl.clientWidth
                 if (tabType === 'card') {
                   lintWidth = tabWidth + 1
                   lintLeft = tabEl.offsetLeft
@@ -309,8 +313,12 @@ export default defineVxeComponent({
                   lintWidth = tabWidth
                   lintLeft = tabEl.offsetLeft - 1
                 } else {
-                  lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
-                  lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
+                  const tabStyle = getComputedStyle(tabEl)
+                  const paddingLeft = XEUtils.toNumber(tabStyle.paddingLeft)
+                  const paddingRight = XEUtils.toNumber(tabStyle.paddingRight)
+                  tabWidth -= (paddingLeft + paddingRight)
+                  lintWidth = Math.max(4, tabWidth)
+                  lintLeft = tabEl.offsetLeft + paddingLeft + Math.floor((tabWidth - lintWidth) / 2)
                 }
               }
             }

package/packages/tree/src/tree.ts

@@ -470,12 +470,14 @@ export default defineVxeComponent({
 
     const computeScrollbarWrapperClss = computed(() => {
       const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
       const scrollXVisible = computeScrollXVisible.value
       const scrollYVisible = computeScrollYVisible.value
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
+        scrollbarOpts.fluentOverlay ? 'is--fluent-overlay' : 'is--default-mode',
         `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
         `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
@@ -3144,13 +3146,17 @@ export default defineVxeComponent({
       if (isVScrollbar) {
         if (!scrollObserver) {
           const el = refElem.value
-          const viewInnerEl = refVirtualSpaceElem.value
+          const viewSpaceEl = refVirtualSpaceElem.value
+          const viewInnerEl = refVirtualBody.value
           const scrollObserver = globalResize.create(() => {
             reScrollFlag.value++
           })
           if (el) {
             scrollObserver.observe(el)
           }
+          if (viewSpaceEl) {
+            scrollObserver.observe(viewSpaceEl)
+          }
           if (viewInnerEl) {
             scrollObserver.observe(viewInnerEl)
           }

package/styles/components/scrollbar.scss

@@ -35,8 +35,8 @@
   }
   &.is--native {
     & > .vxe-scrollbar--view::-webkit-scrollbar {
-      width: var(--vxe-ui-scrollbar-y-width);
-      height: var(--vxe-ui-scrollbar-x-height);
+      width: var(--vxe-ui-scrollbar-current-y-width);
+      height: var(--vxe-ui-scrollbar-current-x-height);
     }
     & > .vxe-scrollbar--view::-webkit-scrollbar-thumb {
       border-radius: var(--vxe-ui-base-border-radius);
@@ -95,13 +95,13 @@
 .vxe-scrollbar--track-x {
   width: 100%;
   left: 0;
-  height: var(--vxe-ui-scrollbar-x-height);
+  height: var(--vxe-ui-scrollbar-current-x-height);
   padding: var(--vxe-ui-scrollbar-track-padding) 0;
 }
 .vxe-scrollbar--track-y {
   height: 100%;
   top: 0;
-  width: var(--vxe-ui-scrollbar-y-width);
+  width: var(--vxe-ui-scrollbar-current-y-width);
   padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 .vxe-scrollbar {
@@ -128,16 +128,16 @@
   &.overflow-x {
     &.overflow-y {
       & > .vxe-scrollbar--track-x {
-        width: calc(100% - var(--vxe-ui-scrollbar-x-height));
+        width: calc(100% - var(--vxe-ui-scrollbar-current-x-height));
       }
       & > .vxe-scrollbar--track-y {
-        height: calc(100% - var(--vxe-ui-scrollbar-y-width));
+        height: calc(100% - var(--vxe-ui-scrollbar-current-y-width));
       }
       &.sx-pos--top {
         &.sy-pos--left,
         &.sy-pos--right {
           & > .vxe-scrollbar--track-y {
-            top: var(--vxe-ui-scrollbar-x-height);
+            top: var(--vxe-ui-scrollbar-current-x-height);
           }
         }
       }
@@ -145,7 +145,7 @@
         &.sx-pos--top,
         &.sx-pos--bottom {
           & > .vxe-scrollbar--track-x {
-            left: var(--vxe-ui-scrollbar-y-width);
+            left: var(--vxe-ui-scrollbar-current-y-width);
           }
         }
       }
@@ -153,22 +153,40 @@
   }
 }
 
+.vxe-scrollbar {
+  &.is--fluent-overlay {
+    --vxe-ui-scrollbar-current-y-width: var(--vxe-ui-scrollbar-overlay-y-width);
+    --vxe-ui-scrollbar-current-x-height: var(--vxe-ui-scrollbar-overlay-x-height);
+    & > .vxe-scrollbar--track-x,
+    & > .vxe-scrollbar--track-y {
+      &:hover {
+        --vxe-ui-scrollbar-current-y-width: var(--vxe-ui-scrollbar-overlay-action-y-width);
+        --vxe-ui-scrollbar-current-x-height: var(--vxe-ui-scrollbar-overlay-action-x-height);
+      }
+    }
+  }
+  &.is--default-mode {
+    --vxe-ui-scrollbar-current-y-width: var(--vxe-ui-scrollbar-y-width);
+    --vxe-ui-scrollbar-current-x-height: var(--vxe-ui-scrollbar-x-height);
+  }
+}
+
 .vxe-scrollbar {
   &.is--padding {
     &.overflow-x {
       &.sx-pos--top {
-        padding-top: var(--vxe-ui-scrollbar-x-height);
+        padding-top: var(--vxe-ui-scrollbar-current-x-height);
       }
       &.sx-pos--bottom {
-        padding-bottom: var(--vxe-ui-scrollbar-x-height);
+        padding-bottom: var(--vxe-ui-scrollbar-current-x-height);
       }
     }
     &.overflow-y {
       &.sy-pos--left {
-        padding-left: var(--vxe-ui-scrollbar-y-width);
+        padding-left: var(--vxe-ui-scrollbar-current-y-width);
       }
       &.sy-pos--right {
-        padding-right: var(--vxe-ui-scrollbar-y-width);
+        padding-right: var(--vxe-ui-scrollbar-current-y-width);
       }
     }
   }

package/styles/theme/base.scss

@@ -322,6 +322,10 @@
   /*scrollbar*/
   --vxe-ui-scrollbar-y-width: 10px;
   --vxe-ui-scrollbar-x-height: var(--vxe-ui-scrollbar-y-width);
+  --vxe-ui-scrollbar-overlay-y-width: 4px;
+  --vxe-ui-scrollbar-overlay-x-height: var(--vxe-ui-scrollbar-overlay-y-width);
+  --vxe-ui-scrollbar-overlay-action-y-width: 12px;
+  --vxe-ui-scrollbar-overlay-action-x-height: var(--vxe-ui-scrollbar-overlay-action-y-width);
   --vxe-ui-scrollbar-track-background-color: transparent;
   --vxe-ui-scrollbar-track-padding: 0;
   --vxe-ui-scrollbar-thumb-border-radius: var(--vxe-ui-base-border-radius);

package/types/components/card.d.ts

@@ -34,7 +34,7 @@ export namespace VxeCardPropTypes {
   export type Padding = boolean
   export type Size = VxeComponentSizeType
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/drawer.d.ts

@@ -75,7 +75,7 @@ export namespace VxeDrawerPropTypes {
   export type BeforeHideMethod = (params: VxeDrawerDefines.DrawerVisibleParams) => Promise<any>
   export type Slots = VxeDrawerSlots
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

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

@@ -95,7 +95,7 @@ export namespace VxeIconPickerPropTypes {
   }
   export type Transfer = boolean
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/layout-aside.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, ComputedRef, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType,VxeComponentIsVScrollbar } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -37,7 +37,7 @@ export namespace VxeLayoutAsidePropTypes {
     animation?: boolean
   }
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/layout-body.d.ts

@@ -32,7 +32,7 @@ export namespace VxeLayoutBodyPropTypes {
   export type ShowBacktop = boolean
   export interface BacktopConfig extends Omit<VxeBacktopProps, 'target'> {}
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/list.d.ts

@@ -228,7 +228,7 @@ export namespace VxeListPropTypes {
     enabled?: boolean
   }
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible'> {
     /**
      * 滚动条宽度
      */

package/types/components/menu.d.ts

@@ -87,7 +87,16 @@ export namespace VxeMenuPropTypes {
   }
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends VxeScrollbarProps {}
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeMenuProps {

package/types/components/modal.d.ts

@@ -128,7 +128,7 @@ export namespace VxeModalPropTypes {
   }) => Promise<any>
   export type Slots = VxeModalSlots
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/scrollbar.d.ts

@@ -38,6 +38,7 @@ export namespace VxeScrollbarPropTypes {
   export type Native = boolean
   export type Padding = boolean
   export type AutoHide = boolean
+  export type FluentOverlay = boolean
   export type Visible = boolean
   export interface XConfig {
     height?: number | string
@@ -136,6 +137,10 @@ export interface VxeScrollbarProps {
    * 是否自动隐藏
    */
   autoHide?: VxeScrollbarPropTypes.AutoHide
+  /**
+   * 是否悬浮叠加滚动条，默认细线，鼠标悬浮上去滑块变宽
+   */
+  fluentOverlay?: VxeScrollbarPropTypes.FluentOverlay
   /**
    * 是否显示
    */

package/types/components/select.d.ts

@@ -203,7 +203,7 @@ export namespace VxeSelectPropTypes {
    */
   export interface ScrollY extends VirtualYConfig {}
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/table.d.ts

@@ -3041,6 +3041,10 @@ export namespace VxeTablePropTypes {
      * 是否自动隐藏滚动条
      */
     autoHide?: boolean
+    /**
+     * 是否悬浮叠加滚动条，默认细线，鼠标悬浮上去滑块变宽
+     */
+    fluentOverlay?: boolean
     /**
      * 是否显示
      */

package/types/components/tooltip.d.ts

@@ -50,7 +50,7 @@ export namespace VxeTooltipPropTypes {
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
   export type Transfer = boolean
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度
      */

package/types/components/tree.d.ts

@@ -333,7 +333,7 @@ export namespace VxeTreePropTypes {
     enabled?: boolean
   }
   export type UseScrollbar = VxeComponentIsVScrollbar
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible'> {
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'fluentOverlay' | 'visible'> {
     /**
      * 滚动条宽度
      */