vxe-pc-ui 3.20.1 → 3.20.5

package/lib/tabs/src/tabs.js

@@ -74,7 +74,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().tabs.useScrollbar;
+        return (0, _utils.getDefaultConfig)((0, _ui.getConfig)().tabs.useScrollbar, (0, _ui.getConfig)().useScrollbar);
       }
     },
     scrollbarConfig: Object,

package/lib/tabs/src/tabs.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0===i)return("string"===t?String:Number)(e);i=i.call(e,t||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _createComponentLog=(0,_log.createComponentLog)("tabs"),warnLog=_createComponentLog.warnLog,errLog=_createComponentLog.errLog,scrollbarOffsetSize=20,_default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",mixins:[_ui.globalMixins.sizeMixin],props:{value:[String,Number,Boolean],options:Array,width:[String,Number],height:[String,Number],destroyOnClose:{type:Boolean,default:function(){return(0,_ui.getConfig)().tabs.destroyOnClose}},titleWidth:[String,Number],titleAlign:[String,Number],type:{type:String,default:function(){return(0,_ui.getConfig)().tabs.type}},position:{type:String,default:function(){return(0,_ui.getConfig)().tabs.position}},showClose:Boolean,showBody:{type:Boolean,default:!0},padding:{type:Boolean,default:function(){return(0,_ui.getConfig)().tabs.padding}},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,size:{type:String,default:function(){return(0,_ui.getConfig)().tabs.size||(0,_ui.getConfig)().size}},useScrollbar:{type:Boolean,default:function(){return(0,_ui.getConfig)().tabs.useScrollbar}},scrollbarConfig:Object,beforeCloseMethod:Function},inject:{$xeParentTabs:{from:"$xeTabs",default:null}},provide:function(){return{$xeTabs:this}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintTop:0,lintWidth:0,lintHeight:0,scrollbarWidth:0,scrollbarHeight:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}},internalData:{slTimeout:void 0}}},computed:Object.assign(Object.assign({},{}),{computeParentTabsResizeFlag:function(){var e=this.$xeParentTabs;return e?e.reactData.resizeFlag:null},computeTabType:function(){return this.type||"default"},computeTabPosition:function(){return this.position||"top"},computeLrPosition:function(){var e=this.computeTabPosition;return"left"===e||"right"===e},computeLineStyle:function(){var e=this.reactData,t=e.lintLeft,i=e.lintWidth,a=e.lintHeight;return this.computeLrPosition?{top:"".concat(e.lintTop,"px"),height:"".concat(a,"px")}:{left:"".concat(t,"px"),width:"".concat(i,"px")}},computeWrapperStyle:function(){var e=this.width,t=this.height,i={};return e&&(i.width=(0,_dom.toCssUnit)(e)),t&&(i.height="auto"===t?"100%":(0,_dom.toCssUnit)(t)),i},computeCloseOpts:function(){return Object.assign({},(0,_ui.getConfig)().tabs.closeConfig,this.closeConfig)},computeRefreshOpts:function(){return Object.assign({},(0,_ui.getConfig)().tabs.refreshConfig,this.refreshConfig)},computeTabOptions:function(){var t=this;return(t.options||[]).filter(function(e){return t.handleFilterTab(e)})},computeTabStaticOptions:function(){var t=this;return t.reactData.staticTabs.filter(function(e){return t.handleFilterTab(e)})},computeScrollbarOpts:function(){return Object.assign({},(0,_ui.getConfig)().tabs.scrollbarConfig,this.scrollbarConfig)},computeScrollbarProps:function(){var e=this.computeScrollbarOpts,t=e.viewClassName;return{width:e.width,height:e.height,autoHide:e.autoHide,visible:e.visible,xConfig:e.xConfig,yConfig:e.yConfig,className:e.className,viewAttrs:e.viewAttrs,viewClassName:"vxe-tabs-pane--scrollbar-item-view"+(t?" "+t:""),viewInnerClassName:"vxe-tabs-pane--scrollbar-item-inner"+(t?" "+e.viewInnerClassName:"")}}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$tabs:this},t))},emitModel:function(e){var t=this._events;this.$emit("input",e),t&&t.modelValue?this.$emit("modelValue",e):this.$emit("model-value",e)},prev:function(){return this.handlePrevNext(!1)},next:function(){return this.handlePrevNext(!0)},prevTab:function(){return warnLog("vxe.error.delFunc",["prevTab","prev"]),this.prev()},nextTab:function(){return warnLog("vxe.error.delFunc",["nextTab","next"]),this.next()},handleFilterTab:function(e){e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},callSlot:function(e,t,i){var a=this.$scopedSlots;return e&&(_xeUtils.default.isString(e)&&(e=a[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e.call(this,t,i)):[]},checkScrolling:function(){var e,t,i,a,n,o=this.computeLrPosition,r=this.$refs.refHeadWrapperElem,s=this.$refs.refHeadPrevElem,l=this.$refs.refHeadNextElem;r&&(e=r.scrollLeft,t=r.scrollTop,i=r.clientWidth,a=r.clientHeight,n=r.scrollWidth,r=r.scrollHeight,s&&(0<(o?t:e)?(0,_dom.addClass):(0,_dom.removeClass))(s,"scrolling--middle"),l)&&((o?a<r-Math.ceil(t):i<n-Math.ceil(e))?(0,_dom.addClass):(0,_dom.removeClass))(l,"scrolling--middle")},updateTabStyle:function(){function e(){var e,t,i,a,n=g.activeName,o=v.computeTabType,r=v.computeTabOptions,s=v.computeTabStaticOptions,l=v.$refs.refHeadWrapperElem,c=v.computeLrPosition,u=0,f=0,d=0,p=0,m=0,h=0,b=!1;l&&(s=_xeUtils.default.findIndexOf(s.length?s:r,function(e){return e.name===n}),r=l.children,t=l.offsetWidth,e=l.scrollWidth,i=l.offsetHeight,a=l.scrollHeight,m=t-(t=l.clientWidth),h=i-(i=l.clientHeight),c?(b=a!==i,-1<s&&(l=r[s])&&(c=l.clientHeight,a=l.clientWidth,p="card"===o?(u=a,f=c,l.offsetTop):"border-card"===o?(u=a,f=c,l.offsetTop-1):(f=Math.max(4,Math.floor(.6*c)),l.offsetTop+Math.floor((c-f)/2)))):(b=e!==t,-1<s&&(i=r[s])&&(a=i.clientWidth,d="card"===o?(u=a+1,i.offsetLeft):"border-card"===o?(u=a,i.offsetLeft-1):(u=Math.max(4,Math.floor(.6*a)),i.offsetLeft+Math.floor((a-u)/2))))),g.scrollbarWidth=m,g.scrollbarHeight=h,g.lintLeft=d,g.lintTop=p,g.lintWidth=u,g.lintHeight=f,g.isTabOver=b,v.checkScrolling()}var v=this,g=v.reactData;e(),v.$nextTick(e)},addInitName:function(e,t){var i=this.reactData.initNames;return!(!e||i.includes(e)||(this.dispatchEvent("tab-load",{name:e},t),i.push(e),0))},initDefaultName:function(e){var i,a=this,t=a.reactData,n=null,o={};e&&e.length&&(i=!1,n=a.value,e.forEach(function(e){var e=e||{},t=e.name,e=e.preload;t&&(o["".concat(t)]={loading:!1},n===t&&(i=!0),e)&&a.addInitName(t,null)}),i||(n=e[0].name,a.addInitName(n,null),a.emitModel(n))),t.activeName=n,t.cacheTabMaps=o},clickEvent:function(t,i){var a=this,n=a.reactData,e=a.trigger,o=a.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod,r=n.activeName,s=i.name,l=s;a.dispatchEvent("tab-click",{name:s},t),"manual"!==e&&s!==r&&Promise.resolve(!o||o({$tabs:a,name:s,oldName:r,newName:s,option:i})).then(function(e){e?(n.activeName=s,a.emitModel(l),a.addInitName(s,t),a.dispatchEvent("change",{value:l,name:s,oldName:r,newName:s,option:i},t),a.dispatchEvent("tab-change",{value:l,name:s,oldName:r,newName:s,option:i},t)):a.dispatchEvent("tab-change-fail",{value:l,name:s,oldName:r,newName:s,option:i},t)}).catch(function(){a.dispatchEvent("tab-change-fail",{value:l,name:s,oldName:r,newName:s,option:i},t)})},handleRefreshTabEvent:function(e,t){var i=this.reactData,e=(e.stopPropagation(),i.activeName),i=i.cacheTabMaps,a=t.name,n=this.computeRefreshOpts.queryMethod,o=a?i["".concat(a)]:null;o&&!o.loading&&(n?(o.loading=!0,Promise.resolve(n({$tabs:this,value:e,name:a,option:t})).finally(function(){o.loading=!1})):errLog("vxe.error.notFunc",["refresh-config.queryMethod"]))},handleCloseTabEvent:function(t,e,i,a){var n=this,o=n,r=n.reactData,r=(t.stopPropagation(),r.activeName),o=n.computeCloseOpts.beforeMethod||o.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod,s=e.name,l=r,c=l;r===s&&(r=i<a.length-1?a[i+1]:a[i-1],c=r?r.name:null),Promise.resolve(!o||o({$tabs:n,value:l,name:s,nextName:c,option:e})).then(function(e){e?n.dispatchEvent("tab-close",{value:l,name:s,nextName:c},t):n.dispatchEvent("tab-close-fail",{value:l,name:s,nextName:c},t)}).catch(function(){n.dispatchEvent("tab-close-fail",{value:l,name:s,nextName:c},t)})},startScrollAnimation:function(s,e){var l=this,c=l.internalData,t=c.slTimeout,u=l.computeLrPosition,f=u?0:e,d=u?e:0,p=6,m=35,h=(t&&(clearTimeout(t),c.slTimeout=void 0),function(){var e,t,i,a,n,o,r=l.$refs.refHeadWrapperElem;0<p&&(p--,r)&&(e=r.clientWidth,t=r.clientHeight,i=r.scrollWidth,a=r.scrollHeight,n=r.scrollLeft,o=r.scrollTop,u?(d=Math.floor(d/2),0<s?t+o<a&&(r.scrollTop+=d,m-=4,c.slTimeout=setTimeout(h,m)):0<o&&(r.scrollTop-=d,m-=4,c.slTimeout=setTimeout(h,m))):(f=Math.floor(f/2),0<s?e+n<i&&(r.scrollLeft+=f,m-=4,c.slTimeout=setTimeout(h,m)):0<n&&(r.scrollLeft-=f,m-=4,c.slTimeout=setTimeout(h,m))),l.updateTabStyle())});h()},handleScrollToLeft:function(e){var t,i=this.computeLrPosition,a=this.$refs.refHeadWrapperElem;a&&(t=a.clientWidth,a=a.clientHeight,i=Math.floor(.75*(i?a:t)),this.startScrollAnimation(e,i))},scrollLeftEvent:function(){this.handleScrollToLeft(-1)},scrollRightEvent:function(){this.handleScrollToLeft(1)},scrollToTab:function(s){var l=this,c=l.computeTabOptions,u=l.computeTabStaticOptions,f=l.computeLrPosition;return l.$nextTick().then(function(){var e,t,i,a,n,o,r=l.$refs.refHeadWrapperElem;r&&(-1<(i=_xeUtils.default.findIndexOf(u.length?u:c,function(e){return e.name===s}))&&(e=r.scrollLeft,o=r.scrollTop,t=r.clientWidth,n=r.clientHeight,i=r.children[i])&&(f?(0<(n=(a=i.offsetTop)+i.clientHeight-(o+n))&&(r.scrollTop+=n),a<o&&(r.scrollTop=a)):(0<(o=(n=i.offsetLeft)+i.clientWidth-(e+t))&&(r.scrollLeft+=o),n<e&&(r.scrollLeft=n))),l.updateTabStyle())})},handlePrevNext:function(e){var t,i=this,a=i.reactData,n=a.activeName,o=i.computeTabStaticOptions,o=o.length?o:i.computeTabOptions,r=_xeUtils.default.findIndexOf(o,function(e){return e.name===n});return-1<r&&(t=null,e?r<o.length-1&&(t=o[r+1]):0<r&&(t=o[r-1]),t)&&(e=t.name,a.activeName=e,i.emitModel(e),i.addInitName(e,null)),i.$nextTick()},renderTabHeader:function(p,m){var h=this,e=h.$scopedSlots,t=h.reactData,b=h.titleWidth,v=h.titleAlign,g=h.showClose,T=h.closeConfig,_=h.refreshConfig,y=t.activeName,i=t.scrollbarWidth,a=t.scrollbarHeight,n=t.isTabOver,x=t.cacheTabMaps,S=h.computeTabType,E=h.computeTabPosition,t=h.computeLrPosition,o=h.computeLineStyle,r=e.tabPrefix||e["tab-prefix"]||e.prefix,e=e.tabSuffix||e["tab-suffix"]||e.suffix||e.extra,N=h.computeCloseOpts,C=N.visibleMethod,O=h.computeRefreshOpts,P=O.visibleMethod;return p("div",{key:"th",class:["vxe-tabs-header","type--".concat(S),"pos--".concat(E)]},[r?p("div",{class:["vxe-tabs-header--prefix","type--".concat(S),"pos--".concat(E)]},h.callSlot(r,{name:y},p)):(0,_ui.renderEmptyElement)(h),n?p("div",{ref:"refHeadPrevElem",class:["vxe-tabs-header--bar vxe-tabs-header--prev-bar","type--".concat(S),"pos--".concat(E)],on:{click:h.scrollLeftEvent}},[p("span",{class:t?(0,_ui.getIcon)().TABS_TAB_BUTTON_TOP:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_ui.renderEmptyElement)(h),p("div",{class:["vxe-tabs-header--wrapper","type--".concat(S),"pos--".concat(E)]},[p("div",{ref:"refHeadWrapperElem",class:"vxe-tabs-header--item-wrapper",style:t?{marginRight:"-".concat(i+scrollbarOffsetSize,"px"),paddingRight:"".concat(scrollbarOffsetSize,"px")}:{marginBottom:"-".concat(a+scrollbarOffsetSize,"px"),paddingBottom:"".concat(scrollbarOffsetSize,"px")},on:{scroll:h.checkScrolling}},m.map(function(t,i){var e=t.title,a=t.icon,n=t.name,o=t.slots||{},r=o.title||o.tab,s=o.titlePrefix||o["title-prefix"],o=o.titleSuffix||o["title-suffix"],l=t.titleWidth||b,c=t.titleAlign||v,u={$tabs:h,value:y,name:n,option:t},f=y===n,d=n?x["".concat(n)]:null,d=!!d&&d.loading;return p("div",{key:"".concat(n),class:["vxe-tabs-header--item","type--".concat(S),"pos--".concat(E),c?"align--".concat(c):"",{"is--active":f}],style:l?{width:(0,_dom.toCssUnit)(l)}:void 0,on:{click:function(e){h.clickEvent(e,t)}}},[p("div",{class:"vxe-tabs-header--item-inner"},[p("div",{class:"vxe-tabs-header--item-content"},[a?p("span",{class:"vxe-tabs-header--item-icon"},[p("i",{class:a})]):(0,_ui.renderEmptyElement)(h),s?p("span",{class:"vxe-tabs-header--item-prefix"},h.callSlot(s,{name:n,title:e},p)):(0,_ui.renderEmptyElement)(h),p("span",{class:"vxe-tabs-header--item-name"},r?h.callSlot(r,{name:n,title:e},p):"".concat(e)),o?p("span",{class:"vxe-tabs-header--item-suffix"},h.callSlot(o,{name:n,title:e},p)):(0,_ui.renderEmptyElement)(h)]),!(0,_utils.isEnableConf)(_)&&!O.enabled||P&&!P(u)?(0,_ui.renderEmptyElement)(h):p("div",{class:["vxe-tabs-header--refresh-btn",{"is--active":f,"is--loading":d,"is--disabled":d}],on:{click:function(e){h.handleRefreshTabEvent(e,t)}}},[p("i",{class:d?(0,_ui.getIcon)().TABS_TAB_REFRESH_LOADING:(0,_ui.getIcon)().TABS_TAB_REFRESH})]),!(g||(0,_utils.isEnableConf)(T)||N.enabled)||C&&!C(u)?(0,_ui.renderEmptyElement)(h):p("div",{class:["vxe-tabs-header--close-btn",{"is--active":f}],on:{click:function(e){h.handleCloseTabEvent(e,t,i,m)}}},[p("i",{class:(0,_ui.getIcon)().TABS_TAB_CLOSE})])])])}).concat([p("span",{key:"line",class:["vxe-tabs-header--active-line","type--".concat(S),"pos--".concat(E)],style:o})]))]),n?p("div",{ref:"refHeadNextElem",class:["vxe-tabs-header--bar vxe-tabs-header--next-bar","type--".concat(S),"pos--".concat(E)],on:{click:h.scrollRightEvent}},[p("span",{class:t?(0,_ui.getIcon)().TABS_TAB_BUTTON_BOTTOM:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_ui.renderEmptyElement)(h),e?p("div",{class:["vxe-tabs-header--suffix","type--".concat(S),"pos--".concat(E)]},h.callSlot(e,{name:y},p)):(0,_ui.renderEmptyElement)(h)])},renderTabPane:function(e,t){var i=this,a=i.reactData,n=i.useScrollbar,o=a.initNames,a=a.activeName,r=t.name,t=t.slots,s=t?t.default:null,t=i.computeScrollbarProps;return r&&o.includes(r)?n?e(_scrollbar.default,{key:"".concat(r),class:["vxe-tabs-pane--scrollbar-item",{"is--visible":a===r}],props:t,scopedSlots:{default:function(){return s?i.callSlot(s,{name:r},e):[]}}}):e("div",{key:"".concat(r),class:["vxe-tabs-pane--item",{"is--visible":a===r}]},s?i.callSlot(s,{name:r},e):[]):(0,_ui.renderEmptyElement)(i)},renderTabContent:function(t,e){var i=this,a=i.reactData,n=i.destroyOnClose,o=a.activeName;return n?[(a=e.find(function(e){return e.name===o}))?i.renderTabPane(t,a):(0,_ui.renderEmptyElement)(i)]:e.map(function(e){return i.renderTabPane(t,e)})},rendetTabBody:function(e,t){var i=this,a=i.$scopedSlots,n=i.reactData,o=i.height,r=i.padding,s=i.showBody,l=n.activeName,c=i.computeSize,u=i.computeTabType,f=i.computeTabPosition,d=i.computeRefreshOpts.showLoading,p=a.header,a=a.footer;return s?(n=!!(n=l?n.cacheTabMaps["".concat(l)]:null)&&n.loading,l={name:l},e("div",{key:"tb",class:["vxe-tabs-pane--wrapper","type--".concat(u),"pos--".concat(f),{"is--content":s}]},[p?e("div",{class:"vxe-tabs-pane--header"},i.callSlot(p,l,e)):(0,_ui.renderEmptyElement)(i),e("div",{class:["vxe-tabs-pane--body","type--".concat(u),"pos--".concat(f),_defineProperty(_defineProperty(_defineProperty({},"size--".concat(c),c),"is--padding",r),"is--height",o)]},i.renderTabContent(e,t)),a?e("div",{class:"vxe-tabs-pane--footer"},i.callSlot(a,l,e)):(0,_ui.renderEmptyElement)(i),d&&n?(0,_ui.renderEmptyElement)(i):e(_loading.default,{class:"vxe-tabs--loading",props:{value:n}})])):(0,_ui.renderEmptyElement)(i)},renderVN:function(e){var t=this,i=t.$scopedSlots,a=t.height,n=t.padding,o=t.trigger,r=t.reactData.activeName,s=t.computeSize,l=t.computeTabType,c=t.computeTabPosition,u=t.computeWrapperStyle,i=i.default,f=i?t.computeTabStaticOptions:t.computeTabOptions,i=[e("div",{key:"ts",class:"vxe-tabs-slots"},i?i({name:r}):[])];return"right"===c||"bottom"===c?i.push(t.rendetTabBody(e,f),t.renderTabHeader(e,f)):i.push(t.renderTabHeader(e,f),t.rendetTabBody(e,f)),e("div",{ref:"refElem",class:["vxe-tabs","pos--".concat(c),"vxe-tabs--".concat(l),"trigger--".concat("manual"===o?"trigger":"default"),_defineProperty(_defineProperty(_defineProperty({},"size--".concat(s),s),"is--padding",n),"is--height",a)],style:u},i)}},watch:{position:function(){this.reactData.resizeFlag++},value:function(e){var t=this.reactData;this.addInitName(e,null),t.activeName=e},"reactData.activeName":function(e){this.scrollToTab(e)},options:function(){var e=this.reactData;this.initDefaultName(this.options),e.resizeFlag++},"reactData.staticTabs":function(){var e=this.reactData;this.initDefaultName(e.staticTabs),e.resizeFlag++},computeParentTabsResizeFlag:function(){var e=this;e.$nextTick(function(){e.updateTabStyle()})}},created:function(){var e=this.reactData;this.addInitName(this.value,null),this.initDefaultName(e.staticTabs.length?e.staticTabs:this.options)},mounted:function(){this.updateTabStyle(),_ui.globalEvents.on(this,"resize",this.updateTabStyle)},beforeDestroy:function(){_ui.globalEvents.off(this,"resize")},render:function(e){return this.renderVN(e)}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0===i)return("string"===t?String:Number)(e);i=i.call(e,t||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _createComponentLog=(0,_log.createComponentLog)("tabs"),warnLog=_createComponentLog.warnLog,errLog=_createComponentLog.errLog,scrollbarOffsetSize=20,_default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",mixins:[_ui.globalMixins.sizeMixin],props:{value:[String,Number,Boolean],options:Array,width:[String,Number],height:[String,Number],destroyOnClose:{type:Boolean,default:function(){return(0,_ui.getConfig)().tabs.destroyOnClose}},titleWidth:[String,Number],titleAlign:[String,Number],type:{type:String,default:function(){return(0,_ui.getConfig)().tabs.type}},position:{type:String,default:function(){return(0,_ui.getConfig)().tabs.position}},showClose:Boolean,showBody:{type:Boolean,default:!0},padding:{type:Boolean,default:function(){return(0,_ui.getConfig)().tabs.padding}},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,size:{type:String,default:function(){return(0,_ui.getConfig)().tabs.size||(0,_ui.getConfig)().size}},useScrollbar:{type:Boolean,default:function(){return(0,_utils.getDefaultConfig)((0,_ui.getConfig)().tabs.useScrollbar,(0,_ui.getConfig)().useScrollbar)}},scrollbarConfig:Object,beforeCloseMethod:Function},inject:{$xeParentTabs:{from:"$xeTabs",default:null}},provide:function(){return{$xeTabs:this}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintTop:0,lintWidth:0,lintHeight:0,scrollbarWidth:0,scrollbarHeight:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}},internalData:{slTimeout:void 0}}},computed:Object.assign(Object.assign({},{}),{computeParentTabsResizeFlag:function(){var e=this.$xeParentTabs;return e?e.reactData.resizeFlag:null},computeTabType:function(){return this.type||"default"},computeTabPosition:function(){return this.position||"top"},computeLrPosition:function(){var e=this.computeTabPosition;return"left"===e||"right"===e},computeLineStyle:function(){var e=this.reactData,t=e.lintLeft,i=e.lintWidth,a=e.lintHeight;return this.computeLrPosition?{top:"".concat(e.lintTop,"px"),height:"".concat(a,"px")}:{left:"".concat(t,"px"),width:"".concat(i,"px")}},computeWrapperStyle:function(){var e=this.width,t=this.height,i={};return e&&(i.width=(0,_dom.toCssUnit)(e)),t&&(i.height="auto"===t?"100%":(0,_dom.toCssUnit)(t)),i},computeCloseOpts:function(){return Object.assign({},(0,_ui.getConfig)().tabs.closeConfig,this.closeConfig)},computeRefreshOpts:function(){return Object.assign({},(0,_ui.getConfig)().tabs.refreshConfig,this.refreshConfig)},computeTabOptions:function(){var t=this;return(t.options||[]).filter(function(e){return t.handleFilterTab(e)})},computeTabStaticOptions:function(){var t=this;return t.reactData.staticTabs.filter(function(e){return t.handleFilterTab(e)})},computeScrollbarOpts:function(){return Object.assign({},(0,_ui.getConfig)().tabs.scrollbarConfig,this.scrollbarConfig)},computeScrollbarProps:function(){var e=this.computeScrollbarOpts,t=e.viewClassName;return{width:e.width,height:e.height,autoHide:e.autoHide,visible:e.visible,xConfig:e.xConfig,yConfig:e.yConfig,className:e.className,viewAttrs:e.viewAttrs,viewClassName:"vxe-tabs-pane--scrollbar-item-view"+(t?" "+t:""),viewInnerClassName:"vxe-tabs-pane--scrollbar-item-inner"+(t?" "+e.viewInnerClassName:"")}}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$tabs:this},t))},emitModel:function(e){var t=this._events;this.$emit("input",e),t&&t.modelValue?this.$emit("modelValue",e):this.$emit("model-value",e)},prev:function(){return this.handlePrevNext(!1)},next:function(){return this.handlePrevNext(!0)},prevTab:function(){return warnLog("vxe.error.delFunc",["prevTab","prev"]),this.prev()},nextTab:function(){return warnLog("vxe.error.delFunc",["nextTab","next"]),this.next()},handleFilterTab:function(e){e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},callSlot:function(e,t,i){var a=this.$scopedSlots;return e&&(_xeUtils.default.isString(e)&&(e=a[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e.call(this,t,i)):[]},checkScrolling:function(){var e,t,i,a,n,o=this.computeLrPosition,r=this.$refs.refHeadWrapperElem,s=this.$refs.refHeadPrevElem,l=this.$refs.refHeadNextElem;r&&(e=r.scrollLeft,t=r.scrollTop,i=r.clientWidth,a=r.clientHeight,n=r.scrollWidth,r=r.scrollHeight,s&&(0<(o?t:e)?(0,_dom.addClass):(0,_dom.removeClass))(s,"scrolling--middle"),l)&&((o?a<r-Math.ceil(t):i<n-Math.ceil(e))?(0,_dom.addClass):(0,_dom.removeClass))(l,"scrolling--middle")},updateTabStyle:function(){function e(){var e,t,i,a,n=g.activeName,o=v.computeTabType,r=v.computeTabOptions,s=v.computeTabStaticOptions,l=v.$refs.refHeadWrapperElem,c=v.computeLrPosition,u=0,f=0,d=0,p=0,m=0,h=0,b=!1;l&&(s=_xeUtils.default.findIndexOf(s.length?s:r,function(e){return e.name===n}),r=l.children,t=l.offsetWidth,e=l.scrollWidth,i=l.offsetHeight,a=l.scrollHeight,m=t-(t=l.clientWidth),h=i-(i=l.clientHeight),c?(b=a!==i,-1<s&&(l=r[s])&&(c=l.clientHeight,a=l.clientWidth,p="card"===o?(u=a,f=c,l.offsetTop):"border-card"===o?(u=a,f=c,l.offsetTop-1):(f=Math.max(4,Math.floor(.6*c)),l.offsetTop+Math.floor((c-f)/2)))):(b=e!==t,-1<s&&(i=r[s])&&(a=i.clientWidth,d="card"===o?(u=a+1,i.offsetLeft):"border-card"===o?(u=a,i.offsetLeft-1):(u=Math.max(4,Math.floor(.6*a)),i.offsetLeft+Math.floor((a-u)/2))))),g.scrollbarWidth=m,g.scrollbarHeight=h,g.lintLeft=d,g.lintTop=p,g.lintWidth=u,g.lintHeight=f,g.isTabOver=b,v.checkScrolling()}var v=this,g=v.reactData;e(),v.$nextTick(e)},addInitName:function(e,t){var i=this.reactData.initNames;return!(!e||i.includes(e)||(this.dispatchEvent("tab-load",{name:e},t),i.push(e),0))},initDefaultName:function(e){var i,a=this,t=a.reactData,n=null,o={};e&&e.length&&(i=!1,n=a.value,e.forEach(function(e){var e=e||{},t=e.name,e=e.preload;t&&(o["".concat(t)]={loading:!1},n===t&&(i=!0),e)&&a.addInitName(t,null)}),i||(n=e[0].name,a.addInitName(n,null),a.emitModel(n))),t.activeName=n,t.cacheTabMaps=o},clickEvent:function(t,i){var a=this,n=a.reactData,e=a.trigger,o=a.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod,r=n.activeName,s=i.name,l=s;a.dispatchEvent("tab-click",{name:s},t),"manual"!==e&&s!==r&&Promise.resolve(!o||o({$tabs:a,name:s,oldName:r,newName:s,option:i})).then(function(e){e?(n.activeName=s,a.emitModel(l),a.addInitName(s,t),a.dispatchEvent("change",{value:l,name:s,oldName:r,newName:s,option:i},t),a.dispatchEvent("tab-change",{value:l,name:s,oldName:r,newName:s,option:i},t)):a.dispatchEvent("tab-change-fail",{value:l,name:s,oldName:r,newName:s,option:i},t)}).catch(function(){a.dispatchEvent("tab-change-fail",{value:l,name:s,oldName:r,newName:s,option:i},t)})},handleRefreshTabEvent:function(e,t){var i=this.reactData,e=(e.stopPropagation(),i.activeName),i=i.cacheTabMaps,a=t.name,n=this.computeRefreshOpts.queryMethod,o=a?i["".concat(a)]:null;o&&!o.loading&&(n?(o.loading=!0,Promise.resolve(n({$tabs:this,value:e,name:a,option:t})).finally(function(){o.loading=!1})):errLog("vxe.error.notFunc",["refresh-config.queryMethod"]))},handleCloseTabEvent:function(t,e,i,a){var n=this,o=n,r=n.reactData,r=(t.stopPropagation(),r.activeName),o=n.computeCloseOpts.beforeMethod||o.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod,s=e.name,l=r,c=l;r===s&&(r=i<a.length-1?a[i+1]:a[i-1],c=r?r.name:null),Promise.resolve(!o||o({$tabs:n,value:l,name:s,nextName:c,option:e})).then(function(e){e?n.dispatchEvent("tab-close",{value:l,name:s,nextName:c},t):n.dispatchEvent("tab-close-fail",{value:l,name:s,nextName:c},t)}).catch(function(){n.dispatchEvent("tab-close-fail",{value:l,name:s,nextName:c},t)})},startScrollAnimation:function(s,e){var l=this,c=l.internalData,t=c.slTimeout,u=l.computeLrPosition,f=u?0:e,d=u?e:0,p=6,m=35,h=(t&&(clearTimeout(t),c.slTimeout=void 0),function(){var e,t,i,a,n,o,r=l.$refs.refHeadWrapperElem;0<p&&(p--,r)&&(e=r.clientWidth,t=r.clientHeight,i=r.scrollWidth,a=r.scrollHeight,n=r.scrollLeft,o=r.scrollTop,u?(d=Math.floor(d/2),0<s?t+o<a&&(r.scrollTop+=d,m-=4,c.slTimeout=setTimeout(h,m)):0<o&&(r.scrollTop-=d,m-=4,c.slTimeout=setTimeout(h,m))):(f=Math.floor(f/2),0<s?e+n<i&&(r.scrollLeft+=f,m-=4,c.slTimeout=setTimeout(h,m)):0<n&&(r.scrollLeft-=f,m-=4,c.slTimeout=setTimeout(h,m))),l.updateTabStyle())});h()},handleScrollToLeft:function(e){var t,i=this.computeLrPosition,a=this.$refs.refHeadWrapperElem;a&&(t=a.clientWidth,a=a.clientHeight,i=Math.floor(.75*(i?a:t)),this.startScrollAnimation(e,i))},scrollLeftEvent:function(){this.handleScrollToLeft(-1)},scrollRightEvent:function(){this.handleScrollToLeft(1)},scrollToTab:function(s){var l=this,c=l.computeTabOptions,u=l.computeTabStaticOptions,f=l.computeLrPosition;return l.$nextTick().then(function(){var e,t,i,a,n,o,r=l.$refs.refHeadWrapperElem;r&&(-1<(i=_xeUtils.default.findIndexOf(u.length?u:c,function(e){return e.name===s}))&&(e=r.scrollLeft,o=r.scrollTop,t=r.clientWidth,n=r.clientHeight,i=r.children[i])&&(f?(0<(n=(a=i.offsetTop)+i.clientHeight-(o+n))&&(r.scrollTop+=n),a<o&&(r.scrollTop=a)):(0<(o=(n=i.offsetLeft)+i.clientWidth-(e+t))&&(r.scrollLeft+=o),n<e&&(r.scrollLeft=n))),l.updateTabStyle())})},handlePrevNext:function(e){var t,i=this,a=i.reactData,n=a.activeName,o=i.computeTabStaticOptions,o=o.length?o:i.computeTabOptions,r=_xeUtils.default.findIndexOf(o,function(e){return e.name===n});return-1<r&&(t=null,e?r<o.length-1&&(t=o[r+1]):0<r&&(t=o[r-1]),t)&&(e=t.name,a.activeName=e,i.emitModel(e),i.addInitName(e,null)),i.$nextTick()},renderTabHeader:function(p,m){var h=this,e=h.$scopedSlots,t=h.reactData,b=h.titleWidth,v=h.titleAlign,g=h.showClose,T=h.closeConfig,_=h.refreshConfig,y=t.activeName,i=t.scrollbarWidth,a=t.scrollbarHeight,n=t.isTabOver,x=t.cacheTabMaps,S=h.computeTabType,E=h.computeTabPosition,t=h.computeLrPosition,o=h.computeLineStyle,r=e.tabPrefix||e["tab-prefix"]||e.prefix,e=e.tabSuffix||e["tab-suffix"]||e.suffix||e.extra,N=h.computeCloseOpts,C=N.visibleMethod,O=h.computeRefreshOpts,P=O.visibleMethod;return p("div",{key:"th",class:["vxe-tabs-header","type--".concat(S),"pos--".concat(E)]},[r?p("div",{class:["vxe-tabs-header--prefix","type--".concat(S),"pos--".concat(E)]},h.callSlot(r,{name:y},p)):(0,_ui.renderEmptyElement)(h),n?p("div",{ref:"refHeadPrevElem",class:["vxe-tabs-header--bar vxe-tabs-header--prev-bar","type--".concat(S),"pos--".concat(E)],on:{click:h.scrollLeftEvent}},[p("span",{class:t?(0,_ui.getIcon)().TABS_TAB_BUTTON_TOP:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_ui.renderEmptyElement)(h),p("div",{class:["vxe-tabs-header--wrapper","type--".concat(S),"pos--".concat(E)]},[p("div",{ref:"refHeadWrapperElem",class:"vxe-tabs-header--item-wrapper",style:t?{marginRight:"-".concat(i+scrollbarOffsetSize,"px"),paddingRight:"".concat(scrollbarOffsetSize,"px")}:{marginBottom:"-".concat(a+scrollbarOffsetSize,"px"),paddingBottom:"".concat(scrollbarOffsetSize,"px")},on:{scroll:h.checkScrolling}},m.map(function(t,i){var e=t.title,a=t.icon,n=t.name,o=t.slots||{},r=o.title||o.tab,s=o.titlePrefix||o["title-prefix"],o=o.titleSuffix||o["title-suffix"],l=t.titleWidth||b,c=t.titleAlign||v,u={$tabs:h,value:y,name:n,option:t},f=y===n,d=n?x["".concat(n)]:null,d=!!d&&d.loading;return p("div",{key:"".concat(n),class:["vxe-tabs-header--item","type--".concat(S),"pos--".concat(E),c?"align--".concat(c):"",{"is--active":f}],style:l?{width:(0,_dom.toCssUnit)(l)}:void 0,on:{click:function(e){h.clickEvent(e,t)}}},[p("div",{class:"vxe-tabs-header--item-inner"},[p("div",{class:"vxe-tabs-header--item-content"},[a?p("span",{class:"vxe-tabs-header--item-icon"},[p("i",{class:a})]):(0,_ui.renderEmptyElement)(h),s?p("span",{class:"vxe-tabs-header--item-prefix"},h.callSlot(s,{name:n,title:e},p)):(0,_ui.renderEmptyElement)(h),p("span",{class:"vxe-tabs-header--item-name"},r?h.callSlot(r,{name:n,title:e},p):"".concat(e)),o?p("span",{class:"vxe-tabs-header--item-suffix"},h.callSlot(o,{name:n,title:e},p)):(0,_ui.renderEmptyElement)(h)]),!(0,_utils.isEnableConf)(_)&&!O.enabled||P&&!P(u)?(0,_ui.renderEmptyElement)(h):p("div",{class:["vxe-tabs-header--refresh-btn",{"is--active":f,"is--loading":d,"is--disabled":d}],on:{click:function(e){h.handleRefreshTabEvent(e,t)}}},[p("i",{class:d?(0,_ui.getIcon)().TABS_TAB_REFRESH_LOADING:(0,_ui.getIcon)().TABS_TAB_REFRESH})]),!(g||(0,_utils.isEnableConf)(T)||N.enabled)||C&&!C(u)?(0,_ui.renderEmptyElement)(h):p("div",{class:["vxe-tabs-header--close-btn",{"is--active":f}],on:{click:function(e){h.handleCloseTabEvent(e,t,i,m)}}},[p("i",{class:(0,_ui.getIcon)().TABS_TAB_CLOSE})])])])}).concat([p("span",{key:"line",class:["vxe-tabs-header--active-line","type--".concat(S),"pos--".concat(E)],style:o})]))]),n?p("div",{ref:"refHeadNextElem",class:["vxe-tabs-header--bar vxe-tabs-header--next-bar","type--".concat(S),"pos--".concat(E)],on:{click:h.scrollRightEvent}},[p("span",{class:t?(0,_ui.getIcon)().TABS_TAB_BUTTON_BOTTOM:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_ui.renderEmptyElement)(h),e?p("div",{class:["vxe-tabs-header--suffix","type--".concat(S),"pos--".concat(E)]},h.callSlot(e,{name:y},p)):(0,_ui.renderEmptyElement)(h)])},renderTabPane:function(e,t){var i=this,a=i.reactData,n=i.useScrollbar,o=a.initNames,a=a.activeName,r=t.name,t=t.slots,s=t?t.default:null,t=i.computeScrollbarProps;return r&&o.includes(r)?n?e(_scrollbar.default,{key:"".concat(r),class:["vxe-tabs-pane--scrollbar-item",{"is--visible":a===r}],props:t,scopedSlots:{default:function(){return s?i.callSlot(s,{name:r},e):[]}}}):e("div",{key:"".concat(r),class:["vxe-tabs-pane--item",{"is--visible":a===r}]},s?i.callSlot(s,{name:r},e):[]):(0,_ui.renderEmptyElement)(i)},renderTabContent:function(t,e){var i=this,a=i.reactData,n=i.destroyOnClose,o=a.activeName;return n?[(a=e.find(function(e){return e.name===o}))?i.renderTabPane(t,a):(0,_ui.renderEmptyElement)(i)]:e.map(function(e){return i.renderTabPane(t,e)})},rendetTabBody:function(e,t){var i=this,a=i.$scopedSlots,n=i.reactData,o=i.height,r=i.padding,s=i.showBody,l=n.activeName,c=i.computeSize,u=i.computeTabType,f=i.computeTabPosition,d=i.computeRefreshOpts.showLoading,p=a.header,a=a.footer;return s?(n=!!(n=l?n.cacheTabMaps["".concat(l)]:null)&&n.loading,l={name:l},e("div",{key:"tb",class:["vxe-tabs-pane--wrapper","type--".concat(u),"pos--".concat(f),{"is--content":s}]},[p?e("div",{class:"vxe-tabs-pane--header"},i.callSlot(p,l,e)):(0,_ui.renderEmptyElement)(i),e("div",{class:["vxe-tabs-pane--body","type--".concat(u),"pos--".concat(f),_defineProperty(_defineProperty(_defineProperty({},"size--".concat(c),c),"is--padding",r),"is--height",o)]},i.renderTabContent(e,t)),a?e("div",{class:"vxe-tabs-pane--footer"},i.callSlot(a,l,e)):(0,_ui.renderEmptyElement)(i),d&&n?(0,_ui.renderEmptyElement)(i):e(_loading.default,{class:"vxe-tabs--loading",props:{value:n}})])):(0,_ui.renderEmptyElement)(i)},renderVN:function(e){var t=this,i=t.$scopedSlots,a=t.height,n=t.padding,o=t.trigger,r=t.reactData.activeName,s=t.computeSize,l=t.computeTabType,c=t.computeTabPosition,u=t.computeWrapperStyle,i=i.default,f=i?t.computeTabStaticOptions:t.computeTabOptions,i=[e("div",{key:"ts",class:"vxe-tabs-slots"},i?i({name:r}):[])];return"right"===c||"bottom"===c?i.push(t.rendetTabBody(e,f),t.renderTabHeader(e,f)):i.push(t.renderTabHeader(e,f),t.rendetTabBody(e,f)),e("div",{ref:"refElem",class:["vxe-tabs","pos--".concat(c),"vxe-tabs--".concat(l),"trigger--".concat("manual"===o?"trigger":"default"),_defineProperty(_defineProperty(_defineProperty({},"size--".concat(s),s),"is--padding",n),"is--height",a)],style:u},i)}},watch:{position:function(){this.reactData.resizeFlag++},value:function(e){var t=this.reactData;this.addInitName(e,null),t.activeName=e},"reactData.activeName":function(e){this.scrollToTab(e)},options:function(){var e=this.reactData;this.initDefaultName(this.options),e.resizeFlag++},"reactData.staticTabs":function(){var e=this.reactData;this.initDefaultName(e.staticTabs),e.resizeFlag++},computeParentTabsResizeFlag:function(){var e=this;e.$nextTick(function(){e.updateTabStyle()})}},created:function(){var e=this.reactData;this.addInitName(this.value,null),this.initDefaultName(e.staticTabs.length?e.staticTabs:this.options)},mounted:function(){this.updateTabStyle(),_ui.globalEvents.on(this,"resize",this.updateTabStyle)},beforeDestroy:function(){_ui.globalEvents.off(this,"resize")},render:function(e){return this.renderVN(e)}});

package/lib/tree/src/tree.js

@@ -14,7 +14,6 @@ var _store = require("./store");
 var _dom = require("../../ui/src/dom");
 var _utils = require("../../ui/src/utils");
 var _anime = require("../../ui/src/anime");
-var _util2 = require("../../scrollbar/src/util");
 var _loading = _interopRequireDefault(require("../../loading"));
 var _tooltip = _interopRequireDefault(require("../../tooltip"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -32,9 +31,14 @@ var _createComponentLog = (0, _log.createComponentLog)('tree'),
   warnLog = _createComponentLog.warnLog,
   errLog = _createComponentLog.errLog;
 var menus = _ui.VxeUI.menus,
+  scrollbarUtils = _ui.VxeUI.scrollbarUtils,
   getConfig = _ui.VxeUI.getConfig,
   getI18n = _ui.VxeUI.getI18n,
   getIcon = _ui.VxeUI.getIcon;
+var getThumbOffsetSize = scrollbarUtils.getThumbOffsetSize,
+  getThumbSize = scrollbarUtils.getThumbSize,
+  getScrollFromClick = scrollbarUtils.getScrollFromClick,
+  getScrollFromDrag = scrollbarUtils.getScrollFromDrag;
 var crossTreeDragNodeObj = null;
 /**
  * 生成节点的唯一主键
@@ -563,8 +567,9 @@ function createInternalData() {
     indeterminateNodeMaps: {},
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
-    // 滚动条
     // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -769,7 +774,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getConfig().tree.useScrollbar;
+        return (0, _utils.getDefaultConfig)(getConfig().tree.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object
@@ -894,11 +899,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     computeWrapperStyles: function computeWrapperStyles() {
       var $xeTree = this;
-      var scrollbarOpts = $xeTree.computeScrollbarOpts;
-      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      var barWidth = (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
-      var barHeight = (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      var barWidth = $xeTree.computeScrollYWidth;
+      var barHeight = $xeTree.computeScrollXHeight;
       var stys = {};
       if (barWidth || barHeight) {
         stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(barWidth || barHeight);
@@ -963,6 +965,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
@@ -990,20 +1004,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
       var $xeTree = this;
       var reactData = $xeTree.reactData;
-      var scrollbarOpts = $xeTree.computeScrollbarOpts;
-      var padding = scrollbarOpts.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
       var scrollbarXToTop = $xeTree.computeScrollbarXToTop;
       var scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
       var scrollXVisible = $xeTree.computeScrollXVisible;
       var scrollYVisible = $xeTree.computeScrollYVisible;
-      var scrollXAutoHide = $xeTree.computeScrollXAutoHide;
-      var scrollYAutoHide = $xeTree.computeScrollYAutoHide;
       return _ui.domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
-        'is--padding': padding,
-        'ov-x--auto-hide': scrollXAutoHide,
-        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -3543,14 +3550,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return;
       }
       var trackXEl = $xeTree.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? (0, _util2.getThumbSize)(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
       var thumbXElem = $xeTree.$refs.refThumbXElem;
       if (thumbXElem) {
         thumbXElem.style.width = xThumbWidth + 'px';
       }
       reactData.xThumbWidth = xThumbWidth;
       var trackYEl = $xeTree.$refs.refTrackYElem;
-      var yThumbHeight = trackYEl ? (0, _util2.getThumbSize)(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
       var thumbYElem = $xeTree.$refs.refThumbYElem;
       if (thumbYElem) {
         thumbYElem.style.height = yThumbHeight + 'px';
@@ -3572,7 +3579,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         yThumbHeight = reactData.yThumbHeight;
       var trackXEl = $xeTree.$refs.refTrackXElem;
       var thumbXElem = $xeTree.$refs.refThumbXElem;
-      var xThumbLeft = trackXEl && xThumbWidth ? (0, _util2.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      var 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';
@@ -3580,7 +3587,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       var trackYEl = $xeTree.$refs.refTrackYElem;
       var thumbYElem = $xeTree.$refs.refThumbYElem;
-      var yThumbTop = trackYEl && yThumbHeight ? (0, _util2.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      var 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';
@@ -3601,7 +3608,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var xThumbWidth = reactData.xThumbWidth;
       var trackRect = trackEl.getBoundingClientRect();
       viewEl.scrollTo({
-        left: (0, _util2.getScrollFromClick)(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
         behavior: 'auto'
       });
     },
@@ -3619,7 +3626,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var yThumbHeight = reactData.yThumbHeight;
       var trackRect = trackEl.getBoundingClientRect();
       viewEl.scrollTo({
-        top: (0, _util2.getScrollFromClick)(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
         behavior: 'auto'
       });
     },
@@ -3639,7 +3646,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var trackRect = trackEl.getBoundingClientRect();
       var pointerPosition = evnt.clientX - trackRect.left;
       // 记录 thumb 的偏移
-      var thumbOffset = (0, _util2.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
       internalData.thumbDragOffset = pointerPosition - thumbOffset;
     },
     pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
@@ -3662,7 +3669,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         var trackEl = _thumbEl.parentElement;
         var trackRect = trackEl.getBoundingClientRect();
         // 更新偏移
-        viewEl.scrollLeft = (0, _util2.getScrollFromDrag)(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
       }
     },
     cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
@@ -3688,7 +3695,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var trackRect = trackEl.getBoundingClientRect();
       var pointerPosition = evnt.clientY - trackRect.top;
       // 记录 thumb 的偏移
-      var thumbOffset = (0, _util2.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       internalData.thumbDragOffset = pointerPosition - thumbOffset;
     },
     pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
@@ -3711,7 +3718,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         var trackEl = _thumbEl2.parentElement;
         var trackRect = trackEl.getBoundingClientRect();
         // 更新偏移
-        viewEl.scrollTop = (0, _util2.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     },
     //
@@ -4256,6 +4263,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeTree = this;
       $xeTree.reFlag++;
     },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
+    },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
@@ -4315,23 +4330,32 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     if (menuConfig && !VxeUIContextMenu) {
       errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    if (useScrollbar || autoResize) {
-      var el = $xeTree.$refs.refElem;
+    var el = $xeTree.$refs.refElem;
+    if (useScrollbar) {
       var viewInnerEl = $xeTree.$refs.refVirtualBody;
+      var scrollObserver = _ui.globalResize.create(function () {
+        $xeTree.updateScrollbar();
+      });
+      if (el) {
+        scrollObserver.observe(el);
+      }
+      if (viewInnerEl) {
+        scrollObserver.observe(viewInnerEl);
+      }
+      internalData.scrollObserver = scrollObserver;
+    }
+    if (autoResize) {
       var parentEl = $xeTree.getParentElem();
       var resizeObserver = _ui.globalResize.create(function () {
-        $xeTree.reFlag++;
+        if (props.autoResize) {
+          $xeTree.reFlag++;
+        }
       });
       if (el) {
         resizeObserver.observe(el);
-        if (autoResize) {
-          if (parentEl) {
-            resizeObserver.observe(parentEl);
-          }
-        }
       }
-      if (viewInnerEl) {
-        resizeObserver.observe(viewInnerEl);
+      if (parentEl) {
+        resizeObserver.observe(parentEl);
       }
       internalData.resizeObserver = resizeObserver;
     }
@@ -4344,10 +4368,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     var $xeTree = this;
     var reactData = $xeTree.reactData;
     var internalData = $xeTree.internalData;
-    var resizeObserver = internalData.resizeObserver;
+    var scrollObserver = internalData.scrollObserver,
+      resizeObserver = internalData.resizeObserver;
     if (resizeObserver) {
       resizeObserver.disconnect();
     }
+    if (scrollObserver) {
+      scrollObserver.disconnect();
+    }
     _ui.globalEvents.off($xeTree, 'resize');
     _xeUtils.default.assign(reactData, createReactData());
     _xeUtils.default.assign(internalData, createInternalData());