vxe-pc-ui 4.18.22 → 4.19.0

package/packages/scrollbar/src/scrollbar.ts

@@ -32,6 +32,7 @@ function createInternalData (): ScrollbarInternalData {
 export default defineVxeComponent({
   name: 'VxeScrollbar',
   props: {
+    id: [String, Number] as PropType<VxeScrollbarPropTypes.Id>,
     width: [String, Number] as PropType<VxeScrollbarPropTypes.Width>,
     height: [String, Number] as PropType<VxeScrollbarPropTypes.Height>,
     minWidth: [String, Number] as PropType<VxeScrollbarPropTypes.MinWidth>,
@@ -45,8 +46,22 @@ export default defineVxeComponent({
     },
     xConfig: Object as PropType<VxeScrollbarPropTypes.XConfig>,
     yConfig: Object as PropType<VxeScrollbarPropTypes.YConfig>,
-    className: String as PropType<VxeScrollbarPropTypes.ClassName>,
-    viewClassName: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
+    className: {
+      type: String as PropType<VxeScrollbarPropTypes.ClassName>,
+      default: () => getConfig().scrollbar.className
+    },
+    viewAttrs: {
+      type: Object as PropType<VxeScrollbarPropTypes.ViewAttrs>,
+      default: () => getConfig().scrollbar.viewAttrs
+    },
+    viewClassName: {
+      type: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
+      default: () => getConfig().scrollbar.viewClassName
+    },
+    viewInnerClassName: {
+      type: String as PropType<VxeScrollbarPropTypes.ViewInnerClassName>,
+      default: () => getConfig().scrollbar.viewInnerClassName
+    },
     autoResize: {
       type: Boolean as PropType<VxeScrollbarPropTypes.AutoResize>,
       default: () => getConfig().scrollbar.autoResize
@@ -108,6 +123,7 @@ export default defineVxeComponent({
 
     const computeWrapperClss = computed(() => {
       const { native, className } = props
+      const { yThumbHeight, xThumbWidth } = reactData
       const xOpts = computeXOpts.value
       const yOpts = computeYOpts.value
       return domUtils.buildClass([
@@ -118,7 +134,9 @@ export default defineVxeComponent({
         className
       ], {
         'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide
+        'ov-y--auto-hide': yOpts.autoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
       })
     })
 
@@ -130,6 +148,14 @@ export default defineVxeComponent({
       ])
     })
 
+    const computeViewInnerClss = computed(() => {
+      const { viewInnerClassName } = props
+      return domUtils.buildClass([
+        'vxe-scrollbar--view-inner',
+        viewInnerClassName
+      ])
+    })
+
     const computeXOpts = computed(() => {
       return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig)
     })
@@ -427,26 +453,30 @@ export default defineVxeComponent({
     Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods)
 
     const renderVN = () => {
-      const { native, loading } = props
+      const { id, native, loading, 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 defaultSlot = slots.default
       return h('div', {
         ref: refElem,
+        id: id || null,
         class: wrapperClss,
         style: wrapperStyle
       }, [
         h('div', {
           ref: refViewElem,
           class: viewClss,
-          onScroll: scrollEvent
+          onScroll: scrollEvent,
+          ...viewAttrs
         }, [
           h('div', {
+            key: 'vi',
             ref: refViewInnerElem,
-            class: 'vxe-scrollbar--view-inner'
+            class: viewInnerClss
           }, defaultSlot ? defaultSlot({}) : [])
         ]),
         native || xOpts.visible === 'hidden'
@@ -492,6 +522,24 @@ export default defineVxeComponent({
 
     const reFlag = ref(0)
 
+    watch(() => props.height, () => {
+      reFlag.value++
+    })
+    watch(() => props.width, () => {
+      reFlag.value++
+    })
+    watch(() => props.minHeight, () => {
+      reFlag.value++
+    })
+    watch(() => props.minWidth, () => {
+      reFlag.value++
+    })
+    watch(() => props.maxHeight, () => {
+      reFlag.value++
+    })
+    watch(() => props.maxWidth, () => {
+      reFlag.value++
+    })
     watch(() => props.native, () => {
       reFlag.value++
     })
@@ -506,20 +554,24 @@ export default defineVxeComponent({
 
     onMounted(() => {
       const { autoResize } = props
+      const viewEl = refViewElem.value
       const viewInnerEl = refViewInnerElem.value
-      if (autoResize && viewInnerEl) {
+      if (autoResize) {
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
             reFlag.value++
           }
         })
-        resizeObserver.observe(viewInnerEl)
+        if (viewEl) {
+          resizeObserver.observe(viewEl)
+        }
+        if (viewInnerEl) {
+          resizeObserver.observe(viewInnerEl)
+        }
         internalData.resizeObserver = resizeObserver
       }
 
-      nextTick(() => {
-        $xeScrollbar.recalculate()
-      })
+      reFlag.value++
     })
 
     onBeforeUnmount(() => {

package/packages/select/src/select.ts

@@ -6,8 +6,8 @@ import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
-import VxeInputComponent from '../../input/src/input'
-import VxeButtonComponent from '../../button/src/button'
+import VxeInputComponent from '../../input'
+import VxeButtonComponent from '../../button'
 
 import type { VxeSelectPropTypes, VxeSelectConstructor, SelectInternalData, SelectReactData, VxeSelectDefines, VxeButtonEvents, ValueOf, VxeSelectEmits, VxeComponentSlotType, VxeInputConstructor, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputEvents, VxeComponentStyleType, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'

package/packages/tabs/src/tabs.ts

@@ -6,7 +6,7 @@ import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
-import VxeLoadingComponent from '../../loading/src/loading'
+import VxeLoadingComponent from '../../loading'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods, VxeComponentStyleType } from '../../../types'
 

package/packages/ui/index.ts

@@ -221,11 +221,16 @@ setConfig({
     digits: 2,
     controls: true
   },
-  layoutAside: {},
-  layoutBody: {
-    backtopConfig: {
+  layoutAside: {
+    scrollbarConfig: {
+      yConfig: {
+        autoHide: true
+      }
     }
   },
+  layoutBody: {
+    backtopConfig: {}
+  },
   layoutContainer: {},
   layoutFooter: {},
   layoutHeader: {},

package/packages/upload/src/upload.ts

@@ -6,7 +6,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { initTpImg, getTpImg, getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { readLocalFile } from './util'
-import VxeButtonComponent from '../../button/src/button'
+import VxeButtonComponent from '../../button'
 
 import type { VxeUploadDefines, VxeUploadPropTypes, UploadReactData, UploadInternalData, UploadPrivateMethods, UploadMethods, VxeUploadEmits, UploadPrivateRef, VxeUploadPrivateComputed, VxeUploadConstructor, VxeUploadPrivateMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, ValueOf, VxeComponentEventParams } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'

package/styles/components/layout-aside.scss

@@ -15,9 +15,7 @@
     padding: var(--vxe-ui-layout-padding-default);
   }
 }
-.vxe-layout-aside--inner {
+.vxe-layout-aside--scrollbar {
   flex-grow: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  outline: 0;
+  overflow: hidden;
 }

package/styles/components/layout-body.scss

@@ -8,8 +8,7 @@
     padding: var(--vxe-ui-layout-padding-double);
   }
 }
-.vxe-layout-body--inner {
+.vxe-layout-body--scrollbar {
   flex-grow: 1;
-  overflow: auto;
-  outline: 0;
+  overflow: hidden;
 }

package/styles/components/menu.scss

@@ -98,11 +98,12 @@
 
 .vxe-menu--collapse-wrapper {
   display: none;
+  flex-direction: column;
   position: absolute;
-  overflow: auto;
+  overflow: hidden;
   background-color: var(--vxe-ui-layout-background-color);
   &.is--collapsed {
-    display: block;
+    display: flex;
     @include baseMixin.createAnimationTransition(all, 0.25s);
   }
   &:not(.is--enter) {
@@ -117,6 +118,14 @@
     width: var(--vxe-ui-layout-aside-default-width);
     box-shadow: var(--vxe-ui-menu-collapse-wrapper-box-shadow);
   }
+  & > .vxe-menu--header,
+  & > .vxe-menu--footer {
+    flex-shrink: 0;
+  }
+  & > .vxe-menu--body {
+    flex-grow: 1;
+    overflow: hidden;
+  }
 }
 
 .vxe-menu--item-link {

package/styles/components/scrollbar.scss

@@ -7,8 +7,6 @@
     & > .vxe-scrollbar--view {
       scrollbar-width: none;
       -ms-overflow-style: none;
-      overflow-x: auto;
-      overflow-y: auto;
     }
     & > .vxe-scrollbar--view::-webkit-scrollbar {
       display: none;
@@ -21,7 +19,7 @@
       }
       & > .vxe-scrollbar--track-x {
         opacity: 0;
-        @include baseMixin.createAnimationTransition(opacity, 0.3s);
+        @include baseMixin.createAnimationTransition(opacity, 0.8s);
       }
     }
     &.ov-y--auto-hide {
@@ -32,25 +30,11 @@
       }
       & > .vxe-scrollbar--track-y {
         opacity: 0;
-        @include baseMixin.createAnimationTransition(opacity, 0.3s);
+        @include baseMixin.createAnimationTransition(opacity, 0.8s);
       }
     }
   }
   &.is--native {
-    & > .vxe-scrollbar--view {
-      overflow-x: auto;
-      overflow-y: auto;
-    }
-    &.ov-x--hidden {
-      & > .vxe-scrollbar--view {
-        overflow-x: hidden;
-      }
-    }
-    &.ov-y--hidden {
-      & > .vxe-scrollbar--view {
-        overflow-y: hidden;
-      }
-    }
     & > .vxe-scrollbar--view::-webkit-scrollbar {
       width: var(--vxe-ui-scrollbar-y-width);
       height: var(--vxe-ui-scrollbar-x-height);
@@ -66,25 +50,47 @@
       background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
     }
   }
+  &.ov-x--hidden {
+    & > .vxe-scrollbar--view {
+      overflow-x: hidden;
+    }
+  }
+  &.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);
   user-select: none;
 }
+.vxe-scrollbar {
+  &.overflow-y {
+    & > .vxe-scrollbar--track-x,
+    & > .vxe-scrollbar--track-y {
+      display: block;
+    }
+  }
+}
 
 .vxe-scrollbar--track-x {
   width: 100%;
   bottom: 0;
   left: 0;
   height: var(--vxe-ui-scrollbar-x-height);
+  padding: var(--vxe-ui-scrollbar-track-padding) 0;
 }
 
 .vxe-scrollbar--track-y {
@@ -92,6 +98,7 @@
   right: 0;
   top: 0;
   width: var(--vxe-ui-scrollbar-y-width);
+  padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 
 .vxe-scrollbar--thumb-y {
@@ -103,7 +110,7 @@
 
 .vxe-scrollbar--thumb-x,
 .vxe-scrollbar--thumb-y {
-  border-radius: var(--vxe-ui-base-border-radius);
+  border-radius: var(--vxe-ui-scrollbar-thumb-border-radius);
   background-color: var(--vxe-ui-scrollbar-thumb-background-color);
   &:hover {
     background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);

package/styles/components/text-ellipsis.scss

@@ -1,63 +1,34 @@
 @use "sass:map";
 @use "sass:list";
+@use '../helpers/themeStatus.scss';
 
-$btnThemeList: (
-  (
-    name: "primary",
-    textColor: var(--vxe-ui-font-primary-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-font-primary-lighten-color),
-    btnDarkenColor: var(--vxe-ui-font-primary-darken-color),
-    btnDisabledColor: var(--vxe-ui-font-primary-disabled-color)
-  ),
-  (
-    name: "success",
-    textColor: var(--vxe-ui-status-success-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-success-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-success-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-success-disabled-color)
-  ),
-  (
-    name: "info",
-    textColor: var(--vxe-ui-status-info-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-info-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-info-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-info-disabled-color)
-  ),
-  (
-    name: "warning",
-    textColor: var(--vxe-ui-status-warning-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-warning-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-warning-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-warning-disabled-color)
-  ),
-  (
-    name: "danger",
-    textColor: var(--vxe-ui-status-danger-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-danger-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-danger-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-danger-disabled-color)
-  ),
-  (
-    name: "error",
-    textColor: var(--vxe-ui-status-error-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-error-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-error-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-error-disabled-color)
-  )
-);
+// 局部变量
+.vxe-text-ellipsis {
+  --vxe-ui-text-ellipsis-current-font-size: inherit;
+  &.size--xlarge {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-large);
+  }
+  &.size--medium {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
 
 .vxe-text-ellipsis {
   display: block;
   overflow: hidden;
   white-space: normal;
-  @for $index from 0 to list.length($btnThemeList) {
-    $item: list.nth($btnThemeList, $index + 1);
+  font-size: var(--vxe-ui-text-ellipsis-current-font-size);
+  @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+    $item: list.nth(themeStatus.$btnThemeList, $index + 1);
     &.theme--#{map.get($item, name)} {
       color: map.get($item, textColor);
       & > .vxe-text-ellipsis--link {
@@ -117,15 +88,3 @@ $btnThemeList: (
   text-decoration: none;
   color: inherit;
 }
-
-.vxe-text-ellipsis {
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}

package/styles/components/upload.scss

@@ -412,9 +412,8 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 1.8em;
-  height: 1.8em;
-  font-size: 0.8em;
+  width: 1.2em;
+  height: 1.2em;
   border-radius: 50%;
   color: #fff;
   background-color: var(--vxe-ui-status-error-color);
@@ -423,6 +422,9 @@
   &:hover {
     background-color: var(--vxe-ui-status-error-lighten-color);
   }
+  i {
+    font-size: 0.6em;
+  }
 }
 
 .vxe-upload--file-message-over-error {

package/styles/theme/base.scss

@@ -323,4 +323,6 @@
   --vxe-ui-scrollbar-y-width: 10px;
   --vxe-ui-scrollbar-x-height: var(--vxe-ui-scrollbar-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/layout-aside.d.ts

@@ -1,5 +1,6 @@
 import { RenderFunction, ComputedRef, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -35,6 +36,7 @@ export namespace VxeLayoutAsidePropTypes {
      */
     animation?: boolean
   }
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'yConfig' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 
 export interface VxeLayoutAsideProps {
@@ -45,6 +47,7 @@ export interface VxeLayoutAsideProps {
   padding?: VxeLayoutAsidePropTypes.Padding
   size?: VxeLayoutAsidePropTypes.Size
   collapseConfig?: VxeLayoutAsidePropTypes.CollapseConfig
+  scrollbarConfig?: VxeLayoutAsidePropTypes.ScrollbarConfig
 }
 export interface LayoutAsidePrivateComputed {
   computeSize: ComputedRef<VxeLayoutAsidePropTypes.Size>

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

@@ -1,6 +1,7 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeBacktopProps, VxeBacktopSlotTypes } from './backtop'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -30,14 +31,15 @@ export namespace VxeLayoutBodyPropTypes {
   export type Padding = boolean
   export type ShowBacktop = boolean
   export interface BacktopConfig extends Omit<VxeBacktopProps, 'target'> {}
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'xConfig' | 'yConfig' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
-
 export interface VxeLayoutBodyProps {
   size?: VxeLayoutBodyPropTypes.Size
   loading?: VxeLayoutBodyPropTypes.Loading
   padding?: VxeLayoutBodyPropTypes.Padding
   showBacktop?: VxeLayoutBodyPropTypes.ShowBacktop
   backtopConfig?: VxeLayoutBodyPropTypes.BacktopConfig
+  scrollbarConfig?: VxeLayoutBodyPropTypes.ScrollbarConfig
 }
 
 export interface LayoutBodyPrivateComputed {

package/types/components/menu.d.ts

@@ -2,6 +2,7 @@ import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSlotType, VxeComponentStyleType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentPermissionCodeType } from '@vxe-ui/core'
 import { VxeLinkPropTypes } from './link'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -85,6 +86,7 @@ export namespace VxeMenuPropTypes {
     }): boolean
   }
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
+  export interface ScrollbarConfig extends VxeScrollbarProps {}
 }
 
 export interface VxeMenuProps {
@@ -106,6 +108,7 @@ export interface VxeMenuProps {
   expandKeys?: VxeMenuPropTypes.ExpandKeys
   options?: VxeMenuPropTypes.Options
   menuConfig?: VxeMenuPropTypes.MenuConfig
+  scrollbarConfig?: VxeMenuPropTypes.ScrollbarConfig
   /**
    * 挂载到指定元素下
    */

package/types/components/scrollbar.d.ts

@@ -24,6 +24,7 @@ export interface ScrollbarPrivateRef {
 export interface VxeScrollbarPrivateRef extends ScrollbarPrivateRef { }
 
 export namespace VxeScrollbarPropTypes {
+  export type Id = number | string
   export type Width = number | string
   export type Height = number | string
   export type MinWidth = number | string
@@ -59,12 +60,18 @@ export namespace VxeScrollbarPropTypes {
     threshold?: string | number
   }
   export type ClassName = string
+  export type ViewAttrs = Record<string, any>
   export type ViewClassName = string
+  export type ViewInnerClassName = string
   export type AutoResize = boolean
   export type SyncResize = boolean
 }
 
 export interface VxeScrollbarProps {
+  /**
+   * ID
+   */
+  id?: VxeScrollbarPropTypes.Id
   /**
    * 容器宽度
    */
@@ -109,10 +116,18 @@ export interface VxeScrollbarProps {
    * 给容器附加 class
    */
   className?: VxeScrollbarPropTypes.ClassName
+  /**
+   * 给视图元素附加属性
+   */
+  viewAttrs?: VxeScrollbarPropTypes.ViewAttrs
   /**
    * 给视图元素附加 class
    */
   viewClassName?: VxeScrollbarPropTypes.ViewClassName
+  /**
+   * 给视图内元素附加 class
+   */
+  viewInnerClassName?: VxeScrollbarPropTypes.ViewInnerClassName
   /**
    * 自动监听元素的变化去重新计算样式
    */