vxe-pc-ui 4.20.8 → 4.20.10

package/lib/layout-aside/src/layout-aside.js

@@ -42,7 +42,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const reactData = (0, _vue.reactive)({});
     const refMaps = {
       refElem
@@ -93,11 +96,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         collapsed,
         loading,
-        padding,
-        useScrollbar
+        padding
       } = props;
       const varStyle = computeVarStyle.value;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const collapseOpts = computeCollapseOpts.value;
       const scrollbarOpts = computeScrollbarOpts.value;
       const {
@@ -116,7 +119,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--loading': loading
         }],
         style: varStyle
-      }, [useScrollbar ? (0, _vue.h)(_scrollbar.default, {
+      }, [isVScrollbar ? (0, _vue.h)(_scrollbar.default, {
         width: scrollbarOpts.width,
         height: scrollbarOpts.height,
         autoHide: scrollbarOpts.autoHide,

package/lib/layout-aside/src/layout-aside.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_dom=require("../../ui/src/dom"),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutAside",props:{width:[String,Number],collapsed:Boolean,collapseWidth:[String,Number],loading:Boolean,padding:Boolean,collapseConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().layoutAside.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutAside.size||(0,_ui.getConfig)().size}},emits:[],setup(v,e){let{slots:g,emit:t}=e;var i=_xeUtils.default.uniqueId();let p=(0,_vue.ref)(),_=(0,_ui.useSize)(v).computeSize;var a=(0,_vue.reactive)({});let l={refElem:p},f=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.collapseConfig,v.collapseConfig)),m=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.scrollbarConfig,v.scrollbarConfig)),b=(0,_vue.computed)(()=>{var{width:e,collapseWidth:i}=v,a={};return i&&(a["--vxe-ui-layout-aside-collapse-width"]=(0,_dom.toCssUnit)(i)),e&&(a["--vxe-ui-layout-aside-default-width"]=(0,_dom.toCssUnit)(e)),a}),u={computeSize:_,computeVarStyle:b},o={xID:i,props:v,context:e,reactData:a,getRefMaps:()=>l,getComputeMaps:()=>u};Object.assign(o,{dispatchEvent:(e,i,a)=>{t(e,(0,_ui.createEvent)(a,{$layoutAside:o},i))}},{});return(0,_vue.provide)("$xeLayoutAside",o),o.renderVN=()=>{var{collapsed:e,loading:i,padding:a,useScrollbar:t}=v,l=b.value,u=_.value,o=f.value,s=m.value,{className:r,viewClassName:d,viewInnerClassName:n}=s;let c=g.default;return(0,_vue.h)("aside",{ref:p,class:["vxe-layout-aside",{["size--"+u]:u,"is--animat":!1!==o.animation,"is--padding":a,"is--collapse":e,"is--loading":i}],style:l},[t?(0,_vue.h)(_scrollbar.default,{width:s.width,height:s.height,autoHide:s.autoHide,visible:s.visible,xConfig:{visible:!1},yConfig:s.yConfig,className:"vxe-layout-aside--scrollbar"+(r?" "+r:""),viewAttrs:s.viewAttrs,viewClassName:"vxe-layout-aside--scrollbar-view"+(d?" "+d:""),viewInnerClassName:"vxe-layout-aside--scrollbar-inner"+(n?" "+n:"")},{default:()=>c?c({}):[]}):(0,_vue.h)("div",{class:"vxe-layout-aside--inner"},c?c({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-aside-view--loading",modelValue:i})])},o},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_dom=require("../../ui/src/dom"),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutAside",props:{width:[String,Number],collapsed:Boolean,collapseWidth:[String,Number],loading:Boolean,padding:Boolean,collapseConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().layoutAside.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutAside.size||(0,_ui.getConfig)().size}},emits:[],setup(v,e){let{slots:g,emit:l}=e;var i=_xeUtils.default.uniqueId();let p=(0,_vue.ref)(),_=_ui.useFns.useSize(v).computeSize,f=_ui.useFns.useVScrollbar(v).computeIsVScrollbar;var a=(0,_vue.reactive)({});let t={refElem:p},m=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.collapseConfig,v.collapseConfig)),b=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.scrollbarConfig,v.scrollbarConfig)),C=(0,_vue.computed)(()=>{var{width:e,collapseWidth:i}=v,a={};return i&&(a["--vxe-ui-layout-aside-collapse-width"]=(0,_dom.toCssUnit)(i)),e&&(a["--vxe-ui-layout-aside-default-width"]=(0,_dom.toCssUnit)(e)),a}),u={computeSize:_,computeVarStyle:C},s={xID:i,props:v,context:e,reactData:a,getRefMaps:()=>t,getComputeMaps:()=>u};Object.assign(s,{dispatchEvent:(e,i,a)=>{l(e,(0,_ui.createEvent)(a,{$layoutAside:s},i))}},{});return(0,_vue.provide)("$xeLayoutAside",s),s.renderVN=()=>{var{collapsed:e,loading:i,padding:a}=v,l=C.value,t=_.value,u=f.value,s=m.value,o=b.value,{className:r,viewClassName:n,viewInnerClassName:d}=o;let c=g.default;return(0,_vue.h)("aside",{ref:p,class:["vxe-layout-aside",{["size--"+t]:t,"is--animat":!1!==s.animation,"is--padding":a,"is--collapse":e,"is--loading":i}],style:l},[u?(0,_vue.h)(_scrollbar.default,{width:o.width,height:o.height,autoHide:o.autoHide,visible:o.visible,xConfig:{visible:!1},yConfig:o.yConfig,className:"vxe-layout-aside--scrollbar"+(r?" "+r:""),viewAttrs:o.viewAttrs,viewClassName:"vxe-layout-aside--scrollbar-view"+(n?" "+n:""),viewInnerClassName:"vxe-layout-aside--scrollbar-inner"+(d?" "+d:"")},{default:()=>c?c({}):[]}):(0,_vue.h)("div",{class:"vxe-layout-aside--inner"},c?c({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-aside-view--loading",modelValue:i})])},s},render(){return this.renderVN()}});

package/lib/layout-body/src/layout-body.js

@@ -50,7 +50,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const internalData = createInternalData();
     const reactData = (0, _vue.reactive)(createReactData());
     const refMaps = {
@@ -115,9 +118,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         loading,
         padding,
-        showBacktop,
-        useScrollbar
+        showBacktop
       } = props;
+      const isVScrollbar = computeIsVScrollbar.value;
       const backtopOpts = computeBacktopOpts.value;
       const scrollbarProps = computeScrollbarProps.value;
       const vSize = computeSize.value;
@@ -142,7 +145,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--loading': loading,
           'is--padding': padding
         }]
-      }, [useScrollbar ? (0, _vue.h)(_scrollbar.default, scrollbarProps, {
+      }, [isVScrollbar ? (0, _vue.h)(_scrollbar.default, scrollbarProps, {
         default: () => defaultSlot ? defaultSlot({}) : []
       }) : (0, _vue.h)('div', {
         id: showBacktop ? backtopId : '',

package/lib/layout-body/src/layout-body.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar")),_backtop=_interopRequireDefault(require("../../backtop"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutBody",props:{loading:Boolean,padding:Boolean,showBacktop:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutBody.showBacktop},backtopConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().layoutBody.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(p,e){let{slots:_,emit:o}=e;var t=_xeUtils.default.uniqueId();let f="vxe_layout_body_backtop_"+t,g=(0,_vue.ref)(),v=(0,_ui.useSize)(p).computeSize;var a=createInternalData(),i=(0,_vue.reactive)(createReactData());let u={refElem:g},b=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,p.backtopConfig,{target:"#"+f})),r=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.scrollbarConfig,p.scrollbarConfig)),y=(0,_vue.computed)(()=>{var e=p.showBacktop,t=r.value,{className:a,viewClassName:o,viewInnerClassName:i}=t;return{width:t.width,height:t.height,autoHide:t.autoHide,visible:t.visible,xConfig:t.xConfig,yConfig:t.yConfig,className:"vxe-layout-body--scrollbar"+(a?" "+a:""),viewAttrs:Object.assign(Object.assign({},t.viewAttrs),{id:e&&f||null}),viewClassName:"vxe-layout-body--scrollbar-view"+(o?" "+o:""),viewInnerClassName:"vxe-layout-body--scrollbar-inner"+(i?" "+i:"")}}),l={computeSize:v},m={xID:t,props:p,context:e,internalData:a,reactData:i,getRefMaps:()=>u,getComputeMaps:()=>l};Object.assign(m,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:m},t))}},{});return m.renderVN=()=>{var{loading:e,padding:t,showBacktop:a,useScrollbar:o}=p,i=b.value,u=y.value,r=v.value;let l=_.default;var n=_.backtop,s=_.backtopTop||_["backtop-top"],c=_.backtopBottom||_["backtop-bottom"],d={};return n&&(d.default=n),s&&(d.top=s),c&&(d.bottom=c),(0,_vue.h)("div",{ref:g,class:["vxe-layout-body",{["size--"+r]:r,"is--loading":e,"is--padding":t}]},[o?(0,_vue.h)(_scrollbar.default,u,{default:()=>l?l({}):[]}):(0,_vue.h)("div",{id:a?f:"",class:"vxe-layout-body--inner"},l?l({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-body-view--loading",modelValue:e}),a?(0,_vue.h)(_backtop.default,i,d):(0,_ui.renderEmptyElement)(m)])},m},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar")),_backtop=_interopRequireDefault(require("../../backtop"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutBody",props:{loading:Boolean,padding:Boolean,showBacktop:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutBody.showBacktop},backtopConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().layoutBody.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(p,e){let{slots:_,emit:o}=e;var t=_xeUtils.default.uniqueId();let v="vxe_layout_body_backtop_"+t,f=(0,_vue.ref)(),g=_ui.useFns.useSize(p).computeSize,b=_ui.useFns.useVScrollbar(p).computeIsVScrollbar;var a=createInternalData(),i=(0,_vue.reactive)(createReactData());let u={refElem:f},y=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,p.backtopConfig,{target:"#"+v})),r=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.scrollbarConfig,p.scrollbarConfig)),m=(0,_vue.computed)(()=>{var e=p.showBacktop,t=r.value,{className:a,viewClassName:o,viewInnerClassName:i}=t;return{width:t.width,height:t.height,autoHide:t.autoHide,visible:t.visible,xConfig:t.xConfig,yConfig:t.yConfig,className:"vxe-layout-body--scrollbar"+(a?" "+a:""),viewAttrs:Object.assign(Object.assign({},t.viewAttrs),{id:e&&v||null}),viewClassName:"vxe-layout-body--scrollbar-view"+(o?" "+o:""),viewInnerClassName:"vxe-layout-body--scrollbar-inner"+(i?" "+i:"")}}),l={computeSize:g},C={xID:t,props:p,context:e,internalData:a,reactData:i,getRefMaps:()=>u,getComputeMaps:()=>l};Object.assign(C,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:C},t))}},{});return C.renderVN=()=>{var{loading:e,padding:t,showBacktop:a}=p,o=b.value,i=y.value,u=m.value,r=g.value;let l=_.default;var n=_.backtop,s=_.backtopTop||_["backtop-top"],c=_.backtopBottom||_["backtop-bottom"],d={};return n&&(d.default=n),s&&(d.top=s),c&&(d.bottom=c),(0,_vue.h)("div",{ref:f,class:["vxe-layout-body",{["size--"+r]:r,"is--loading":e,"is--padding":t}]},[o?(0,_vue.h)(_scrollbar.default,u,{default:()=>l?l({}):[]}):(0,_vue.h)("div",{id:a?v:"",class:"vxe-layout-body--inner"},l?l({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-body-view--loading",modelValue:e}),a?(0,_vue.h)(_backtop.default,i,d):(0,_ui.renderEmptyElement)(C)])},C},render(){return this.renderVN()}});

package/lib/layout-container/src/layout-container.js

@@ -9,13 +9,25 @@ var _comp = require("../../ui/src/comp");
 var _ui = require("../../ui");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getConfig,
+  baseUtils,
+  createEvent
+} = _ui.VxeUI;
+const {
+  getDefVal
+} = baseUtils;
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeLayoutContainer',
   props: {
     vertical: Boolean,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefVal(getConfig().layoutContainer.useScrollbar, getConfig().useScrollbar)
+    },
     size: {
       type: String,
-      default: () => (0, _ui.getConfig)().layoutContainer.size || (0, _ui.getConfig)().size
+      default: () => getConfig().layoutContainer.size || getConfig().size
     }
   },
   emits: [],
@@ -28,13 +40,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const reactData = (0, _vue.reactive)({});
     const refMaps = {
       refElem
     };
     const computeMaps = {
-      computeSize
+      computeSize,
+      computeIsVScrollbar
     };
     const $xeLayoutContainer = {
       xID,
@@ -45,7 +61,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       getComputeMaps: () => computeMaps
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, _ui.createEvent)(evnt, {
+      emit(type, createEvent(evnt, {
         $layoutContainer: $xeLayoutContainer
       }, params));
     };

package/lib/layout-container/src/layout-container.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutContainer",props:{vertical:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().layoutContainer.size||(0,_ui.getConfig)().size}},emits:[],setup(i,e){let{slots:u,emit:a}=e;var t=_xeUtils.default.uniqueId();let o=(0,_vue.ref)(),n=(0,_ui.useSize)(i).computeSize;var r=(0,_vue.reactive)({});let l={refElem:o},s={computeSize:n},p={xID:t,props:i,context:e,reactData:r,getRefMaps:()=>l,getComputeMaps:()=>s};Object.assign(p,{dispatchEvent:(e,t,r)=>{a(e,(0,_ui.createEvent)(r,{$layoutContainer:p},t))}},{});return p.renderVN=()=>{var e=i.vertical,t=n.value,r=u.default;return(0,_vue.h)("div",{ref:o,class:["vxe-layout-container",{["size--"+t]:t,"is--vertical":e}]},r?r({}):[])},p},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,baseUtils,createEvent}=_ui.VxeUI,getDefVal=baseUtils.getDefVal;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutContainer",props:{vertical:Boolean,useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().layoutContainer.useScrollbar,getConfig().useScrollbar)},size:{type:String,default:()=>getConfig().layoutContainer.size||getConfig().size}},emits:[],setup(u,e){let{slots:a,emit:i}=e;var t=_xeUtils.default.uniqueId();let l=(0,_vue.ref)(),o=_ui.useFns.useSize(u).computeSize;var r=_ui.useFns.useVScrollbar(u).computeIsVScrollbar,s=(0,_vue.reactive)({});let n={refElem:l},c={computeSize:o,computeIsVScrollbar:r},f={xID:t,props:u,context:e,reactData:s,getRefMaps:()=>n,getComputeMaps:()=>c};Object.assign(f,{dispatchEvent:(e,t,r)=>{i(e,createEvent(r,{$layoutContainer:f},t))}},{});return f.renderVN=()=>{var e=u.vertical,t=o.value,r=a.default;return(0,_vue.h)("div",{ref:l,class:["vxe-layout-container",{["size--"+t]:t,"is--vertical":e}]},r?r({}):[])},f},render(){return this.renderVN()}});

package/lib/list/src/list.js

@@ -21,17 +21,11 @@ const {
   getIcon,
   getI18n,
   domUtils,
-  scrollbarUtils,
+  useFns,
   menus,
   globalEvents,
   globalResize
 } = _ui.VxeUI;
-const {
-  getThumbOffsetSize,
-  getThumbSize,
-  getScrollFromClick,
-  getScrollFromDrag
-} = scrollbarUtils;
 const {
   warnLog,
   errLog
@@ -155,9 +149,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     } = context;
     const xID = _xeUtils.default.uniqueId();
     const browseObj = _xeUtils.default.browse();
-    const {
-      computeSize
-    } = (0, _ui.useSize)(props);
     const reactData = (0, _vue.reactive)(createReactData());
     const internalData = createInternalData();
     const crossListDragRowInfo = (0, _store.getCrossListDragRowInfo)();
@@ -165,13 +156,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refHeaderElem = (0, _vue.ref)();
     const refFooterElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
+    const refVirtualSpaceElem = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
-    const refTrackXElem = (0, _vue.ref)();
-    const refTrackYElem = (0, _vue.ref)();
-    const refThumbXElem = (0, _vue.ref)();
-    const refThumbYElem = (0, _vue.ref)();
     const refDragRowLineElem = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
+    const {
+      computeSize
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const refMaps = {
       refElem
     };
@@ -183,6 +177,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       internalData,
       getRefMaps: () => refMaps
     };
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = useFns.useInitVScrollbar($xeList);
     const computeRowOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().list.rowConfig, props.rowConfig);
     });
@@ -504,7 +513,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         lastScrollLeft,
         lastScrollTop
       } = internalData;
-      updateScrollbar();
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0;
@@ -514,8 +522,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       });
     };
     const updateScrollbar = () => {
-      updateThumbSize();
-      updateThumbOffset();
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        return (0, _vue.nextTick)().then(() => {
+          updateThumbSize();
+          updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     };
     /**
      * 重新计算列表
@@ -534,10 +548,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           parentHeight = parentEl.clientHeight - Math.ceil(_xeUtils.default.toNumber(parentStyle.paddingLeft) + _xeUtils.default.toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
-        updateScrollbar();
         updateHeight();
         if (el.clientWidth && el.clientHeight) {
-          return computeScrollLoad();
+          return computeScrollLoad().then(() => {
+            updateScrollbar();
+          });
         }
       }
       return (0, _vue.nextTick)();
@@ -553,7 +568,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         offsetSize,
         rowHeight
       } = scrollYStore;
-      const scrollBodyElem = evnt.target;
+      const scrollBodyElem = evnt.currentTarget;
       const scrollTop = scrollBodyElem.scrollTop;
       const toVisibleIndex = Math.floor(scrollTop / rowHeight);
       const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
@@ -567,7 +582,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const scrollEvent = evnt => {
-      const scrollBodyElem = evnt.target;
+      const scrollBodyElem = evnt.currentTarget;
       const scrollTop = scrollBodyElem.scrollTop;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -1706,6 +1721,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const listMethods = {
       dispatchEvent,
+      getScrollViewElem() {
+        const viewEl = refVirtualWrapper.value;
+        return viewEl || null;
+      },
       loadData,
       /**
        * 重新加载数据
@@ -2079,181 +2098,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         hideDropTip();
       }
     };
-    const updateThumbSize = () => {
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const trackXEl = refTrackXElem.value;
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      const thumbXElem = refThumbXElem.value;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      const trackYEl = refTrackYElem.value;
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      const thumbYElem = refThumbYElem.value;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    };
-    const updateThumbOffset = () => {
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const {
-        xThumbWidth,
-        yThumbHeight
-      } = reactData;
-      const trackXEl = refTrackXElem.value;
-      const thumbXElem = refThumbXElem.value;
-      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-      }
-      const trackYEl = refTrackYElem.value;
-      const thumbYElem = refThumbYElem.value;
-      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-      }
-    };
-    const clickTrackXEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    };
-    const clickTrackYEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    };
-    const pointerdownThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
+    const bindScrollbarResize = () => {
       const {
-        isThumbDrag,
-        thumbDragOffset
+        scrollObserver
       } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value;
-        if (!viewEl) {
-          return;
-        }
-        const {
-          xThumbWidth
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    };
-    const cleatPointerThumbEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    };
-    const pointerdownThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      const {
-        isThumbDrag,
-        thumbDragOffset
-      } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value;
-        if (!viewEl) {
-          return;
+      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 {
-          yThumbHeight
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     };
     Object.assign($xeList, listMethods, listPrivateMethods);
@@ -2488,8 +2352,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         showCheckbox,
         className,
-        loading,
-        useScrollbar
+        loading
       } = props;
       const {
         bodyHeight,
@@ -2504,6 +2367,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       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;
@@ -2538,14 +2402,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return (0, _vue.h)('div', Object.assign({
         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'}` : '', className ? _xeUtils.default.isFunction(className) ? className({
+        class: ['vxe-list', 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.default.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,
@@ -2578,6 +2442,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: virtualStyles,
         onScroll: scrollEvent
       }, [(0, _vue.h)('div', {
+        ref: refVirtualSpaceElem,
         class: 'vxe-list--y-space',
         style: {
           height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2607,7 +2472,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       /**
        * 滚动条
        */
-      useScrollbar ? (0, _vue.h)('div', {
+      isVScrollbar ? (0, _vue.h)('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? (0, _ui.renderEmptyElement)($xeList) : (0, _vue.h)('div', {
         ref: refTrackXElem,
@@ -2656,43 +2521,54 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(dataFlag, () => {
       loadData(props.data || []);
     });
-    const reFlag = (0, _vue.ref)(0);
+    const reScrollFlag = (0, _vue.ref)(0);
+    const reLayoutFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.height, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(() => props.maxHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(() => props.syncResize, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
-    (0, _vue.watch)(() => props.useScrollbar, () => {
-      reFlag.value++;
+    (0, _vue.watch)(computeIsVScrollbar, () => {
+      (0, _vue.nextTick)(() => {
+        bindScrollbarResize();
+        (0, _vue.nextTick)(() => {
+          reLayoutFlag.value++;
+        });
+      });
     });
     (0, _vue.watch)(computeRowHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(computeScrollYWidth, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(computeScrollXHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(computeScrollXVisible, () => {
       (0, _vue.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0, _vue.watch)(computeScrollYVisible, () => {
       (0, _vue.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
-    (0, _vue.watch)(reFlag, () => {
+    (0, _vue.watch)(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate();
       });
     });
+    (0, _vue.watch)(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar();
+      });
+    });
     (0, _vue.watch)(() => props.checkRowKey, () => {
       updateRadioModeValue();
     });
@@ -2719,8 +2595,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         showSeq,
         showRadio,
         showCheckbox,
-        autoResize,
-        useScrollbar
+        autoResize
       } = props;
       const rowOpts = computeRowOpts.value;
       const {
@@ -2745,25 +2620,12 @@ var _default = exports.default = (0, _comp.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) {
@@ -2774,9 +2636,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         internalData.resizeObserver = resizeObserver;
       }
-      reFlag.value++;
+      reLayoutFlag.value++;
+      bindScrollbarResize();
       globalEvents.on($xeList, 'resize', () => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0, _vue.onBeforeUnmount)(() => {