vxe-pc-ui 4.6.35 → 4.6.37

package/lib/tabs/src/tabs.js

@@ -13,17 +13,30 @@ var _utils = require("../../ui/src/utils");
 var _log = require("../../ui/src/log");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const 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: Boolean,
     titleWidth: [String, Number],
     titleAlign: [String, Number],
-    type: String,
+    type: {
+      type: String,
+      default: () => (0, _ui.getConfig)().tabs.type
+    },
+    position: {
+      type: String,
+      default: () => (0, _ui.getConfig)().tabs.position
+    },
     showClose: Boolean,
+    showBody: {
+      type: Boolean,
+      default: true
+    },
     padding: {
       type: Boolean,
       default: () => (0, _ui.getConfig)().tabs.padding
@@ -45,12 +58,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const $xeParentTabs = (0, _vue.inject)('$xeTabs', null);
     const refElem = (0, _vue.ref)();
     const refHeadWrapperElem = (0, _vue.ref)();
+    const refHeadPrevElem = (0, _vue.ref)();
+    const refHeadNextElem = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
       staticTabs: [],
       activeName: null,
       initNames: [],
       lintLeft: 0,
+      lintTop: 0,
       lintWidth: 0,
+      lintHeight: 0,
+      scrollbarWidth: 0,
+      scrollbarHeight: 0,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -61,6 +80,52 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refMaps = {
       refElem
     };
+    const computeTabType = (0, _vue.computed)(() => {
+      const {
+        type
+      } = props;
+      return type || 'default';
+    });
+    const computeTabPosition = (0, _vue.computed)(() => {
+      const {
+        position
+      } = props;
+      return position || 'top';
+    });
+    const computeLrPosition = (0, _vue.computed)(() => {
+      const tabPosition = computeTabPosition.value;
+      return tabPosition === 'left' || tabPosition === 'right';
+    });
+    const computeLineStyle = (0, _vue.computed)(() => {
+      const {
+        lintLeft,
+        lintTop,
+        lintWidth,
+        lintHeight
+      } = reactData;
+      const lrPosition = computeLrPosition.value;
+      return lrPosition ? {
+        top: `${lintTop}px`,
+        height: `${lintHeight}px`
+      } : {
+        left: `${lintLeft}px`,
+        width: `${lintWidth}px`
+      };
+    });
+    const computeWrapperStyle = (0, _vue.computed)(() => {
+      const {
+        width,
+        height
+      } = props;
+      const stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (width) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    });
     const computeCloseOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().tabs.closeConfig, props.closeConfig);
     });
@@ -79,6 +144,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       return staticTabs.filter(item => handleFilterTab(item));
     });
+    const computeParentTabsResizeFlag = (0, _vue.computed)(() => {
+      return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null;
+    });
     const computeMaps = {};
     const $xeTabs = {
       xID,
@@ -110,49 +178,118 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return [];
     };
-    const updateTabStyle = () => {
-      (0, _vue.nextTick)(() => {
+    const checkScrolling = () => {
+      const lrPosition = computeLrPosition.value;
+      const headerWrapperEl = refHeadWrapperElem.value;
+      const headPrevEl = refHeadPrevElem.value;
+      const headNextEl = refHeadNextElem.value;
+      if (headerWrapperEl) {
         const {
-          type
-        } = props;
+          scrollLeft,
+          scrollTop,
+          clientWidth,
+          clientHeight,
+          scrollWidth,
+          scrollHeight
+        } = headerWrapperEl;
+        if (headPrevEl) {
+          if ((lrPosition ? scrollTop : scrollLeft) > 0) {
+            (0, _dom.addClass)(headPrevEl, 'scrolling--middle');
+          } else {
+            (0, _dom.removeClass)(headPrevEl, 'scrolling--middle');
+          }
+        }
+        if (headNextEl) {
+          if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
+            (0, _dom.addClass)(headNextEl, 'scrolling--middle');
+          } else {
+            (0, _dom.removeClass)(headNextEl, 'scrolling--middle');
+          }
+        }
+      }
+    };
+    const updateTabStyle = () => {
+      const handleStyle = () => {
         const {
           activeName
         } = reactData;
+        const tabType = computeTabType.value;
         const tabOptions = computeTabOptions.value;
         const tabStaticOptions = computeTabStaticOptions.value;
         const headerWrapperEl = refHeadWrapperElem.value;
+        const lrPosition = computeLrPosition.value;
         let lintWidth = 0;
+        let lintHeight = 0;
         let lintLeft = 0;
+        let lintTop = 0;
+        let sBarWidth = 0;
+        let sBarHeight = 0;
         let isOver = false;
         if (headerWrapperEl) {
           const index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, item => item.name === activeName);
           const {
             children,
+            offsetWidth,
             scrollWidth,
-            clientWidth
+            offsetHeight,
+            scrollHeight,
+            clientWidth,
+            clientHeight
           } = headerWrapperEl;
-          isOver = scrollWidth !== clientWidth;
-          if (index > -1) {
-            const tabEl = children[index];
-            const tabWidth = tabEl.clientWidth;
-            if (type) {
-              if (type === 'card') {
-                lintWidth = tabWidth + 2;
-                lintLeft = tabEl.offsetLeft;
-              } else if (type === 'border-card') {
-                lintWidth = tabWidth + 2;
-                lintLeft = tabEl.offsetLeft - 1;
+          sBarWidth = offsetWidth - clientWidth;
+          sBarHeight = offsetHeight - clientHeight;
+          if (lrPosition) {
+            isOver = scrollHeight !== clientHeight;
+            if (index > -1) {
+              const tabEl = children[index];
+              if (tabEl) {
+                const tabHeight = tabEl.clientHeight;
+                const tabWidth = tabEl.clientWidth;
+                if (tabType === 'card') {
+                  lintWidth = tabWidth;
+                  lintHeight = tabHeight;
+                  lintTop = tabEl.offsetTop;
+                } else if (tabType === 'border-card') {
+                  lintWidth = tabWidth;
+                  lintHeight = tabHeight;
+                  lintTop = tabEl.offsetTop - 1;
+                } else {
+                  lintHeight = Math.max(4, Math.floor(tabHeight * 0.6));
+                  lintTop = tabEl.offsetTop + Math.floor((tabHeight - lintHeight) / 2);
+                }
+              }
+            }
+          } else {
+            isOver = scrollWidth !== clientWidth;
+            if (index > -1) {
+              const tabEl = children[index];
+              if (tabEl) {
+                const tabWidth = tabEl.clientWidth;
+                if (tabType === 'card') {
+                  lintWidth = tabWidth + 1;
+                  lintLeft = tabEl.offsetLeft;
+                } else if (tabType === 'border-card') {
+                  lintWidth = tabWidth;
+                  lintLeft = tabEl.offsetLeft - 1;
+                } else {
+                  lintWidth = Math.max(4, Math.floor(tabWidth * 0.6));
+                  lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2);
+                }
               }
-            } else {
-              lintWidth = Math.max(4, Math.floor(tabWidth * 0.6));
-              lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2);
             }
           }
         }
+        reactData.scrollbarWidth = sBarWidth;
+        reactData.scrollbarHeight = sBarHeight;
         reactData.lintLeft = lintLeft;
+        reactData.lintTop = lintTop;
         reactData.lintWidth = lintWidth;
+        reactData.lintHeight = lintHeight;
         reactData.isTabOver = isOver;
-      });
+        checkScrolling();
+      };
+      handleStyle();
+      (0, _vue.nextTick)(handleStyle);
     };
     const dispatchEvent = (type, params, evnt) => {
       emit(type, (0, _ui.createEvent)(evnt, {
@@ -346,7 +483,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         slTimeout
       } = internalData;
-      let offsetLeft = offsetSize;
+      const lrPosition = computeLrPosition.value;
+      let offsetLeft = lrPosition ? 0 : offsetSize;
+      let offsetTop = lrPosition ? offsetSize : 0;
       let scrollCount = 6;
       let delayNum = 35;
       if (slTimeout) {
@@ -360,21 +499,41 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           if (headerWrapperEl) {
             const {
               clientWidth,
+              clientHeight,
               scrollWidth,
-              scrollLeft
+              scrollHeight,
+              scrollLeft,
+              scrollTop
             } = headerWrapperEl;
-            offsetLeft = Math.floor(offsetLeft / 2);
-            if (offsetPos > 0) {
-              if (clientWidth + scrollLeft < scrollWidth) {
-                headerWrapperEl.scrollLeft += offsetLeft;
-                delayNum -= 4;
-                internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+            if (lrPosition) {
+              offsetTop = Math.floor(offsetTop / 2);
+              if (offsetPos > 0) {
+                if (clientHeight + scrollTop < scrollHeight) {
+                  headerWrapperEl.scrollTop += offsetTop;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
+              } else {
+                if (scrollTop > 0) {
+                  headerWrapperEl.scrollTop -= offsetTop;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
               }
             } else {
-              if (scrollLeft > 0) {
-                headerWrapperEl.scrollLeft -= offsetLeft;
-                delayNum -= 4;
-                internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+              offsetLeft = Math.floor(offsetLeft / 2);
+              if (offsetPos > 0) {
+                if (clientWidth + scrollLeft < scrollWidth) {
+                  headerWrapperEl.scrollLeft += offsetLeft;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
+              } else {
+                if (scrollLeft > 0) {
+                  headerWrapperEl.scrollLeft -= offsetLeft;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
               }
             }
             updateTabStyle();
@@ -384,9 +543,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       scrollAnimate();
     };
     const handleScrollToLeft = offsetPos => {
+      const lrPosition = computeLrPosition.value;
       const headerWrapperEl = refHeadWrapperElem.value;
       if (headerWrapperEl) {
-        const offsetSize = Math.floor(headerWrapperEl.clientWidth * 0.75);
+        const {
+          clientWidth,
+          clientHeight
+        } = headerWrapperEl;
+        const offsetSize = Math.floor((lrPosition ? clientHeight : clientWidth) * 0.75);
         startScrollAnimation(offsetPos, offsetSize);
       }
     };
@@ -399,6 +563,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const scrollToTab = name => {
       const tabOptions = computeTabOptions.value;
       const tabStaticOptions = computeTabStaticOptions.value;
+      const lrPosition = computeLrPosition.value;
       return (0, _vue.nextTick)().then(() => {
         const headerWrapperEl = refHeadWrapperElem.value;
         if (headerWrapperEl) {
@@ -406,21 +571,37 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           if (index > -1) {
             const {
               scrollLeft,
+              scrollTop,
               clientWidth,
+              clientHeight,
               children
             } = headerWrapperEl;
             const tabEl = children[index];
             if (tabEl) {
-              const tabOffsetLeft = tabEl.offsetLeft;
-              const tabClientWidth = tabEl.clientWidth;
-              // 如果右侧被挡
-              const overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
-              if (overSize > 0) {
-                headerWrapperEl.scrollLeft += overSize;
-              }
-              // 如果左侧被挡，优先
-              if (tabOffsetLeft < scrollLeft) {
-                headerWrapperEl.scrollLeft = tabOffsetLeft;
+              if (lrPosition) {
+                const tabOffsetTop = tabEl.offsetTop;
+                const tabClientHeight = tabEl.clientHeight;
+                // 如果顶部被挡
+                const overSize = tabOffsetTop + tabClientHeight - (scrollTop + clientHeight);
+                if (overSize > 0) {
+                  headerWrapperEl.scrollTop += overSize;
+                }
+                // 如果底部被挡，优先
+                if (tabOffsetTop < scrollTop) {
+                  headerWrapperEl.scrollTop = tabOffsetTop;
+                }
+              } else {
+                const tabOffsetLeft = tabEl.offsetLeft;
+                const tabClientWidth = tabEl.clientWidth;
+                // 如果右侧被挡
+                const overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
+                if (overSize > 0) {
+                  headerWrapperEl.scrollLeft += overSize;
+                }
+                // 如果左侧被挡，优先
+                if (tabOffsetLeft < scrollLeft) {
+                  headerWrapperEl.scrollLeft = tabOffsetLeft;
+                }
               }
             }
           }
@@ -479,7 +660,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     Object.assign($xeTabs, tabsMethods, tabsPrivateMethods);
     const renderTabHeader = tabList => {
       const {
-        type,
         titleWidth: allTitleWidth,
         titleAlign: allTitleAlign,
         showClose,
@@ -488,28 +668,47 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       const {
         activeName,
-        lintLeft,
-        lintWidth,
+        scrollbarWidth,
+        scrollbarHeight,
         isTabOver,
         cacheTabMaps
       } = reactData;
-      const extraSlot = slots.extra;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const lrPosition = computeLrPosition.value;
+      const lineStyle = computeLineStyle.value;
+      const prefixSlot = slots.prefix;
+      const suffixSlot = slots.suffix || slots.extra;
       const closeOpts = computeCloseOpts.value;
       const closeVisibleMethod = closeOpts.visibleMethod;
       const refreshOpts = computeRefreshOpts.value;
       const refreshVisibleMethod = refreshOpts.visibleMethod;
       return (0, _vue.h)('div', {
-        class: 'vxe-tabs-header'
-      }, [isTabOver ? (0, _vue.h)('div', {
-        class: 'vxe-tabs-header--bar vxe-tabs-header--left-bar',
+        key: 'th',
+        class: ['vxe-tabs-header', `type--${tabType}`, `pos--${tabPosition}`]
+      }, [prefixSlot ? (0, _vue.h)('div', {
+        class: ['vxe-tabs-header--prefix', `type--${tabType}`, `pos--${tabPosition}`]
+      }, (0, _vn.getSlotVNs)(prefixSlot({
+        name: activeName
+      }))) : (0, _ui.renderEmptyElement)($xeTabs), isTabOver ? (0, _vue.h)('div', {
+        ref: refHeadPrevElem,
+        class: ['vxe-tabs-header--bar vxe-tabs-header--prev-bar', `type--${tabType}`, `pos--${tabPosition}`],
         onClick: scrollLeftEvent
       }, [(0, _vue.h)('span', {
-        class: (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
+        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_TOP : (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
       })]) : (0, _ui.renderEmptyElement)($xeTabs), (0, _vue.h)('div', {
-        class: 'vxe-tabs-header--wrapper'
+        class: ['vxe-tabs-header--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
       }, [(0, _vue.h)('div', {
         ref: refHeadWrapperElem,
-        class: 'vxe-tabs-header--item-wrapper'
+        class: 'vxe-tabs-header--item-wrapper',
+        style: lrPosition ? {
+          marginRight: `-${scrollbarWidth + scrollbarOffsetSize}px`,
+          paddingRight: `${scrollbarOffsetSize}px`
+        } : {
+          marginBottom: `-${scrollbarHeight + scrollbarOffsetSize}px`,
+          paddingBottom: `${scrollbarOffsetSize}px`
+        },
+        onScroll: checkScrolling
       }, tabList.map((item, index) => {
         const {
           title,
@@ -533,12 +732,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const isLoading = cacheItem ? cacheItem.loading : false;
         return (0, _vue.h)('div', {
           key: `${name}`,
-          class: ['vxe-tabs-header--item', itemAlign ? `align--${itemAlign}` : '', {
+          class: ['vxe-tabs-header--item', `type--${tabType}`, `pos--${tabPosition}`, itemAlign ? `align--${itemAlign}` : '', {
             'is--active': isActive
           }],
           style: itemWidth ? {
             width: (0, _dom.toCssUnit)(itemWidth)
-          } : null,
+          } : undefined,
           onClick(evnt) {
             clickEvent(evnt, item);
           }
@@ -555,15 +754,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, titleSlot ? callSlot(titleSlot, {
           name,
           title
-        }) : `${title}`)]), ((0, _utils.isEnableConf)(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive) ? (0, _vue.h)('div', {
-          class: 'vxe-tabs-header--refresh-btn',
+        }) : `${title}`)]), ((0, _utils.isEnableConf)(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? (0, _vue.h)('div', {
+          class: ['vxe-tabs-header--refresh-btn', {
+            'is--active': isActive
+          }],
           onClick(evnt) {
             handleRefreshTabEvent(evnt, item);
           }
         }, [(0, _vue.h)('i', {
           class: isLoading ? (0, _ui.getIcon)().TABS_TAB_REFRESH_LOADING : (0, _ui.getIcon)().TABS_TAB_REFRESH
         })]) : (0, _ui.renderEmptyElement)($xeTabs), (showClose || (0, _utils.isEnableConf)(closeConfig) || closeOpts.enabled) && (!closeVisibleMethod || closeVisibleMethod(params)) ? (0, _vue.h)('div', {
-          class: 'vxe-tabs-header--close-btn',
+          class: ['vxe-tabs-header--close-btn', {
+            'is--active': isActive
+          }],
           onClick(evnt) {
             handleCloseTabEvent(evnt, item, index, tabList);
           }
@@ -572,19 +775,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         })]) : (0, _ui.renderEmptyElement)($xeTabs)])]);
       }).concat([(0, _vue.h)('span', {
         key: 'line',
-        class: `vxe-tabs-header--active-line type--${type || 'default'}`,
-        style: {
-          left: `${lintLeft}px`,
-          width: `${lintWidth}px`
-        }
+        class: ['vxe-tabs-header--active-line', `type--${tabType}`, `pos--${tabPosition}`],
+        style: lineStyle
       })]))]), isTabOver ? (0, _vue.h)('div', {
-        class: 'vxe-tabs-header--bar vxe-tabs-header--right-bar',
+        ref: refHeadNextElem,
+        class: ['vxe-tabs-header--bar vxe-tabs-header--next-bar', `type--${tabType}`, `pos--${tabPosition}`],
         onClick: scrollRightEvent
       }, [(0, _vue.h)('span', {
-        class: (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
-      })]) : (0, _ui.renderEmptyElement)($xeTabs), extraSlot ? (0, _vue.h)('div', {
-        class: 'vxe-tabs-header--extra'
-      }, (0, _vn.getSlotVNs)(extraSlot({}))) : (0, _ui.renderEmptyElement)($xeTabs)]);
+        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_BOTTOM : (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
+      })]) : (0, _ui.renderEmptyElement)($xeTabs), suffixSlot ? (0, _vue.h)('div', {
+        class: ['vxe-tabs-header--suffix', `type--${tabType}`, `pos--${tabPosition}`]
+      }, (0, _vn.getSlotVNs)(suffixSlot({
+        name: activeName
+      }))) : (0, _ui.renderEmptyElement)($xeTabs)]);
     };
     const renderTabPane = item => {
       const {
@@ -599,64 +802,106 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return name && initNames.includes(name) ? (0, _vue.h)('div', {
         key: `${name}`,
         class: ['vxe-tabs-pane--item', {
-          'is--visible': activeName === name,
-          'has--content': !!defaultSlot
+          'is--visible': activeName === name
         }]
       }, defaultSlot ? callSlot(defaultSlot, {
         name
       }) : []) : (0, _ui.renderEmptyElement)($xeTabs);
     };
-    const renderTabContent = tabList => {
+    const renderTabContent = (tabList, activeTab) => {
       const {
         destroyOnClose
       } = props;
+      if (destroyOnClose) {
+        return [activeTab ? renderTabPane(activeTab) : (0, _ui.renderEmptyElement)($xeTabs)];
+      }
+      return tabList.map(item => renderTabPane(item));
+    };
+    const rendetTabBody = tabList => {
+      const {
+        height,
+        padding,
+        showBody
+      } = props;
       const {
         activeName
       } = reactData;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const headerpSlot = slots.header;
+      const footerSlot = slots.footer;
+      const defParams = {
+        name: activeName
+      };
       const activeDefaultTab = tabList.find(item => item.name === activeName);
-      if (destroyOnClose) {
-        return [activeDefaultTab ? renderTabPane(activeDefaultTab) : (0, _ui.renderEmptyElement)($xeTabs)];
+      let hasContent = false;
+      if (activeDefaultTab) {
+        const {
+          slots
+        } = activeDefaultTab;
+        hasContent = !!(slots && slots.default);
       }
-      return tabList.map(item => renderTabPane(item));
+      return (0, _vue.h)('div', {
+        key: 'tb',
+        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--content': showBody === false ? showBody : hasContent
+        }]
+      }, [headerpSlot ? (0, _vue.h)('div', {
+        class: 'vxe-tabs-pane--header'
+      }, callSlot(headerpSlot, defParams)) : (0, _ui.renderEmptyElement)($xeTabs), (0, _vue.h)('div', {
+        class: ['vxe-tabs-pane--body', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--padding': padding,
+          'is--height': height
+        }]
+      }, renderTabContent(tabList, activeDefaultTab)), footerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-tabs-pane--footer'
+      }, callSlot(footerSlot, defParams)) : (0, _ui.renderEmptyElement)($xeTabs)]);
     };
     const renderVN = () => {
       const {
-        type,
         height,
         padding,
         trigger
       } = props;
+      const {
+        activeName
+      } = reactData;
       const tabOptions = computeTabOptions.value;
       const tabStaticOptions = computeTabStaticOptions.value;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const wrapperStyle = computeWrapperStyle.value;
       const defaultSlot = slots.default;
-      const footerSlot = slots.footer;
       const tabList = defaultSlot ? tabStaticOptions : tabOptions;
+      const vns = [(0, _vue.h)('div', {
+        key: 'ts',
+        class: 'vxe-tabs-slots'
+      }, defaultSlot ? defaultSlot({
+        name: activeName
+      }) : [])];
+      if (tabPosition === 'right' || tabPosition === 'bottom') {
+        vns.push(rendetTabBody(tabList), renderTabHeader(tabList));
+      } else {
+        vns.push(renderTabHeader(tabList), rendetTabBody(tabList));
+      }
       return (0, _vue.h)('div', {
         ref: refElem,
-        class: ['vxe-tabs', `vxe-tabs--${type || 'default'}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
+        class: ['vxe-tabs', `pos--${tabPosition}`, `vxe-tabs--${tabType}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
           'is--padding': padding,
           'is--height': height
         }],
-        style: height ? {
-          height: (0, _dom.toCssUnit)(height)
-        } : null
-      }, [(0, _vue.h)('div', {
-        class: 'vxe-tabs-slots'
-      }, defaultSlot ? defaultSlot({}) : []), renderTabHeader(tabList), (0, _vue.h)('div', {
-        class: 'vxe-tabs-pane'
-      }, renderTabContent(tabList)), footerSlot ? (0, _vue.h)('div', {
-        class: 'vxe-tabs-footer'
-      }, callSlot(footerSlot, {})) : (0, _ui.renderEmptyElement)($xeTabs)]);
+        style: wrapperStyle
+      }, vns);
     };
+    (0, _vue.watch)(() => props.position, () => {
+      reactData.resizeFlag++;
+    });
     (0, _vue.watch)(() => props.modelValue, val => {
       addInitName(val, null);
       reactData.activeName = val;
     });
     (0, _vue.watch)(() => reactData.activeName, val => {
       scrollToTab(val);
-      (0, _vue.nextTick)(() => {
-        reactData.resizeFlag++;
-      });
     });
     const optsFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.options ? props.options.length : -1, () => {
@@ -667,7 +912,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     (0, _vue.watch)(optsFlag, () => {
       initDefaultName(props.options);
-      updateTabStyle();
+      reactData.resizeFlag++;
     });
     const stFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => reactData.staticTabs ? reactData.staticTabs.length : -1, () => {
@@ -678,21 +923,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     (0, _vue.watch)(stFlag, () => {
       initDefaultName(reactData.staticTabs);
-      updateTabStyle();
+      reactData.resizeFlag++;
+    });
+    (0, _vue.watch)(computeParentTabsResizeFlag, () => {
+      reactData.resizeFlag++;
     });
-    if ($xeParentTabs) {
-      (0, _vue.watch)(() => $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null, () => {
-        reactData.resizeFlag++;
-      });
-    }
     (0, _vue.watch)(() => reactData.resizeFlag, () => {
       (0, _vue.nextTick)(() => {
         updateTabStyle();
       });
     });
     (0, _vue.onMounted)(() => {
-      _ui.globalEvents.on($xeTabs, 'resize', updateTabStyle);
       updateTabStyle();
+      _ui.globalEvents.on($xeTabs, 'resize', updateTabStyle);
     });
     (0, _vue.onUnmounted)(() => {
       _ui.globalEvents.off($xeTabs, 'resize');