vxe-pc-ui 4.20.0 → 4.20.1

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

@@ -97,7 +97,7 @@ export default defineVxeComponent({
       const vSize = computeSize.value
       const collapseOpts = computeCollapseOpts.value
       const scrollbarOpts = computeScrollbarOpts.value
-      const { native, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
+      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
       const defaultSlot = slots.default
 
       return h('aside', {
@@ -113,13 +113,16 @@ export default defineVxeComponent({
       }, [
         useScrollbar
           ? h(VxeScrollbarComponent, {
-            native,
+            width: scrollbarOpts.width,
+            height: scrollbarOpts.height,
+            autoHide: scrollbarOpts.autoHide,
+            visible: scrollbarOpts.visible,
             xConfig: {
-              visible: 'hidden'
+              visible: false
             },
-            yConfig,
+            yConfig: scrollbarOpts.yConfig,
             className: 'vxe-layout-aside--scrollbar' + (className ? (' ' + className) : ''),
-            viewAttrs,
+            viewAttrs: scrollbarOpts.viewAttrs,
             viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
             viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
           }, {

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

@@ -64,6 +64,27 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig)
     })
 
+    const computeScrollbarProps = computed(() => {
+      const { showBacktop } = props
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
+        viewAttrs: {
+          ...scrollbarOpts.viewAttrs,
+          id: showBacktop ? (backtopId || null) : null
+        },
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+      }
+    })
+
     const computeMaps: VxeLayoutBodyPrivateComputed = {
       computeSize
     }
@@ -95,8 +116,7 @@ export default defineVxeComponent({
     const renderVN = () => {
       const { loading, padding, showBacktop, useScrollbar } = props
       const backtopOpts = computeBacktopOpts.value
-      const scrollbarOpts = computeScrollbarOpts.value
-      const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
+      const scrollbarProps = computeScrollbarProps.value
       const vSize = computeSize.value
       const defaultSlot = slots.default
       const backtopSlot = slots.backtop
@@ -125,18 +145,7 @@ export default defineVxeComponent({
         }]
       }, [
         useScrollbar
-          ? h(VxeScrollbarComponent, {
-            native,
-            xConfig,
-            yConfig,
-            className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
-            viewAttrs: {
-              ...viewAttrs,
-              id: showBacktop ? (backtopId || null) : null
-            },
-            viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
-            viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
-          }, {
+          ? h(VxeScrollbarComponent, scrollbarProps, {
             default: () => defaultSlot ? defaultSlot({}) : []
           })
           : h('div', {

package/packages/list/src/list.ts

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, useSize, createEvent, renderEmptyElement } from '../../ui'
 import { getCrossListDragRowInfo } from './store'
 import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom'
-import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils'
+import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util'
@@ -176,7 +176,6 @@ export default defineVxeComponent({
     const refVirtualWrapper = ref() as Ref<HTMLDivElement>
     const refVirtualBody = ref() as Ref<HTMLDivElement>
 
-    const refViewInnerElem = ref<HTMLDivElement>()
     const refTrackXElem = ref<HTMLDivElement>()
     const refTrackYElem = ref<HTMLDivElement>()
     const refThumbXElem = ref<HTMLDivElement>()
@@ -242,17 +241,18 @@ export default defineVxeComponent({
 
     const computeWrapperStyles = computed(() => {
       const rowHeight = computeRowHeight.value
+      const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXOpts = computeScrollbarXOpts.value
       const scrollbarYOpts = computeScrollbarYOpts.value
+      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
       const stys: VxeComponentStyleType = {}
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight)
       }
-      if (scrollbarYOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width)
-      }
-      if (scrollbarXOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height)
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth)
       }
       return stys
     })
@@ -284,24 +284,50 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
     })
 
+    const computeScrollXVisible = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+    })
+
+    const computeScrollYVisible = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+    })
+
+    const computeScrollXAutoHide = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    })
+
+    const computeScrollYAutoHide = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    })
+
     const computeScrollbarWrapperClss = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const { padding } = scrollbarOpts
       const { yThumbHeight, xThumbWidth } = reactData
-      const scrollbarXOpts = computeScrollbarXOpts.value
-      const scrollbarYOpts = computeScrollbarYOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const scrollXVisible = computeScrollXVisible.value
+      const scrollYVisible = computeScrollYVisible.value
+      const scrollXAutoHide = computeScrollXAutoHide.value
+      const scrollYAutoHide = computeScrollYAutoHide.value
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
-        `ov-x--${scrollbarXOpts.visible || 'visible'}`,
-        `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+        `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+        `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
         `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
       ], {
         'is--padding': padding,
-        'ov-x--auto-hide': scrollbarXOpts.autoHide,
-        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        'ov-x--auto-hide': scrollXAutoHide,
+        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       })
@@ -2311,7 +2337,7 @@ export default defineVxeComponent({
 
     const renderVN = () => {
       const { showCheckbox, className, loading, useScrollbar } = props
-      const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData
+      const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
@@ -2326,8 +2352,13 @@ export default defineVxeComponent({
       const rowOpts = computeRowOpts.value
       const { isHover, padding } = rowOpts
       const isDrag = computeIsDrag.value
-      const scrollbarXOpts = computeScrollbarXOpts.value
-      const scrollbarYOpts = computeScrollbarYOpts.value
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollXVisible = computeScrollXVisible.value
+      const scrollYVisible = computeScrollYVisible.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const scrollXAutoHide = computeScrollXAutoHide.value
+      const scrollYAutoHide = computeScrollYAutoHide.value
       const scrollbarWrapperClss = computeScrollbarWrapperClss.value
       const showDefChekboxHead = showCheckbox && showHeader !== false
 
@@ -2339,14 +2370,25 @@ export default defineVxeComponent({
       }
       return h('div', {
         ref: refElem,
-        class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
-          [`size--${vSize}`]: vSize,
-          'is--virtual-scrollbar': useScrollbar,
-          'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
-          'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
-          'is--drag': isDrag,
-          'is--loading': loading
-        }],
+        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'}` : '',
+          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,
+            'overflow-y': yThumbHeight,
+            'overflow-x': xThumbWidth,
+            'is--drag': isDrag,
+            'is--loading': loading
+          }
+        ],
         style: wrapperStyles,
         ...leOns
       }, [
@@ -2406,17 +2448,7 @@ export default defineVxeComponent({
             style: {
               marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
             }
-          }, useScrollbar
-            ? (
-                defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i))
-              )
-            : [
-                h('div', {
-                  key: 'vi',
-                  ref: refViewInnerElem,
-                  class: 'vxe-scrollbar--view-inner'
-                }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
-              ])
+          }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
         ]),
         footerSlot
           ? h('div', {
@@ -2431,7 +2463,7 @@ export default defineVxeComponent({
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
-            scrollbarXOpts.visible === 'hidden'
+            scrollXVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: refTrackXElem,
@@ -2448,7 +2480,7 @@ export default defineVxeComponent({
                   onLostpointercapture: cleatPointerThumbEvent
                 })
               ]),
-            scrollbarYOpts.visible === 'hidden'
+            scrollYVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: refTrackYElem,
@@ -2502,11 +2534,24 @@ export default defineVxeComponent({
     watch(() => props.syncResize, () => {
       reFlag.value++
     })
+    watch(() => props.useScrollbar, () => {
+      reFlag.value++
+    })
     watch(computeRowHeight, () => {
       reFlag.value++
     })
-    watch(reFlag, () => {
+    watch(computeScrollXVisible, () => {
+      nextTick(() => {
+        reFlag.value++
+      })
+    })
+    watch(computeScrollYVisible, () => {
       nextTick(() => {
+        reFlag.value++
+      })
+    })
+    watch(reFlag, () => {
+      recalculate().then(() => {
         recalculate()
       })
     })
@@ -2562,13 +2607,13 @@ export default defineVxeComponent({
       }
       if (useScrollbar || autoResize) {
         const el = refElem.value
-        const viewInnerEl = refViewInnerElem.value
+        const viewInnerEl = refVirtualBody.value
         const resizeObserver = globalResize.create(() => {
           reFlag.value++
         })
-        resizeObserver.observe(el)
-        if (autoResize) {
-          if (el) {
+        if (el) {
+          resizeObserver.observe(el)
+          if (autoResize) {
             resizeObserver.observe(el.parentElement as HTMLDivElement)
           }
         }

package/packages/scrollbar/src/scrollbar.ts

@@ -4,6 +4,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './util'
+import { getDefaultConfig } from '../../ui/src/utils'
 import VxeLoadingComponent from '../../loading'
 
 import type { ScrollbarReactData, ScrollbarInternalData, VxeScrollbarEmits, ScrollbarMethods, ScrollbarPrivateMethods, VxeScrollbarPropTypes, ValueOf, ScrollbarPrivateRef, VxeScrollbarPrivateComputed, VxeScrollbarConstructor, VxeScrollbarPrivateMethods, VxeComponentStyleType } from '../../../types'
@@ -33,6 +34,7 @@ export default defineVxeComponent({
   name: 'VxeScrollbar',
   props: {
     id: [String, Number] as PropType<VxeScrollbarPropTypes.Id>,
+    viewId: [String, Number] as PropType<VxeScrollbarPropTypes.ViewId>,
     width: [String, Number] as PropType<VxeScrollbarPropTypes.Width>,
     height: [String, Number] as PropType<VxeScrollbarPropTypes.Height>,
     minWidth: [String, Number] as PropType<VxeScrollbarPropTypes.MinWidth>,
@@ -48,6 +50,14 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeScrollbarPropTypes.Padding>,
       default: () => getConfig().scrollbar.padding
     },
+    autoHide: {
+      type: Boolean as PropType<VxeScrollbarPropTypes.AutoHide>,
+      default: () => getConfig().scrollbar.autoHide
+    },
+    visible: {
+      type: Boolean as PropType<VxeScrollbarPropTypes.Visible>,
+      default: () => getConfig().scrollbar.visible
+    },
     xConfig: Object as PropType<VxeScrollbarPropTypes.XConfig>,
     yConfig: Object as PropType<VxeScrollbarPropTypes.YConfig>,
     className: {
@@ -97,6 +107,8 @@ export default defineVxeComponent({
       const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props
       const xOpts = computeXOpts.value
       const yOpts = computeYOpts.value
+      const barWidth = yOpts.width
+      const barHeight = xOpts.height
       const stys: VxeComponentStyleType = {}
       if (width) {
         stys.width = toCssUnit(width)
@@ -116,34 +128,58 @@ export default defineVxeComponent({
       if (maxHeight) {
         stys.maxHeight = toCssUnit(maxHeight)
       }
-      if (yOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width)
-      }
-      if (xOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height)
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth)
       }
       return stys
     })
 
+    const computeXVisible = computed(() => {
+      const { visible } = props
+      const xOpts = computeXOpts.value
+      return getDefaultConfig(xOpts.visible, visible)
+    })
+
+    const computeYVisible = computed(() => {
+      const { visible } = props
+      const yOpts = computeYOpts.value
+      return getDefaultConfig(yOpts.visible, visible)
+    })
+
+    const computeXAutoHide = computed(() => {
+      const { autoHide } = props
+      const xOpts = computeXOpts.value
+      return getDefaultConfig(xOpts.autoHide, autoHide)
+    })
+
+    const computeYAutoHide = computed(() => {
+      const { autoHide } = props
+      const yOpts = computeYOpts.value
+      return getDefaultConfig(yOpts.autoHide, autoHide)
+    })
+
     const computeWrapperClss = computed(() => {
       const { native, className, padding } = props
       const { yThumbHeight, xThumbWidth } = reactData
-      const xOpts = computeXOpts.value
-      const yOpts = computeYOpts.value
       const xToTop = computeXToTop.value
       const yToLeft = computeYToLeft.value
+      const xVisible = computeXVisible.value
+      const yVisible = computeYVisible.value
+      const xAutoHide = computeXAutoHide.value
+      const yAutoHide = computeYAutoHide.value
       return domUtils.buildClass([
         'vxe-scrollbar',
-        `ov-x--${xOpts.visible || 'visible'}`,
-        `ov-y--${yOpts.visible || 'visible'}`,
+        `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
+        `ov-y--${yVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${xToTop ? 'top' : 'bottom'}`,
         `sy-pos--${yToLeft ? 'left' : 'right'}`,
         native ? 'is--native' : 'is--virtual',
         className
       ], {
         'is--padding': padding,
-        'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide,
+        'ov-x--auto-hide': xAutoHide,
+        'ov-y--auto-hide': yAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       })
@@ -512,13 +548,13 @@ export default defineVxeComponent({
     Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods)
 
     const renderVN = () => {
-      const { id, native, loading, viewAttrs } = props
+      const { id, native, loading, viewId, viewAttrs } = props
       const wrapperStyle = computeWrapperStyle.value
       const wrapperClss = computeWrapperClss.value
       const viewClss = computeViewClss.value
       const viewInnerClss = computeViewInnerClss.value
-      const xOpts = computeXOpts.value
-      const yOpts = computeYOpts.value
+      const xVisible = computeXVisible.value
+      const yVisible = computeYVisible.value
       const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
@@ -530,6 +566,7 @@ export default defineVxeComponent({
           ref: refViewElem,
           class: viewClss,
           onScroll: scrollEvent,
+          id: viewId || null,
           ...viewAttrs
         }, [
           h('div', {
@@ -538,7 +575,7 @@ export default defineVxeComponent({
             class: viewInnerClss
           }, defaultSlot ? defaultSlot({}) : [])
         ]),
-        native || xOpts.visible === 'hidden'
+        native || xVisible === false
           ? renderEmptyElement($xeScrollbar)
           : h('div', {
             ref: refTrackXElem,
@@ -555,7 +592,7 @@ export default defineVxeComponent({
               onLostpointercapture: cleatPointerThumbEvent
             })
           ]),
-        native || yOpts.visible === 'hidden'
+        native || yVisible === false
           ? renderEmptyElement($xeScrollbar)
           : h('div', {
             ref: refTrackYElem,
@@ -605,6 +642,16 @@ export default defineVxeComponent({
     watch(() => props.syncResize, () => {
       reFlag.value++
     })
+    watch(computeXVisible, () => {
+      nextTick(() => {
+        reFlag.value++
+      })
+    })
+    watch(computeYVisible, () => {
+      nextTick(() => {
+        reFlag.value++
+      })
+    })
     watch(reFlag, () => {
       $xeScrollbar.recalculate().then(() => {
         $xeScrollbar.recalculate()

package/packages/tabs/src/tabs.ts

@@ -175,6 +175,23 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig)
     })
 
+    const computeScrollbarProps = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+      }
+    })
+
     const computeMaps: VxeTabsPrivateComputed = {
     }
 
@@ -775,8 +792,7 @@ export default defineVxeComponent({
       const { initNames, activeName } = reactData
       const { name, slots } = item
       const defaultSlot = slots ? slots.default : null
-      const scrollbarOpts = computeScrollbarOpts.value
-      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      const scrollbarProps = computeScrollbarProps.value
       if (name && initNames.includes(name)) {
         return useScrollbar
           ? h(VxeScrollbarComponent, {
@@ -784,9 +800,7 @@ export default defineVxeComponent({
             class: ['vxe-tabs-pane--scrollbar-item', {
               'is--visible': activeName === name
             }],
-            ...scrollbarOpts,
-            viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
-            viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            ...scrollbarProps
           }, {
             default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
           })