vxe-pc-ui 4.20.7 → 4.20.9

package/lib/tabs/src/tabs.js

@@ -88,7 +88,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const $xeParentTabs = (0, _vue.inject)('$xeTabs', null);
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const refElem = (0, _vue.ref)();
     const refHeadWrapperElem = (0, _vue.ref)();
     const refHeadPrevElem = (0, _vue.ref)();
@@ -865,9 +868,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       })) : renderEmptyElement($xeTabs)]);
     };
     const renderTabPane = item => {
-      const {
-        useScrollbar
-      } = props;
       const {
         initNames,
         activeName
@@ -878,8 +878,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = item;
       const defaultSlot = slots ? slots.default : null;
       const scrollbarProps = computeScrollbarProps.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       if (name && initNames.includes(name)) {
-        return useScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign({
+        return isVScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign({
           key: `${name}`,
           class: ['vxe-tabs-pane--scrollbar-item', {
             'is--visible': activeName === name

package/lib/tabs/src/tabs.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"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{baseUtils,createEvent,getConfig,getIcon,globalEvents,permission,renderEmptyElement}=_ui.VxeUI,getDefVal=baseUtils.getDefVal,{warnLog,errLog}=(0,_log.createComponentLog)("tabs"),scrollbarOffsetSize=20;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,width:[String,Number],height:[String,Number],destroyOnClose:{type:Boolean,default:()=>getConfig().tabs.destroyOnClose},titleWidth:[String,Number],titleAlign:[String,Number],type:{type:String,default:()=>getConfig().tabs.type},position:{type:String,default:()=>getConfig().tabs.position},showClose:Boolean,showBody:{type:Boolean,default:!0},padding:{type:Boolean,default:()=>getConfig().tabs.padding},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,size:{type:String,default:()=>getConfig().tabs.size||getConfig().size},useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().tabs.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object,beforeCloseMethod:Function},emits:["update:modelValue","change","tab-change","tab-change-fail","tab-close","tab-close-fail","tab-click","tab-load"],setup(d,e){let{slots:S,emit:l}=e;var E=_xeUtils.default.uniqueId();let t=(0,_vue.inject)("$xeTabs",null),h=(0,_ui.useSize)(d).computeSize,c=(0,_vue.ref)(),M=(0,_vue.ref)(),u=(0,_vue.ref)(),v=(0,_vue.ref)(),O=(0,_vue.reactive)({staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintTop:0,lintWidth:0,lintHeight:0,scrollbarWidth:0,scrollbarHeight:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}}),m={slTimeout:void 0},w={refElem:c},B=(0,_vue.computed)(()=>{var e=d.type;return e||"default"}),L=(0,_vue.computed)(()=>{var e=d.position;return e||"top"}),H=(0,_vue.computed)(()=>{var e=L.value;return"left"===e||"right"===e}),U=(0,_vue.computed)(()=>{var{lintLeft:e,lintTop:t,lintWidth:a,lintHeight:l}=O;return H.value?{top:t+"px",height:l+"px"}:{left:e+"px",width:a+"px"}}),q=(0,_vue.computed)(()=>{var{width:e,height:t}=d,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height="auto"===t?"100%":(0,_dom.toCssUnit)(t)),a}),z=(0,_vue.computed)(()=>Object.assign({},getConfig().tabs.closeConfig,d.closeConfig)),A=(0,_vue.computed)(()=>Object.assign({},getConfig().tabs.refreshConfig,d.refreshConfig)),b=(0,_vue.computed)(()=>{var e=d.options;return(e||[]).filter(e=>a(e))}),_=(0,_vue.computed)(()=>{var e=O.staticTabs;return e.filter(e=>a(e))});var V=(0,_vue.computed)(()=>t?t.reactData.resizeFlag:null);let F=(0,_vue.computed)(()=>Object.assign({},getConfig().tabs.scrollbarConfig,d.scrollbarConfig)),R=(0,_vue.computed)(()=>{var e=F.value,{viewClassName:t,viewInnerClassName:a}=e;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?" "+a:"")}}),D={},W={xID:E,props:d,context:e,reactData:O,getRefMaps:()=>w,getComputeMaps:()=>D},a=e=>{e=e.permissionCode;return!(e&&!permission.checkVisible(e))},k=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=S[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],I=()=>{var e,t,a,l,i,s=H.value,r=M.value,n=u.value,o=v.value;r&&({scrollLeft:r,scrollTop:e,clientWidth:t,clientHeight:a,scrollWidth:l,scrollHeight:i}=r,n&&(0<(s?e:r)?(0,_dom.addClass):(0,_dom.removeClass))(n,"scrolling--middle"),o)&&((s?a<i-Math.ceil(e):t<l-Math.ceil(r))?(0,_dom.addClass):(0,_dom.removeClass))(o,"scrolling--middle")},f=()=>{var e=()=>{let t=O.activeName;var e,a,l,i,s,r=B.value,n=b.value,o=_.value,u=M.value,v=H.value;let c=0,d=0,h=0,m=0,f=0,p=0,g=!1;u&&(o=_xeUtils.default.findIndexOf(o.length?o:n,e=>e.name===t),{children:n,offsetWidth:u,scrollWidth:e,offsetHeight:l,scrollHeight:i,clientWidth:a,clientHeight:s}=u,f=u-a,p=l-s,v?(g=i!==s,-1<o&&(u=n[o])&&(l=u.clientHeight,v=u.clientWidth,m="card"===r?(c=v,d=l,u.offsetTop):"border-card"===r?(c=v,d=l,u.offsetTop-1):(d=Math.max(4,Math.floor(.6*l)),u.offsetTop+Math.floor((l-d)/2)))):(g=e!==a,-1<o&&(i=n[o])&&(s=i.clientWidth,h="card"===r?(c=s+1,i.offsetLeft):"border-card"===r?(c=s,i.offsetLeft-1):(c=Math.max(4,Math.floor(.6*s)),i.offsetLeft+Math.floor((s-c)/2))))),O.scrollbarWidth=f,O.scrollbarHeight=p,O.lintLeft=h,O.lintTop=m,O.lintWidth=c,O.lintHeight=d,O.isTabOver=g,I()};e(),(0,_vue.nextTick)(e)},p=(e,t,a)=>{l(e,createEvent(a,{$tabs:W},t))},n=e=>{l("update:modelValue",e)},o=(e,t)=>{var a=O.initNames;return!(!e||a.includes(e)||(p("tab-load",{name:e},t),a.push(e),0))},i=e=>{let l=null,i={};if(e&&e.length){let a=!1;l=d.modelValue,e.forEach(e=>{var{name:e,preload:t}=e||{};e&&(i[""+e]={loading:!1},l===e&&(a=!0),t)&&o(e,null)}),a||(l=e[0].name,o(l,null),n(l))}O.activeName=l,O.cacheTabMaps=i},j=(t,a)=>{var e=d.trigger,l=d.beforeChangeMethod||getConfig().tabs.beforeChangeMethod;let i=O.activeName,s=a.name,r=s;p("tab-click",{name:s},t),"manual"!==e&&s!==i&&Promise.resolve(!l||l({$tabs:W,name:s,oldName:i,newName:s,option:a})).then(e=>{e?(O.activeName=s,n(r),o(s,t),p("change",{value:r,name:s,oldName:i,newName:s,option:a},t),p("tab-change",{value:r,name:s,oldName:i,newName:s,option:a},t)):p("tab-change-fail",{value:r,name:s,oldName:i,newName:s,option:a},t)}).catch(()=>{p("tab-change-fail",{value:r,name:s,oldName:i,newName:s,option:a},t)})},P=(e,t)=>{e.stopPropagation();var{activeName:e,cacheTabMaps:a}=O,l=t.name,i=A.value.queryMethod;let s=l?a[""+l]:null;s&&(i?s.loading||(s.loading=!0,Promise.resolve(i({$tabs:W,value:e,name:l,option:t})).finally(()=>{s.loading=!1})):errLog("vxe.error.notFunc",["refresh-config.queryMethod"]))},$=(t,e,a,l)=>{t.stopPropagation();var i=O.activeName,s=z.value.beforeMethod||d.beforeCloseMethod||getConfig().tabs.beforeCloseMethod;let r=e.name,n=i,o=n;i===r&&(i=a<l.length-1?l[a+1]:l[a-1],o=i?i.name:null),Promise.resolve(!s||s({$tabs:W,value:n,name:r,nextName:o,option:e})).then(e=>{e?p("tab-close",{value:n,name:r,nextName:o},t):p("tab-close-fail",{value:n,name:r,nextName:o},t)}).catch(()=>{p("tab-close-fail",{value:n,name:r,nextName:o},t)})},G=(n,e)=>{var t=m.slTimeout;let o=H.value,u=o?0:e,v=o?e:0,c=6,d=35,h=(t&&(clearTimeout(t),m.slTimeout=void 0),()=>{var e,t,a,l,i,s,r=M.value;0<c&&(c--,r)&&({clientWidth:e,clientHeight:t,scrollWidth:a,scrollHeight:l,scrollLeft:i,scrollTop:s}=r,o?(v=Math.floor(v/2),0<n?t+s<l&&(r.scrollTop+=v,d-=4,m.slTimeout=setTimeout(h,d)):0<s&&(r.scrollTop-=v,d-=4,m.slTimeout=setTimeout(h,d))):(u=Math.floor(u/2),0<n?e+i<a&&(r.scrollLeft+=u,d-=4,m.slTimeout=setTimeout(h,d)):0<i&&(r.scrollLeft-=u,d-=4,m.slTimeout=setTimeout(h,d))),f())});h()},s=e=>{var t,a=H.value,l=M.value;l&&({clientWidth:l,clientHeight:t}=l,a=Math.floor(.75*(a?t:l)),G(e,a))},J=()=>{s(-1)},K=()=>{s(1)},r=n=>{let o=b.value,u=_.value,v=H.value;return(0,_vue.nextTick)().then(()=>{var e,t,a,l,i,s,r=M.value;r&&(-1<(l=_xeUtils.default.findIndexOf(u.length?u:o,e=>e.name===n))&&({scrollLeft:e,scrollTop:s,clientWidth:t,clientHeight:i,children:a}=r,a=a[l])&&(v?(0<(i=(l=a.offsetTop)+a.clientHeight-(s+i))&&(r.scrollTop+=i),l<s&&(r.scrollTop=l)):(0<(s=(i=a.offsetLeft)+a.clientWidth-(e+t))&&(r.scrollLeft+=s),i<e&&(r.scrollLeft=i))),f())})},g=t=>{let a=O.activeName;var l=b.value,i=_.value,i=i.length?i:l,l=_xeUtils.default.findIndexOf(i,e=>e.name===a);if(-1<l){let e=null;t?l<i.length-1&&(e=i[l+1]):0<l&&(e=i[l-1]),e&&(i=t=e.name,O.activeName=t,n(i),o(t,null))}return(0,_vue.nextTick)()},x={dispatchEvent:p,scrollToTab:r,prev(){return g(!1)},next(){return g(!0)},prevTab(){return warnLog("vxe.error.delFunc",["prevTab","prev"]),x.prev()},nextTab(){return warnLog("vxe.error.delFunc",["nextTab","next"]),x.next()}};Object.assign(W,x,{});let T=h=>{let{titleWidth:m,titleAlign:f,showClose:p,closeConfig:g,refreshConfig:b}=d,{activeName:_,scrollbarWidth:e,scrollbarHeight:t,isTabOver:a,cacheTabMaps:x}=O,T=B.value,C=L.value;var l=H.value,i=U.value,s=S.tabPrefix||S["tab-prefix"]||S.prefix,r=S.tabSuffix||S["tab-suffix"]||S.suffix||S.extra;let y=z.value,N=y.visibleMethod,E=A.value,w=E.visibleMethod;return(0,_vue.h)("div",{key:"th",class:["vxe-tabs-header","type--"+T,"pos--"+C]},[s?(0,_vue.h)("div",{class:["vxe-tabs-header--prefix","type--"+T,"pos--"+C]},k(s,{name:_})):renderEmptyElement(W),a?(0,_vue.h)("div",{ref:u,class:["vxe-tabs-header--bar vxe-tabs-header--prev-bar","type--"+T,"pos--"+C],onClick:J},[(0,_vue.h)("span",{class:l?getIcon().TABS_TAB_BUTTON_TOP:getIcon().TABS_TAB_BUTTON_LEFT})]):renderEmptyElement(W),(0,_vue.h)("div",{class:["vxe-tabs-header--wrapper","type--"+T,"pos--"+C]},[(0,_vue.h)("div",{ref:M,class:"vxe-tabs-header--item-wrapper",style:l?{marginRight:`-${e+scrollbarOffsetSize}px`,paddingRight:scrollbarOffsetSize+"px"}:{marginBottom:`-${t+scrollbarOffsetSize}px`,paddingBottom:scrollbarOffsetSize+"px"},onScroll:I},h.map((t,a)=>{var{title:e,titleWidth:l,titleAlign:i,icon:s,name:r}=t,n=t.slots||{},o=n.title||n.tab,u=n.titlePrefix||n["title-prefix"],n=n.titleSuffix||n["title-suffix"],l=l||m,i=i||f,v={$tabs:W,value:_,name:r,option:t},c=_===r,d=r?x[""+r]:null,d=!!d&&d.loading;return(0,_vue.h)("div",{key:""+r,class:["vxe-tabs-header--item","type--"+T,"pos--"+C,i?"align--"+i:"",{"is--active":c}],style:l?{width:(0,_dom.toCssUnit)(l)}:void 0,onClick(e){j(e,t)}},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-inner"},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-content"},[s?(0,_vue.h)("span",{class:"vxe-tabs-header--item-icon"},[(0,_vue.h)("i",{class:s})]):renderEmptyElement(W),u?(0,_vue.h)("span",{class:"vxe-tabs-header--item-prefix"},k(u,{name:r,title:e})):renderEmptyElement(W),(0,_vue.h)("span",{class:"vxe-tabs-header--item-name"},o?k(o,{name:r,title:e}):""+e),n?(0,_vue.h)("span",{class:"vxe-tabs-header--item-suffix"},k(n,{name:r,title:e})):renderEmptyElement(W)]),!(0,_utils.isEnableConf)(b)&&!E.enabled||w&&!w(v)?renderEmptyElement(W):(0,_vue.h)("div",{class:["vxe-tabs-header--refresh-btn",{"is--active":c,"is--loading":d,"is--disabled":d}],onClick(e){P(e,t)}},[(0,_vue.h)("i",{class:d?getIcon().TABS_TAB_REFRESH_LOADING:getIcon().TABS_TAB_REFRESH})]),!(p||(0,_utils.isEnableConf)(g)||y.enabled)||N&&!N(v)?renderEmptyElement(W):(0,_vue.h)("div",{class:["vxe-tabs-header--close-btn",{"is--active":c}],onClick(e){$(e,t,a,h)}},[(0,_vue.h)("i",{class:getIcon().TABS_TAB_CLOSE})])])])}).concat([(0,_vue.h)("span",{key:"line",class:["vxe-tabs-header--active-line","type--"+T,"pos--"+C],style:i})]))]),a?(0,_vue.h)("div",{ref:v,class:["vxe-tabs-header--bar vxe-tabs-header--next-bar","type--"+T,"pos--"+C],onClick:K},[(0,_vue.h)("span",{class:l?getIcon().TABS_TAB_BUTTON_BOTTOM:getIcon().TABS_TAB_BUTTON_RIGHT})]):renderEmptyElement(W),r?(0,_vue.h)("div",{class:["vxe-tabs-header--suffix","type--"+T,"pos--"+C]},k(r,{name:_})):renderEmptyElement(W)])},C=e=>{var t=d.useScrollbar,{initNames:a,activeName:l}=O;let{name:i,slots:s}=e,r=s?s.default:null;e=R.value;return i&&a.includes(i)?t?(0,_vue.h)(_scrollbar.default,Object.assign({key:""+i,class:["vxe-tabs-pane--scrollbar-item",{"is--visible":l===i}]},e),{default:()=>r?k(r,{name:i}):[]}):(0,_vue.h)("div",{key:""+i,class:["vxe-tabs-pane--item",{"is--visible":l===i}]},r?k(r,{name:i}):[]):renderEmptyElement(W)},Q=e=>{var t=d.destroyOnClose;let a=O.activeName;return t?[(t=e.find(e=>e.name===a))?C(t):renderEmptyElement(W)]:e.map(e=>C(e))},X=e=>{var{height:t,padding:a,showBody:l}=d,{activeName:i,cacheTabMaps:s}=O,r=h.value,n=B.value,o=L.value,u=A.value.showLoading,v=S.header,c=S.footer;return l?(s=!!(s=i?s[""+i]:null)&&s.loading,i={name:i},(0,_vue.h)("div",{key:"tb",class:["vxe-tabs-pane--wrapper","type--"+n,"pos--"+o,{"is--content":l}]},[v?(0,_vue.h)("div",{class:"vxe-tabs-pane--header"},k(v,i)):renderEmptyElement(W),(0,_vue.h)("div",{class:["vxe-tabs-pane--body","type--"+n,"pos--"+o,{["size--"+r]:r,"is--padding":a,"is--height":t}]},Q(e)),c?(0,_vue.h)("div",{class:"vxe-tabs-pane--footer"},k(c,i)):renderEmptyElement(W),u&&s?renderEmptyElement(W):(0,_vue.h)(_loading.default,{class:"vxe-tabs--loading",modelValue:s})])):renderEmptyElement(W)};(0,_vue.watch)(()=>d.position,()=>{O.resizeFlag++}),(0,_vue.watch)(()=>d.modelValue,e=>{o(e,null),O.activeName=e}),(0,_vue.watch)(()=>O.activeName,e=>{r(e)});let y=(0,_vue.ref)(0),N=((0,_vue.watch)(()=>d.options?d.options.length:-1,()=>{y.value++}),(0,_vue.watch)(()=>d.options,()=>{y.value++}),(0,_vue.watch)(y,()=>{i(d.options),O.resizeFlag++}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>O.staticTabs?O.staticTabs.length:-1,()=>{N.value++}),(0,_vue.watch)(()=>O.staticTabs,()=>{N.value++}),(0,_vue.watch)(N,()=>{i(O.staticTabs),O.resizeFlag++}),(0,_vue.watch)(V,()=>{O.resizeFlag++}),(0,_vue.watch)(()=>O.resizeFlag,()=>{(0,_vue.nextTick)(()=>{f()})}),(0,_vue.onMounted)(()=>{f(),globalEvents.on(W,"resize",f)}),(0,_vue.onUnmounted)(()=>{globalEvents.off(W,"resize")}),(0,_vue.provide)("$xeTabs",W),o(d.modelValue,null),i(O.staticTabs.length?O.staticTabs:d.options),W.renderVN=()=>{var{height:e,padding:t,trigger:a}=d,l=O.activeName,i=h.value,s=b.value,r=_.value,n=B.value,o=L.value,u=q.value,v=S.default,r=v?r:s,s=[(0,_vue.h)("div",{key:"ts",class:"vxe-tabs-slots"},v?v({name:l}):[])];return"right"===o||"bottom"===o?s.push(X(r),T(r)):s.push(T(r),X(r)),(0,_vue.h)("div",{ref:c,class:["vxe-tabs","pos--"+o,"vxe-tabs--"+n,"trigger--"+("manual"===a?"trigger":"default"),{["size--"+i]:i,"is--padding":t,"is--height":e}],style:u},s)},W},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"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{baseUtils,createEvent,getConfig,getIcon,globalEvents,permission,renderEmptyElement}=_ui.VxeUI,getDefVal=baseUtils.getDefVal,{warnLog,errLog}=(0,_log.createComponentLog)("tabs"),scrollbarOffsetSize=20;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,width:[String,Number],height:[String,Number],destroyOnClose:{type:Boolean,default:()=>getConfig().tabs.destroyOnClose},titleWidth:[String,Number],titleAlign:[String,Number],type:{type:String,default:()=>getConfig().tabs.type},position:{type:String,default:()=>getConfig().tabs.position},showClose:Boolean,showBody:{type:Boolean,default:!0},padding:{type:Boolean,default:()=>getConfig().tabs.padding},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,size:{type:String,default:()=>getConfig().tabs.size||getConfig().size},useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().tabs.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object,beforeCloseMethod:Function},emits:["update:modelValue","change","tab-change","tab-change-fail","tab-close","tab-close-fail","tab-click","tab-load"],setup(d,e){let{slots:S,emit:l}=e;var E=_xeUtils.default.uniqueId();let t=(0,_vue.inject)("$xeTabs",null),h=_ui.useFns.useSize(d).computeSize,w=_ui.useFns.useVScrollbar(d).computeIsVScrollbar,c=(0,_vue.ref)(),M=(0,_vue.ref)(),u=(0,_vue.ref)(),v=(0,_vue.ref)(),O=(0,_vue.reactive)({staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintTop:0,lintWidth:0,lintHeight:0,scrollbarWidth:0,scrollbarHeight:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}}),m={slTimeout:void 0},V={refElem:c},B=(0,_vue.computed)(()=>{var e=d.type;return e||"default"}),L=(0,_vue.computed)(()=>{var e=d.position;return e||"top"}),H=(0,_vue.computed)(()=>{var e=L.value;return"left"===e||"right"===e}),F=(0,_vue.computed)(()=>{var{lintLeft:e,lintTop:t,lintWidth:a,lintHeight:l}=O;return H.value?{top:t+"px",height:l+"px"}:{left:e+"px",width:a+"px"}}),U=(0,_vue.computed)(()=>{var{width:e,height:t}=d,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height="auto"===t?"100%":(0,_dom.toCssUnit)(t)),a}),z=(0,_vue.computed)(()=>Object.assign({},getConfig().tabs.closeConfig,d.closeConfig)),A=(0,_vue.computed)(()=>Object.assign({},getConfig().tabs.refreshConfig,d.refreshConfig)),b=(0,_vue.computed)(()=>{var e=d.options;return(e||[]).filter(e=>a(e))}),_=(0,_vue.computed)(()=>{var e=O.staticTabs;return e.filter(e=>a(e))});var q=(0,_vue.computed)(()=>t?t.reactData.resizeFlag:null);let R=(0,_vue.computed)(()=>Object.assign({},getConfig().tabs.scrollbarConfig,d.scrollbarConfig)),D=(0,_vue.computed)(()=>{var e=R.value,{viewClassName:t,viewInnerClassName:a}=e;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?" "+a:"")}}),j={},W={xID:E,props:d,context:e,reactData:O,getRefMaps:()=>V,getComputeMaps:()=>j},a=e=>{e=e.permissionCode;return!(e&&!permission.checkVisible(e))},k=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=S[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],I=()=>{var e,t,a,l,i,s=H.value,r=M.value,n=u.value,o=v.value;r&&({scrollLeft:r,scrollTop:e,clientWidth:t,clientHeight:a,scrollWidth:l,scrollHeight:i}=r,n&&(0<(s?e:r)?(0,_dom.addClass):(0,_dom.removeClass))(n,"scrolling--middle"),o)&&((s?a<i-Math.ceil(e):t<l-Math.ceil(r))?(0,_dom.addClass):(0,_dom.removeClass))(o,"scrolling--middle")},f=()=>{var e=()=>{let t=O.activeName;var e,a,l,i,s,r=B.value,n=b.value,o=_.value,u=M.value,v=H.value;let c=0,d=0,h=0,m=0,f=0,p=0,g=!1;u&&(o=_xeUtils.default.findIndexOf(o.length?o:n,e=>e.name===t),{children:n,offsetWidth:u,scrollWidth:e,offsetHeight:l,scrollHeight:i,clientWidth:a,clientHeight:s}=u,f=u-a,p=l-s,v?(g=i!==s,-1<o&&(u=n[o])&&(l=u.clientHeight,v=u.clientWidth,m="card"===r?(c=v,d=l,u.offsetTop):"border-card"===r?(c=v,d=l,u.offsetTop-1):(d=Math.max(4,Math.floor(.6*l)),u.offsetTop+Math.floor((l-d)/2)))):(g=e!==a,-1<o&&(i=n[o])&&(s=i.clientWidth,h="card"===r?(c=s+1,i.offsetLeft):"border-card"===r?(c=s,i.offsetLeft-1):(c=Math.max(4,Math.floor(.6*s)),i.offsetLeft+Math.floor((s-c)/2))))),O.scrollbarWidth=f,O.scrollbarHeight=p,O.lintLeft=h,O.lintTop=m,O.lintWidth=c,O.lintHeight=d,O.isTabOver=g,I()};e(),(0,_vue.nextTick)(e)},p=(e,t,a)=>{l(e,createEvent(a,{$tabs:W},t))},n=e=>{l("update:modelValue",e)},o=(e,t)=>{var a=O.initNames;return!(!e||a.includes(e)||(p("tab-load",{name:e},t),a.push(e),0))},i=e=>{let l=null,i={};if(e&&e.length){let a=!1;l=d.modelValue,e.forEach(e=>{var{name:e,preload:t}=e||{};e&&(i[""+e]={loading:!1},l===e&&(a=!0),t)&&o(e,null)}),a||(l=e[0].name,o(l,null),n(l))}O.activeName=l,O.cacheTabMaps=i},P=(t,a)=>{var e=d.trigger,l=d.beforeChangeMethod||getConfig().tabs.beforeChangeMethod;let i=O.activeName,s=a.name,r=s;p("tab-click",{name:s},t),"manual"!==e&&s!==i&&Promise.resolve(!l||l({$tabs:W,name:s,oldName:i,newName:s,option:a})).then(e=>{e?(O.activeName=s,n(r),o(s,t),p("change",{value:r,name:s,oldName:i,newName:s,option:a},t),p("tab-change",{value:r,name:s,oldName:i,newName:s,option:a},t)):p("tab-change-fail",{value:r,name:s,oldName:i,newName:s,option:a},t)}).catch(()=>{p("tab-change-fail",{value:r,name:s,oldName:i,newName:s,option:a},t)})},$=(e,t)=>{e.stopPropagation();var{activeName:e,cacheTabMaps:a}=O,l=t.name,i=A.value.queryMethod;let s=l?a[""+l]:null;s&&(i?s.loading||(s.loading=!0,Promise.resolve(i({$tabs:W,value:e,name:l,option:t})).finally(()=>{s.loading=!1})):errLog("vxe.error.notFunc",["refresh-config.queryMethod"]))},G=(t,e,a,l)=>{t.stopPropagation();var i=O.activeName,s=z.value.beforeMethod||d.beforeCloseMethod||getConfig().tabs.beforeCloseMethod;let r=e.name,n=i,o=n;i===r&&(i=a<l.length-1?l[a+1]:l[a-1],o=i?i.name:null),Promise.resolve(!s||s({$tabs:W,value:n,name:r,nextName:o,option:e})).then(e=>{e?p("tab-close",{value:n,name:r,nextName:o},t):p("tab-close-fail",{value:n,name:r,nextName:o},t)}).catch(()=>{p("tab-close-fail",{value:n,name:r,nextName:o},t)})},J=(n,e)=>{var t=m.slTimeout;let o=H.value,u=o?0:e,v=o?e:0,c=6,d=35,h=(t&&(clearTimeout(t),m.slTimeout=void 0),()=>{var e,t,a,l,i,s,r=M.value;0<c&&(c--,r)&&({clientWidth:e,clientHeight:t,scrollWidth:a,scrollHeight:l,scrollLeft:i,scrollTop:s}=r,o?(v=Math.floor(v/2),0<n?t+s<l&&(r.scrollTop+=v,d-=4,m.slTimeout=setTimeout(h,d)):0<s&&(r.scrollTop-=v,d-=4,m.slTimeout=setTimeout(h,d))):(u=Math.floor(u/2),0<n?e+i<a&&(r.scrollLeft+=u,d-=4,m.slTimeout=setTimeout(h,d)):0<i&&(r.scrollLeft-=u,d-=4,m.slTimeout=setTimeout(h,d))),f())});h()},s=e=>{var t,a=H.value,l=M.value;l&&({clientWidth:l,clientHeight:t}=l,a=Math.floor(.75*(a?t:l)),J(e,a))},K=()=>{s(-1)},Q=()=>{s(1)},r=n=>{let o=b.value,u=_.value,v=H.value;return(0,_vue.nextTick)().then(()=>{var e,t,a,l,i,s,r=M.value;r&&(-1<(l=_xeUtils.default.findIndexOf(u.length?u:o,e=>e.name===n))&&({scrollLeft:e,scrollTop:s,clientWidth:t,clientHeight:i,children:a}=r,a=a[l])&&(v?(0<(i=(l=a.offsetTop)+a.clientHeight-(s+i))&&(r.scrollTop+=i),l<s&&(r.scrollTop=l)):(0<(s=(i=a.offsetLeft)+a.clientWidth-(e+t))&&(r.scrollLeft+=s),i<e&&(r.scrollLeft=i))),f())})},g=t=>{let a=O.activeName;var l=b.value,i=_.value,i=i.length?i:l,l=_xeUtils.default.findIndexOf(i,e=>e.name===a);if(-1<l){let e=null;t?l<i.length-1&&(e=i[l+1]):0<l&&(e=i[l-1]),e&&(i=t=e.name,O.activeName=t,n(i),o(t,null))}return(0,_vue.nextTick)()},x={dispatchEvent:p,scrollToTab:r,prev(){return g(!1)},next(){return g(!0)},prevTab(){return warnLog("vxe.error.delFunc",["prevTab","prev"]),x.prev()},nextTab(){return warnLog("vxe.error.delFunc",["nextTab","next"]),x.next()}};Object.assign(W,x,{});let T=h=>{let{titleWidth:m,titleAlign:f,showClose:p,closeConfig:g,refreshConfig:b}=d,{activeName:_,scrollbarWidth:e,scrollbarHeight:t,isTabOver:a,cacheTabMaps:x}=O,T=B.value,C=L.value;var l=H.value,i=F.value,s=S.tabPrefix||S["tab-prefix"]||S.prefix,r=S.tabSuffix||S["tab-suffix"]||S.suffix||S.extra;let y=z.value,N=y.visibleMethod,E=A.value,w=E.visibleMethod;return(0,_vue.h)("div",{key:"th",class:["vxe-tabs-header","type--"+T,"pos--"+C]},[s?(0,_vue.h)("div",{class:["vxe-tabs-header--prefix","type--"+T,"pos--"+C]},k(s,{name:_})):renderEmptyElement(W),a?(0,_vue.h)("div",{ref:u,class:["vxe-tabs-header--bar vxe-tabs-header--prev-bar","type--"+T,"pos--"+C],onClick:K},[(0,_vue.h)("span",{class:l?getIcon().TABS_TAB_BUTTON_TOP:getIcon().TABS_TAB_BUTTON_LEFT})]):renderEmptyElement(W),(0,_vue.h)("div",{class:["vxe-tabs-header--wrapper","type--"+T,"pos--"+C]},[(0,_vue.h)("div",{ref:M,class:"vxe-tabs-header--item-wrapper",style:l?{marginRight:`-${e+scrollbarOffsetSize}px`,paddingRight:scrollbarOffsetSize+"px"}:{marginBottom:`-${t+scrollbarOffsetSize}px`,paddingBottom:scrollbarOffsetSize+"px"},onScroll:I},h.map((t,a)=>{var{title:e,titleWidth:l,titleAlign:i,icon:s,name:r}=t,n=t.slots||{},o=n.title||n.tab,u=n.titlePrefix||n["title-prefix"],n=n.titleSuffix||n["title-suffix"],l=l||m,i=i||f,v={$tabs:W,value:_,name:r,option:t},c=_===r,d=r?x[""+r]:null,d=!!d&&d.loading;return(0,_vue.h)("div",{key:""+r,class:["vxe-tabs-header--item","type--"+T,"pos--"+C,i?"align--"+i:"",{"is--active":c}],style:l?{width:(0,_dom.toCssUnit)(l)}:void 0,onClick(e){P(e,t)}},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-inner"},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-content"},[s?(0,_vue.h)("span",{class:"vxe-tabs-header--item-icon"},[(0,_vue.h)("i",{class:s})]):renderEmptyElement(W),u?(0,_vue.h)("span",{class:"vxe-tabs-header--item-prefix"},k(u,{name:r,title:e})):renderEmptyElement(W),(0,_vue.h)("span",{class:"vxe-tabs-header--item-name"},o?k(o,{name:r,title:e}):""+e),n?(0,_vue.h)("span",{class:"vxe-tabs-header--item-suffix"},k(n,{name:r,title:e})):renderEmptyElement(W)]),!(0,_utils.isEnableConf)(b)&&!E.enabled||w&&!w(v)?renderEmptyElement(W):(0,_vue.h)("div",{class:["vxe-tabs-header--refresh-btn",{"is--active":c,"is--loading":d,"is--disabled":d}],onClick(e){$(e,t)}},[(0,_vue.h)("i",{class:d?getIcon().TABS_TAB_REFRESH_LOADING:getIcon().TABS_TAB_REFRESH})]),!(p||(0,_utils.isEnableConf)(g)||y.enabled)||N&&!N(v)?renderEmptyElement(W):(0,_vue.h)("div",{class:["vxe-tabs-header--close-btn",{"is--active":c}],onClick(e){G(e,t,a,h)}},[(0,_vue.h)("i",{class:getIcon().TABS_TAB_CLOSE})])])])}).concat([(0,_vue.h)("span",{key:"line",class:["vxe-tabs-header--active-line","type--"+T,"pos--"+C],style:i})]))]),a?(0,_vue.h)("div",{ref:v,class:["vxe-tabs-header--bar vxe-tabs-header--next-bar","type--"+T,"pos--"+C],onClick:Q},[(0,_vue.h)("span",{class:l?getIcon().TABS_TAB_BUTTON_BOTTOM:getIcon().TABS_TAB_BUTTON_RIGHT})]):renderEmptyElement(W),r?(0,_vue.h)("div",{class:["vxe-tabs-header--suffix","type--"+T,"pos--"+C]},k(r,{name:_})):renderEmptyElement(W)])},C=e=>{var{initNames:t,activeName:a}=O;let{name:l,slots:i}=e,s=i?i.default:null;var e=D.value,r=w.value;return l&&t.includes(l)?r?(0,_vue.h)(_scrollbar.default,Object.assign({key:""+l,class:["vxe-tabs-pane--scrollbar-item",{"is--visible":a===l}]},e),{default:()=>s?k(s,{name:l}):[]}):(0,_vue.h)("div",{key:""+l,class:["vxe-tabs-pane--item",{"is--visible":a===l}]},s?k(s,{name:l}):[]):renderEmptyElement(W)},X=e=>{var t=d.destroyOnClose;let a=O.activeName;return t?[(t=e.find(e=>e.name===a))?C(t):renderEmptyElement(W)]:e.map(e=>C(e))},Y=e=>{var{height:t,padding:a,showBody:l}=d,{activeName:i,cacheTabMaps:s}=O,r=h.value,n=B.value,o=L.value,u=A.value.showLoading,v=S.header,c=S.footer;return l?(s=!!(s=i?s[""+i]:null)&&s.loading,i={name:i},(0,_vue.h)("div",{key:"tb",class:["vxe-tabs-pane--wrapper","type--"+n,"pos--"+o,{"is--content":l}]},[v?(0,_vue.h)("div",{class:"vxe-tabs-pane--header"},k(v,i)):renderEmptyElement(W),(0,_vue.h)("div",{class:["vxe-tabs-pane--body","type--"+n,"pos--"+o,{["size--"+r]:r,"is--padding":a,"is--height":t}]},X(e)),c?(0,_vue.h)("div",{class:"vxe-tabs-pane--footer"},k(c,i)):renderEmptyElement(W),u&&s?renderEmptyElement(W):(0,_vue.h)(_loading.default,{class:"vxe-tabs--loading",modelValue:s})])):renderEmptyElement(W)};(0,_vue.watch)(()=>d.position,()=>{O.resizeFlag++}),(0,_vue.watch)(()=>d.modelValue,e=>{o(e,null),O.activeName=e}),(0,_vue.watch)(()=>O.activeName,e=>{r(e)});let y=(0,_vue.ref)(0),N=((0,_vue.watch)(()=>d.options?d.options.length:-1,()=>{y.value++}),(0,_vue.watch)(()=>d.options,()=>{y.value++}),(0,_vue.watch)(y,()=>{i(d.options),O.resizeFlag++}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>O.staticTabs?O.staticTabs.length:-1,()=>{N.value++}),(0,_vue.watch)(()=>O.staticTabs,()=>{N.value++}),(0,_vue.watch)(N,()=>{i(O.staticTabs),O.resizeFlag++}),(0,_vue.watch)(q,()=>{O.resizeFlag++}),(0,_vue.watch)(()=>O.resizeFlag,()=>{(0,_vue.nextTick)(()=>{f()})}),(0,_vue.onMounted)(()=>{f(),globalEvents.on(W,"resize",f)}),(0,_vue.onUnmounted)(()=>{globalEvents.off(W,"resize")}),(0,_vue.provide)("$xeTabs",W),o(d.modelValue,null),i(O.staticTabs.length?O.staticTabs:d.options),W.renderVN=()=>{var{height:e,padding:t,trigger:a}=d,l=O.activeName,i=h.value,s=b.value,r=_.value,n=B.value,o=L.value,u=U.value,v=S.default,r=v?r:s,s=[(0,_vue.h)("div",{key:"ts",class:"vxe-tabs-slots"},v?v({name:l}):[])];return"right"===o||"bottom"===o?s.push(Y(r),T(r)):s.push(T(r),Y(r)),(0,_vue.h)("div",{ref:c,class:["vxe-tabs","pos--"+o,"vxe-tabs--"+n,"trigger--"+("manual"===a?"trigger":"default"),{["size--"+i]:i,"is--padding":t,"is--height":e}],style:u},s)},W},render(){return this.renderVN()}});

package/lib/tooltip/src/tooltip.js

@@ -144,7 +144,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const xID = _xeUtils.default.uniqueId();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const reactData = (0, _vue.reactive)(createReactData());
     const internalData = createInternalData();
     const refElem = (0, _vue.ref)();
@@ -369,7 +372,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const panelElem = refElem.value;
       if (!targetElem || !panelElem) {
-        return;
+        return (0, _vue.nextTick)();
       }
       const targetRect = targetElem.getBoundingClientRect();
       const targetWidth = targetElem.offsetWidth;
@@ -405,6 +408,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       tipStore.placement = ppObj.placement;
       tipStore.style = panelStyle;
       tipStore.arrowStyle.left = ppObj.arrowLeft ? `${ppObj.arrowLeft}px` : '';
+      return (0, _vue.nextTick)();
     };
     const tooltipMethods = {
       dispatchEvent,
@@ -431,8 +435,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return handleVisible(target, content);
       },
       updatePlacement() {
-        updateTipStyle();
-        return (0, _vue.nextTick)().then(updateTipStyle);
+        return updateTipStyle().then(() => {
+          return updateTipStyle();
+        }).then(() => {
+          setTimeout(() => {
+            updateTipStyle();
+          }, 15);
+        });
       },
       isActived() {
         return reactData.tipActive;
@@ -458,7 +467,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     Object.assign($xeTooltip, tooltipMethods, tooltipPrivateMethods);
     const renderContent = () => {
       const {
-        useScrollbar,
         theme,
         useHtml,
         useHTML
@@ -466,6 +474,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         tipContent
       } = reactData;
+      const isVScrollbar = computeIsVScrollbar.value;
       const wrapperStyle = computeWrapperStyle.value;
       const contentSlot = slots.content;
       const contVNs = [];
@@ -483,7 +492,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           key: 'cd'
         }, `${tipContent}`));
       }
-      if (useScrollbar) {
+      if (isVScrollbar) {
         return (0, _vue.h)(_scrollbar.default, {
           key: 5,
           ref: contentScrollbar,

package/lib/tooltip/src/tooltip.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{baseUtils,getConfig,createEvent,globalEvents}=_ui.VxeUI,getDefVal=baseUtils.getDefVal;function createReactData(){return{target:null,isUpdate:!1,visible:!1,tipPos:null,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}}function createInternalData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTooltip",props:{modelValue:Boolean,size:{type:String,default:()=>getConfig().tooltip.size||getConfig().size},selector:[String,Element],trigger:{type:String,default:()=>getConfig().tooltip.trigger||"hover"},theme:{type:String,default:()=>getConfig().tooltip.theme||"dark"},content:{type:[String,Number],default:null},useHtml:{type:Boolean,default:()=>_xeUtils.default.isBoolean(getConfig().tooltip.useHtml)?getConfig().tooltip.useHtml:null},useHTML:{type:Boolean,default:()=>getConfig().tooltip.useHTML},zIndex:[String,Number],popupClassName:[String,Function],width:{type:[String,Number],default:()=>getConfig().tooltip.Width},height:{type:[String,Number],default:()=>getConfig().tooltip.height},minWidth:{type:[String,Number],default:()=>getConfig().tooltip.minWidth},minHeight:{type:[String,Number],default:()=>getConfig().tooltip.minHeight},maxWidth:{type:[String,Number],default:()=>getConfig().tooltip.maxWidth},maxHeight:{type:[String,Number],default:()=>getConfig().tooltip.maxHeight},placement:{type:String,default:()=>getConfig().tooltip.placement},defaultPlacement:{type:String,default:()=>getConfig().tooltip.defaultPlacement},isArrow:{type:Boolean,default:()=>getConfig().tooltip.isArrow},enterable:{type:Boolean,default:()=>getConfig().tooltip.enterable},enterDelay:{type:Number,default:()=>getConfig().tooltip.enterDelay},leaveDelay:{type:Number,default:()=>getConfig().tooltip.leaveDelay},appendTo:{type:[String,Function],default:()=>getConfig().tooltip.appendTo},useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().tooltip.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object},emits:["update:modelValue","show","hide"],setup(m,e){let{slots:p,emit:i}=e;var t=_xeUtils.default.uniqueId();let d=(0,_ui.useSize)(m).computeSize,h=(0,_vue.reactive)(createReactData()),a=createInternalData(),_=(0,_vue.ref)(),c=(0,_vue.ref)(),v=(0,_vue.ref)(),g=(0,_vue.computed)(()=>{var{width:e,height:t,minHeight:l,minWidth:i,maxHeight:n,maxWidth:o}=m,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height=(0,_dom.toCssUnit)(t)),i&&(a.minWidth=(0,_dom.toCssUnit)(i)),l&&(a.minHeight=(0,_dom.toCssUnit)(l)),o&&(a.maxWidth=(0,_dom.toCssUnit)(o)),n&&(a.maxHeight=(0,_dom.toCssUnit)(n)),a}),l={refElem:_},f={xID:t,props:m,context:e,reactData:h,internalData:a,getRefMaps:()=>l},r=(e,t,l)=>{i(e,createEvent(l,{$tooltip:f},t))},n=e=>{e!==h.visible&&(h.visible=e,h.isUpdate=!0,i("update:modelValue",e))},o=()=>{var e=m.zIndex;e?h.tipZindex=_xeUtils.default.toNumber(e):h.tipZindex<(0,_utils.getLastZIndex)()&&(h.tipZindex=(0,_utils.nextZIndex)())},u=()=>{h.visible?f.close():S(h.target||U(),m.content)},s=()=>{S(h.target||U(),m.content)},x=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e?setTimeout(()=>{h.tipActive||f.close()},l):f.close()},y=()=>{h.tipActive=!0},b=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e&&setTimeout(()=>{h.tipActive||f.close()},l)},C=()=>{var e=m.appendTo,t=h.tipStore,l=_.value;return l&&!l.parentNode&&(0,_dom.getPopupAppendElement)(e).appendChild(l),n(!0),o(),t.placement="top",t.style={width:"auto",left:0,top:0,zIndex:m.zIndex||h.tipZindex},t.arrowStyle={left:"50%"},f.updatePlacement().then(()=>f.updatePlacement())},w=()=>{a.showDelayTip=_xeUtils.default.debounce(()=>{h.tipActive&&C()},m.enterDelay,{leading:!1,trailing:!0})},S=(e,t,l)=>{var i=p.content;if((i||""!==t&&!_xeUtils.default.eqNull(t))&&e){var i=a.showDelayTip,{trigger:n,enterDelay:o}=m;if(h.tipPos=l?{x:l.clientX,y:l.clientY,oLeft:l.offsetX,oTop:l.offsetY}:null,h.tipActive=!0,h.tipTarget=e,h.tipContent=t,h.visible)return f.updatePlacement();if(!o||"hover"!==n)return e=C(),r("show",{},l||null),e;i&&i(),r("show",{},l||null)}return(0,_vue.nextTick)()},U=()=>{var e=m.selector;if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e)}return null},D=()=>{var{placement:l,defaultPlacement:i,appendTo:n,isArrow:o}=m,{tipTarget:a,tipStore:r,tipPos:u,tipZindex:s}=h,p=_.value;if(a&&p){var d=a.getBoundingClientRect(),c=a.offsetWidth,v=a.offsetHeight,g=p.offsetWidth,f=d.left;let e=0,t=0;u&&(u.oLeft||u.oTop)&&(e=f,t=d.top+v,o?e=e+Math.max(8,Math.min(c-8,u.oLeft))-g/2:(e=u.x+1,t=u.y+1));f=(0,_dom.updatePanelPlacement)(a,p,{defaultTop:t,defaultLeft:e,placement:l,defaultPlacement:i,appendTo:n,isMinWidth:!1,teleportTo:!0}),d=Object.assign(f.style,{zIndex:s});r.placement=f.placement,r.style=d,r.arrowStyle.left=f.arrowLeft?f.arrowLeft+"px":""}};t={dispatchEvent:r,openByEvent(e,t,l){return S(t||h.target||U(),l,e)},open(e,t){return S(e||h.target||U(),t)},close(){return h.tipPos=null,h.tipTarget=null,h.tipActive=!1,Object.assign(h.tipStore,{style:{},placement:"",arrowStyle:null}),n(!1),r("hide",{},null),(0,_vue.nextTick)()},toVisible(e,t){return S(e,t)},updatePlacement(){return D(),(0,_vue.nextTick)().then(D)},isActived(){return h.tipActive},setActived(e){h.tipActive=!!e}};let T=e=>{e.stopPropagation()},N=()=>{h.visible&&f.updatePlacement()},E=()=>{f.close()};e={handleCloseEvent:x};Object.assign(f,t,e);return(0,_vue.watch)(()=>m.enterDelay,()=>{w()}),(0,_vue.watch)(()=>m.content,e=>{h.tipContent=e}),(0,_vue.watch)(()=>m.modelValue,e=>{h.isUpdate||(e?S(h.target||U(),m.content):f.close()),h.isUpdate=!1}),w(),(0,_vue.onMounted)(()=>{var e=c.value,e=(e&&(e=e.getViewElem())&&(e.addEventListener("wheel",T,{passive:!1}),a.scrollbarViewEl=e),v.value);e&&e.addEventListener("wheel",T,{passive:!1}),(0,_vue.nextTick)(()=>{var e,{trigger:t,content:i}=m;let n=_.value;if(n){let l=n.parentNode;l&&(h.tipContent=i,h.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(n.children,(e,t)=>{t&&(l.insertBefore(e,n),h.target||(h.target=e))}),l.removeChild(n),e=h.target,e&&("hover"===t?(e.onmouseenter=s,e.onmouseleave=x):"click"===t&&(e.onclick=u)),m.modelValue)&&S(e||U(),i)}}),globalEvents.on(f,"blur",E),globalEvents.on(f,"scroll",N)}),(0,_vue.onBeforeUnmount)(()=>{var e=h.target,t=a.scrollbarViewEl,l=_.value,e=(e&&(e.onmouseenter=null,e.onmouseleave=null,e.onclick=null),v.value);e&&e.removeEventListener("wheel",T),t&&t.removeEventListener("wheel",T),l&&(e=l.parentNode)&&e.removeChild(l),globalEvents.off(f,"blur"),globalEvents.off(f,"scroll"),_xeUtils.default.assign(h,createReactData()),_xeUtils.default.assign(a,createInternalData())}),f.renderVN=()=>{var{popupClassName:e,theme:t,isArrow:l,enterable:i}=m,{tipActive:n,visible:o,tipStore:a}=h,r=p.default,u=d.value;let s;return i&&(s={onMouseenter:y,onMouseleave:b}),(0,_vue.h)("div",Object.assign({ref:_,class:["vxe-tooltip--wrapper","theme--"+t,e?_xeUtils.default.isFunction(e)?e({$tooltip:f}):e:"",{["size--"+u]:u,["placement--"+a.placement]:a.placement,"is--enterable":i,"is--visible":o,"is--arrow":l,"is--active":n}],style:a.style},s),[(0,_vue.h)("div",{key:"tby",class:"vxe-tooltip--body"},[(()=>{var{useScrollbar:e,theme:t,useHtml:l,useHTML:i}=m,n=h.tipContent,o=g.value,a=p.content;let r=[];return a?r.push((0,_vue.h)("div",{key:"ct"},(0,_vn.getSlotVNs)(a({})))):(_xeUtils.default.isBoolean(l)?l:i)?r.push((0,_vue.h)("div",{key:"ch",innerHTML:n})):r.push((0,_vue.h)("span",{key:"cd"},""+n)),e?(0,_vue.h)(_scrollbar.default,{key:5,ref:c,class:"vxe-tooltip--scrollbar-content",theme:t,viewClassName:"vxe-tooltip--scrollbar-content-view",viewInnerClassName:"vxe-tooltip--scrollbar-content-inner",viewStyle:o},{default:()=>r}):(0,_vue.h)("div",{key:3,ref:v,class:"vxe-tooltip--content",style:o},r)})(),(0,_vue.h)("div",{class:"vxe-tooltip--arrow",style:a.arrowStyle})]),...r?(0,_vn.getSlotVNs)(r({})):[]])},f},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{baseUtils,getConfig,createEvent,globalEvents}=_ui.VxeUI,getDefVal=baseUtils.getDefVal;function createReactData(){return{target:null,isUpdate:!1,visible:!1,tipPos:null,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}}function createInternalData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTooltip",props:{modelValue:Boolean,size:{type:String,default:()=>getConfig().tooltip.size||getConfig().size},selector:[String,Element],trigger:{type:String,default:()=>getConfig().tooltip.trigger||"hover"},theme:{type:String,default:()=>getConfig().tooltip.theme||"dark"},content:{type:[String,Number],default:null},useHtml:{type:Boolean,default:()=>_xeUtils.default.isBoolean(getConfig().tooltip.useHtml)?getConfig().tooltip.useHtml:null},useHTML:{type:Boolean,default:()=>getConfig().tooltip.useHTML},zIndex:[String,Number],popupClassName:[String,Function],width:{type:[String,Number],default:()=>getConfig().tooltip.Width},height:{type:[String,Number],default:()=>getConfig().tooltip.height},minWidth:{type:[String,Number],default:()=>getConfig().tooltip.minWidth},minHeight:{type:[String,Number],default:()=>getConfig().tooltip.minHeight},maxWidth:{type:[String,Number],default:()=>getConfig().tooltip.maxWidth},maxHeight:{type:[String,Number],default:()=>getConfig().tooltip.maxHeight},placement:{type:String,default:()=>getConfig().tooltip.placement},defaultPlacement:{type:String,default:()=>getConfig().tooltip.defaultPlacement},isArrow:{type:Boolean,default:()=>getConfig().tooltip.isArrow},enterable:{type:Boolean,default:()=>getConfig().tooltip.enterable},enterDelay:{type:Number,default:()=>getConfig().tooltip.enterDelay},leaveDelay:{type:Number,default:()=>getConfig().tooltip.leaveDelay},appendTo:{type:[String,Function],default:()=>getConfig().tooltip.appendTo},useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().tooltip.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object},emits:["update:modelValue","show","hide"],setup(m,e){let{slots:p,emit:i}=e;var t=_xeUtils.default.uniqueId();let d=_ui.useFns.useSize(m).computeSize,c=_ui.useFns.useVScrollbar(m).computeIsVScrollbar,h=(0,_vue.reactive)(createReactData()),a=createInternalData(),_=(0,_vue.ref)(),v=(0,_vue.ref)(),g=(0,_vue.ref)(),f=(0,_vue.computed)(()=>{var{width:e,height:t,minHeight:l,minWidth:i,maxHeight:n,maxWidth:o}=m,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height=(0,_dom.toCssUnit)(t)),i&&(a.minWidth=(0,_dom.toCssUnit)(i)),l&&(a.minHeight=(0,_dom.toCssUnit)(l)),o&&(a.maxWidth=(0,_dom.toCssUnit)(o)),n&&(a.maxHeight=(0,_dom.toCssUnit)(n)),a}),l={refElem:_},x={xID:t,props:m,context:e,reactData:h,internalData:a,getRefMaps:()=>l},r=(e,t,l)=>{i(e,createEvent(l,{$tooltip:x},t))},n=e=>{e!==h.visible&&(h.visible=e,h.isUpdate=!0,i("update:modelValue",e))},o=()=>{var e=m.zIndex;e?h.tipZindex=_xeUtils.default.toNumber(e):h.tipZindex<(0,_utils.getLastZIndex)()&&(h.tipZindex=(0,_utils.nextZIndex)())},u=()=>{h.visible?x.close():T(h.target||U(),m.content)},s=()=>{T(h.target||U(),m.content)},y=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e?setTimeout(()=>{h.tipActive||x.close()},l):x.close()},b=()=>{h.tipActive=!0},C=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e&&setTimeout(()=>{h.tipActive||x.close()},l)},S=()=>{var e=m.appendTo,t=h.tipStore,l=_.value;return l&&!l.parentNode&&(0,_dom.getPopupAppendElement)(e).appendChild(l),n(!0),o(),t.placement="top",t.style={width:"auto",left:0,top:0,zIndex:m.zIndex||h.tipZindex},t.arrowStyle={left:"50%"},x.updatePlacement().then(()=>x.updatePlacement())},w=()=>{a.showDelayTip=_xeUtils.default.debounce(()=>{h.tipActive&&S()},m.enterDelay,{leading:!1,trailing:!0})},T=(e,t,l)=>{var i=p.content;if((i||""!==t&&!_xeUtils.default.eqNull(t))&&e){var i=a.showDelayTip,{trigger:n,enterDelay:o}=m;if(h.tipPos=l?{x:l.clientX,y:l.clientY,oLeft:l.offsetX,oTop:l.offsetY}:null,h.tipActive=!0,h.tipTarget=e,h.tipContent=t,h.visible)return x.updatePlacement();if(!o||"hover"!==n)return e=S(),r("show",{},l||null),e;i&&i(),r("show",{},l||null)}return(0,_vue.nextTick)()},U=()=>{var e=m.selector;if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e)}return null},D=()=>{var{placement:l,defaultPlacement:i,appendTo:n,isArrow:o}=m,{tipTarget:a,tipStore:r,tipPos:u,tipZindex:s}=h,p=_.value;if(a&&p){var d=a.getBoundingClientRect(),c=a.offsetWidth,v=a.offsetHeight,g=p.offsetWidth,f=d.left;let e=0,t=0;u&&(u.oLeft||u.oTop)&&(e=f,t=d.top+v,o?e=e+Math.max(8,Math.min(c-8,u.oLeft))-g/2:(e=u.x+1,t=u.y+1));f=(0,_dom.updatePanelPlacement)(a,p,{defaultTop:t,defaultLeft:e,placement:l,defaultPlacement:i,appendTo:n,isMinWidth:!1,teleportTo:!0}),d=Object.assign(f.style,{zIndex:s});r.placement=f.placement,r.style=d,r.arrowStyle.left=f.arrowLeft?f.arrowLeft+"px":""}return(0,_vue.nextTick)()};t={dispatchEvent:r,openByEvent(e,t,l){return T(t||h.target||U(),l,e)},open(e,t){return T(e||h.target||U(),t)},close(){return h.tipPos=null,h.tipTarget=null,h.tipActive=!1,Object.assign(h.tipStore,{style:{},placement:"",arrowStyle:null}),n(!1),r("hide",{},null),(0,_vue.nextTick)()},toVisible(e,t){return T(e,t)},updatePlacement(){return D().then(()=>D()).then(()=>{setTimeout(()=>{D()},15)})},isActived(){return h.tipActive},setActived(e){h.tipActive=!!e}};let N=e=>{e.stopPropagation()},E=()=>{h.visible&&x.updatePlacement()},V=()=>{x.close()};e={handleCloseEvent:y};Object.assign(x,t,e);return(0,_vue.watch)(()=>m.enterDelay,()=>{w()}),(0,_vue.watch)(()=>m.content,e=>{h.tipContent=e}),(0,_vue.watch)(()=>m.modelValue,e=>{h.isUpdate||(e?T(h.target||U(),m.content):x.close()),h.isUpdate=!1}),w(),(0,_vue.onMounted)(()=>{var e=v.value,e=(e&&(e=e.getViewElem())&&(e.addEventListener("wheel",N,{passive:!1}),a.scrollbarViewEl=e),g.value);e&&e.addEventListener("wheel",N,{passive:!1}),(0,_vue.nextTick)(()=>{var e,{trigger:t,content:i}=m;let n=_.value;if(n){let l=n.parentNode;l&&(h.tipContent=i,h.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(n.children,(e,t)=>{t&&(l.insertBefore(e,n),h.target||(h.target=e))}),l.removeChild(n),e=h.target,e&&("hover"===t?(e.onmouseenter=s,e.onmouseleave=y):"click"===t&&(e.onclick=u)),m.modelValue)&&T(e||U(),i)}}),globalEvents.on(x,"blur",V),globalEvents.on(x,"scroll",E)}),(0,_vue.onBeforeUnmount)(()=>{var e=h.target,t=a.scrollbarViewEl,l=_.value,e=(e&&(e.onmouseenter=null,e.onmouseleave=null,e.onclick=null),g.value);e&&e.removeEventListener("wheel",N),t&&t.removeEventListener("wheel",N),l&&(e=l.parentNode)&&e.removeChild(l),globalEvents.off(x,"blur"),globalEvents.off(x,"scroll"),_xeUtils.default.assign(h,createReactData()),_xeUtils.default.assign(a,createInternalData())}),x.renderVN=()=>{var{popupClassName:e,theme:t,isArrow:l,enterable:i}=m,{tipActive:n,visible:o,tipStore:a}=h,r=p.default,u=d.value;let s;return i&&(s={onMouseenter:b,onMouseleave:C}),(0,_vue.h)("div",Object.assign({ref:_,class:["vxe-tooltip--wrapper","theme--"+t,e?_xeUtils.default.isFunction(e)?e({$tooltip:x}):e:"",{["size--"+u]:u,["placement--"+a.placement]:a.placement,"is--enterable":i,"is--visible":o,"is--arrow":l,"is--active":n}],style:a.style},s),[(0,_vue.h)("div",{key:"tby",class:"vxe-tooltip--body"},[(()=>{var{theme:e,useHtml:t,useHTML:l}=m,i=h.tipContent,n=c.value,o=f.value,a=p.content;let r=[];return a?r.push((0,_vue.h)("div",{key:"ct"},(0,_vn.getSlotVNs)(a({})))):(_xeUtils.default.isBoolean(t)?t:l)?r.push((0,_vue.h)("div",{key:"ch",innerHTML:i})):r.push((0,_vue.h)("span",{key:"cd"},""+i)),n?(0,_vue.h)(_scrollbar.default,{key:5,ref:v,class:"vxe-tooltip--scrollbar-content",theme:e,viewClassName:"vxe-tooltip--scrollbar-content-view",viewInnerClassName:"vxe-tooltip--scrollbar-content-inner",viewStyle:o},{default:()=>r}):(0,_vue.h)("div",{key:3,ref:g,class:"vxe-tooltip--content",style:o},r)})(),(0,_vue.h)("div",{class:"vxe-tooltip--arrow",style:a.arrowStyle})]),...r?(0,_vn.getSlotVNs)(r({})):[]])},x},render(){return this.renderVN()}});

package/lib/tree/src/tree.js

@@ -252,11 +252,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const xID = _xeUtils.default.uniqueId();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const refElem = (0, _vue.ref)();
     const refHeaderWrapperElem = (0, _vue.ref)();
     const refFooterWrapperElem = (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)();
@@ -1054,8 +1058,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();
     };
     /**
      * 重新计算列表
@@ -1082,11 +1092,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           const parentPaddingSize = (0, _dom.getPaddingTopBottomSize)(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
-        updateScrollbar();
         updateHeight();
         return computeScrollLoad().then(() => {
           updateHeight();
           updateYSpace();
+          updateScrollbar();
         });
       }
       return (0, _vue.nextTick)();
@@ -1119,7 +1129,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;
@@ -3462,6 +3472,28 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         hideDropTip();
       }
     };
+    const bindScrollbarResize = () => {
+      const isVScrollbar = computeIsVScrollbar.value;
+      const {
+        scrollObserver
+      } = internalData;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value;
+          const viewInnerEl = refVirtualSpaceElem.value;
+          const scrollObserver = _ui.globalResize.create(() => {
+            reScrollFlag.value++;
+          });
+          if (el) {
+            scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = scrollObserver;
+        }
+      }
+    };
     const updateThumbSize = () => {
       const viewEl = refVirtualWrapper.value;
       if (!viewEl) {
@@ -3981,8 +4013,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         loading,
         trigger,
-        showLine,
-        useScrollbar
+        showLine
       } = props;
       const {
         bodyHeight,
@@ -3993,6 +4024,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         yThumbHeight
       } = reactData;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const radioOpts = computeRadioOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
       const loadingOpts = computeLoadingOpts.value;
@@ -4019,13 +4051,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return (0, _vue.h)('div', Object.assign({
         ref: refElem,
-        class: ['vxe-tree', 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'}` : '', {
+        class: ['vxe-tree', 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'}` : '', {
           [`size--${vSize}`]: vSize,
           'show--line': showLine,
-          '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,
           'checkbox--highlight': checkboxOpts.highlight,
@@ -4046,6 +4078,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: treeStyle,
         onScroll: scrollEvent
       }, [(0, _vue.h)('div', {
+        ref: refVirtualSpaceElem,
         class: 'vxe-tree--y-space',
         style: {
           height: bodyHeight ? `${bodyHeight}px` : ''
@@ -4065,7 +4098,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)($xeTree) : (0, _vue.h)('div', {
         ref: refTrackXElem,
@@ -4175,40 +4208,51 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(() => props.filterValue, () => {
       triggerSearchEvent(new Event('filter'));
     });
-    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.minHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(() => props.maxHeight, () => {
-      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)(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.onMounted)(() => {
       const {
         transform,
@@ -4217,8 +4261,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         showOverflow,
         lazy,
         loadMethod,
-        autoResize,
-        useScrollbar
+        autoResize
       } = props;
       const dragOpts = computeDragOpts.value;
       if (!showOverflow) {
@@ -4240,25 +4283,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (menuConfig && !VxeUIContextMenu) {
         errLog('vxe.error.reqComp', ['vxe-context-menu']);
       }
-      const el = refElem.value;
-      if (useScrollbar || autoResize) {
-        const viewInnerEl = refVirtualBody.value;
-        const scrollObserver = _ui.globalResize.create(() => {
-          updateScrollbar();
-        });
-        if (el) {
-          scrollObserver.observe(el);
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl);
-        }
-        internalData.scrollObserver = scrollObserver;
-      }
       if (autoResize) {
+        const el = refElem.value;
         const parentEl = getParentElem();
         const resizeObserver = _ui.globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++;
+            reLayoutFlag.value++;
           }
         });
         if (el) {
@@ -4269,9 +4299,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         internalData.resizeObserver = resizeObserver;
       }
-      reFlag.value++;
+      reLayoutFlag.value++;
+      bindScrollbarResize();
       _ui.globalEvents.on($xeTree, 'resize', () => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0, _vue.onBeforeUnmount)(() => {