vxe-pc-ui 3.16.0 → 3.16.1

package/lib/tabs/src/tabs.js

@@ -0,0 +1,1031 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _vn = require("../../ui/src/vn");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _log = require("../../ui/src/log");
+var _loading = _interopRequireDefault(require("../../loading/src/loading"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _createComponentLog = (0, _log.createComponentLog)('tabs'),
+  warnLog = _createComponentLog.warnLog,
+  errLog = _createComponentLog.errLog;
+var scrollbarOffsetSize = 20;
+var _default2 = exports.default = /* define-vxe-component start */(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 _default() {
+        return (0, _ui.getConfig)().tabs.destroyOnClose;
+      }
+    },
+    titleWidth: [String, Number],
+    titleAlign: [String, Number],
+    type: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().tabs.type;
+      }
+    },
+    position: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().tabs.position;
+      }
+    },
+    showClose: Boolean,
+    showBody: {
+      type: Boolean,
+      default: true
+    },
+    padding: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().tabs.padding;
+      }
+    },
+    trigger: String,
+    beforeChangeMethod: Function,
+    closeConfig: Object,
+    refreshConfig: Object,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().tabs.size || (0, _ui.getConfig)().size;
+      }
+    },
+    // 已废弃
+    beforeCloseMethod: Function
+  },
+  inject: {
+    $xeParentTabs: {
+      from: '$xeTabs',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeTabs = this;
+    return {
+      $xeTabs: $xeTabs
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      staticTabs: [],
+      activeName: null,
+      initNames: [],
+      lintLeft: 0,
+      lintTop: 0,
+      lintWidth: 0,
+      lintHeight: 0,
+      scrollbarWidth: 0,
+      scrollbarHeight: 0,
+      isTabOver: false,
+      resizeFlag: 1,
+      cacheTabMaps: {}
+    };
+    var internalData = {
+      slTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeParentTabsResizeFlag: function computeParentTabsResizeFlag() {
+      var $xeTabs = this;
+      var $xeParentTabs = $xeTabs.$xeParentTabs;
+      return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null;
+    },
+    computeTabType: function computeTabType() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var type = props.type;
+      return type || 'default';
+    },
+    computeTabPosition: function computeTabPosition() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var position = props.position;
+      return position || 'top';
+    },
+    computeLrPosition: function computeLrPosition() {
+      var $xeTabs = this;
+      var tabPosition = $xeTabs.computeTabPosition;
+      return tabPosition === 'left' || tabPosition === 'right';
+    },
+    computeLineStyle: function computeLineStyle() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var lintLeft = reactData.lintLeft,
+        lintTop = reactData.lintTop,
+        lintWidth = reactData.lintWidth,
+        lintHeight = reactData.lintHeight;
+      var lrPosition = $xeTabs.computeLrPosition;
+      return lrPosition ? {
+        top: "".concat(lintTop, "px"),
+        height: "".concat(lintHeight, "px")
+      } : {
+        left: "".concat(lintLeft, "px"),
+        width: "".concat(lintWidth, "px")
+      };
+    },
+    computeWrapperStyle: function computeWrapperStyle() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var width = props.width,
+        height = props.height;
+      var stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = height === 'auto' ? '100%' : (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    },
+    computeCloseOpts: function computeCloseOpts() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      return Object.assign({}, (0, _ui.getConfig)().tabs.closeConfig, props.closeConfig);
+    },
+    computeRefreshOpts: function computeRefreshOpts() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      return Object.assign({}, (0, _ui.getConfig)().tabs.refreshConfig, props.refreshConfig);
+    },
+    computeTabOptions: function computeTabOptions() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var options = props.options;
+      return (options || []).filter(function (item) {
+        return $xeTabs.handleFilterTab(item);
+      });
+    },
+    computeTabStaticOptions: function computeTabStaticOptions() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var staticTabs = reactData.staticTabs;
+      return staticTabs.filter(function (item) {
+        return $xeTabs.handleFilterTab(item);
+      });
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeTabs = this;
+      $xeTabs.$emit(type, (0, _ui.createEvent)(evnt, {
+        $tabs: $xeTabs
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeTabs = this;
+      var _events = $xeTabs._events;
+      $xeTabs.$emit('input', value);
+      if (_events && _events.modelValue) {
+        $xeTabs.$emit('modelValue', value);
+      } else {
+        $xeTabs.$emit('model-value', value);
+      }
+    },
+    prev: function prev() {
+      var $xeTabs = this;
+      return $xeTabs.handlePrevNext(false);
+    },
+    next: function next() {
+      var $xeTabs = this;
+      return $xeTabs.handlePrevNext(true);
+    },
+    prevTab: function prevTab() {
+      var $xeTabs = this;
+      warnLog('vxe.error.delFunc', ['prevTab', 'prev']);
+      return $xeTabs.prev();
+    },
+    nextTab: function nextTab() {
+      var $xeTabs = this;
+      warnLog('vxe.error.delFunc', ['nextTab', 'next']);
+      return $xeTabs.next();
+    },
+    handleFilterTab: function handleFilterTab(item) {
+      var permissionCode = item.permissionCode;
+      if (permissionCode) {
+        if (!_ui.permission.checkVisible(permissionCode)) {
+          return false;
+        }
+      }
+      return true;
+    },
+    callSlot: function callSlot(slotFunc, params, h) {
+      var $xeTabs = this;
+      var slots = $xeTabs.$scopedSlots;
+      if (slotFunc) {
+        if (_xeUtils.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc.call($xeTabs, params, h));
+        }
+      }
+      return [];
+    },
+    checkScrolling: function checkScrolling() {
+      var $xeTabs = this;
+      var lrPosition = $xeTabs.computeLrPosition;
+      var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+      var headPrevEl = $xeTabs.$refs.refHeadPrevElem;
+      var headNextEl = $xeTabs.$refs.refHeadNextElem;
+      if (headerWrapperEl) {
+        var scrollLeft = headerWrapperEl.scrollLeft,
+          scrollTop = headerWrapperEl.scrollTop,
+          clientWidth = headerWrapperEl.clientWidth,
+          clientHeight = headerWrapperEl.clientHeight,
+          scrollWidth = headerWrapperEl.scrollWidth,
+          scrollHeight = headerWrapperEl.scrollHeight;
+        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');
+          }
+        }
+      }
+    },
+    updateTabStyle: function updateTabStyle() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var handleStyle = function handleStyle() {
+        var activeName = reactData.activeName;
+        var tabType = $xeTabs.computeTabType;
+        var tabOptions = $xeTabs.computeTabOptions;
+        var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+        var lrPosition = $xeTabs.computeLrPosition;
+        var lintWidth = 0;
+        var lintHeight = 0;
+        var lintLeft = 0;
+        var lintTop = 0;
+        var sBarWidth = 0;
+        var sBarHeight = 0;
+        var isOver = false;
+        if (headerWrapperEl) {
+          var index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, function (item) {
+            return item.name === activeName;
+          });
+          var children = headerWrapperEl.children,
+            offsetWidth = headerWrapperEl.offsetWidth,
+            scrollWidth = headerWrapperEl.scrollWidth,
+            offsetHeight = headerWrapperEl.offsetHeight,
+            scrollHeight = headerWrapperEl.scrollHeight,
+            clientWidth = headerWrapperEl.clientWidth,
+            clientHeight = headerWrapperEl.clientHeight;
+          sBarWidth = offsetWidth - clientWidth;
+          sBarHeight = offsetHeight - clientHeight;
+          if (lrPosition) {
+            isOver = scrollHeight !== clientHeight;
+            if (index > -1) {
+              var tabEl = children[index];
+              if (tabEl) {
+                var tabHeight = tabEl.clientHeight;
+                var 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) {
+              var _tabEl = children[index];
+              if (_tabEl) {
+                var _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);
+                }
+              }
+            }
+          }
+        }
+        reactData.scrollbarWidth = sBarWidth;
+        reactData.scrollbarHeight = sBarHeight;
+        reactData.lintLeft = lintLeft;
+        reactData.lintTop = lintTop;
+        reactData.lintWidth = lintWidth;
+        reactData.lintHeight = lintHeight;
+        reactData.isTabOver = isOver;
+        $xeTabs.checkScrolling();
+      };
+      handleStyle();
+      $xeTabs.$nextTick(handleStyle);
+    },
+    addInitName: function addInitName(name, evnt) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var initNames = reactData.initNames;
+      if (name && !initNames.includes(name)) {
+        $xeTabs.dispatchEvent('tab-load', {
+          name: name
+        }, evnt);
+        initNames.push(name);
+        return true;
+      }
+      return false;
+    },
+    initDefaultName: function initDefaultName(list) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      var activeName = null;
+      var nameMaps = {};
+      if (list && list.length) {
+        var validVal = false;
+        activeName = props.value;
+        list.forEach(function (item) {
+          var _ref = item || {},
+            name = _ref.name,
+            preload = _ref.preload;
+          if (name) {
+            nameMaps["".concat(name)] = {
+              loading: false
+            };
+            if (activeName === name) {
+              validVal = true;
+            }
+            if (preload) {
+              $xeTabs.addInitName(name, null);
+            }
+          }
+        });
+        if (!validVal) {
+          activeName = list[0].name;
+          $xeTabs.addInitName(activeName, null);
+          $xeTabs.emitModel(activeName);
+        }
+      }
+      reactData.activeName = activeName;
+      reactData.cacheTabMaps = nameMaps;
+    },
+    clickEvent: function clickEvent(evnt, item) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      var trigger = props.trigger;
+      var beforeMethod = props.beforeChangeMethod || (0, _ui.getConfig)().tabs.beforeChangeMethod;
+      var activeName = reactData.activeName;
+      var name = item.name;
+      var value = name;
+      $xeTabs.dispatchEvent('tab-click', {
+        name: name
+      }, evnt);
+      if (trigger === 'manual') {
+        return;
+      }
+      if (name !== activeName) {
+        Promise.resolve(!beforeMethod || beforeMethod({
+          $tabs: $xeTabs,
+          name: name,
+          oldName: activeName,
+          newName: name,
+          option: item
+        })).then(function (status) {
+          if (status) {
+            reactData.activeName = name;
+            $xeTabs.emitModel(value);
+            $xeTabs.addInitName(name, evnt);
+            $xeTabs.dispatchEvent('change', {
+              value: value,
+              name: name,
+              oldName: activeName,
+              newName: name,
+              option: item
+            }, evnt);
+            $xeTabs.dispatchEvent('tab-change', {
+              value: value,
+              name: name,
+              oldName: activeName,
+              newName: name,
+              option: item
+            }, evnt);
+          } else {
+            $xeTabs.dispatchEvent('tab-change-fail', {
+              value: value,
+              name: name,
+              oldName: activeName,
+              newName: name,
+              option: item
+            }, evnt);
+          }
+        }).catch(function () {
+          $xeTabs.dispatchEvent('tab-change-fail', {
+            value: value,
+            name: name,
+            oldName: activeName,
+            newName: name,
+            option: item
+          }, evnt);
+        });
+      }
+    },
+    handleRefreshTabEvent: function handleRefreshTabEvent(evnt, item) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      evnt.stopPropagation();
+      var activeName = reactData.activeName,
+        cacheTabMaps = reactData.cacheTabMaps;
+      var name = item.name;
+      var refreshOpts = $xeTabs.computeRefreshOpts;
+      var queryMethod = refreshOpts.queryMethod;
+      var cacheItem = name ? cacheTabMaps["".concat(name)] : null;
+      if (cacheItem) {
+        if (cacheItem.loading) {
+          return;
+        }
+        if (queryMethod) {
+          cacheItem.loading = true;
+          Promise.resolve(queryMethod({
+            $tabs: $xeTabs,
+            value: activeName,
+            name: name,
+            option: item
+          })).finally(function () {
+            cacheItem.loading = false;
+          });
+        } else {
+          errLog('vxe.error.notFunc', ['refresh-config.queryMethod']);
+        }
+      }
+    },
+    handleCloseTabEvent: function handleCloseTabEvent(evnt, item, index, list) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      evnt.stopPropagation();
+      var activeName = reactData.activeName;
+      var closeOpts = $xeTabs.computeCloseOpts;
+      var beforeMethod = closeOpts.beforeMethod || props.beforeCloseMethod || (0, _ui.getConfig)().tabs.beforeCloseMethod;
+      var name = item.name;
+      var value = activeName;
+      var nextName = value;
+      if (activeName === name) {
+        var nextItem = index < list.length - 1 ? list[index + 1] : list[index - 1];
+        nextName = nextItem ? nextItem.name : null;
+      }
+      Promise.resolve(!beforeMethod || beforeMethod({
+        $tabs: $xeTabs,
+        value: value,
+        name: name,
+        nextName: nextName,
+        option: item
+      })).then(function (status) {
+        if (status) {
+          $xeTabs.dispatchEvent('tab-close', {
+            value: value,
+            name: name,
+            nextName: nextName
+          }, evnt);
+        } else {
+          $xeTabs.dispatchEvent('tab-close-fail', {
+            value: value,
+            name: name,
+            nextName: nextName
+          }, evnt);
+        }
+      }).catch(function () {
+        $xeTabs.dispatchEvent('tab-close-fail', {
+          value: value,
+          name: name,
+          nextName: nextName
+        }, evnt);
+      });
+    },
+    startScrollAnimation: function startScrollAnimation(offsetPos, offsetSize) {
+      var $xeTabs = this;
+      var internalData = $xeTabs.internalData;
+      var slTimeout = internalData.slTimeout;
+      var lrPosition = $xeTabs.computeLrPosition;
+      var offsetLeft = lrPosition ? 0 : offsetSize;
+      var offsetTop = lrPosition ? offsetSize : 0;
+      var scrollCount = 6;
+      var delayNum = 35;
+      if (slTimeout) {
+        clearTimeout(slTimeout);
+        internalData.slTimeout = undefined;
+      }
+      var _scrollAnimate = function scrollAnimate() {
+        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+        if (scrollCount > 0) {
+          scrollCount--;
+          if (headerWrapperEl) {
+            var clientWidth = headerWrapperEl.clientWidth,
+              clientHeight = headerWrapperEl.clientHeight,
+              scrollWidth = headerWrapperEl.scrollWidth,
+              scrollHeight = headerWrapperEl.scrollHeight,
+              scrollLeft = headerWrapperEl.scrollLeft,
+              scrollTop = headerWrapperEl.scrollTop;
+            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 {
+              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);
+                }
+              }
+            }
+            $xeTabs.updateTabStyle();
+          }
+        }
+      };
+      _scrollAnimate();
+    },
+    handleScrollToLeft: function handleScrollToLeft(offsetPos) {
+      var $xeTabs = this;
+      var lrPosition = $xeTabs.computeLrPosition;
+      var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+      if (headerWrapperEl) {
+        var clientWidth = headerWrapperEl.clientWidth,
+          clientHeight = headerWrapperEl.clientHeight;
+        var offsetSize = Math.floor((lrPosition ? clientHeight : clientWidth) * 0.75);
+        $xeTabs.startScrollAnimation(offsetPos, offsetSize);
+      }
+    },
+    scrollLeftEvent: function scrollLeftEvent() {
+      var $xeTabs = this;
+      $xeTabs.handleScrollToLeft(-1);
+    },
+    scrollRightEvent: function scrollRightEvent() {
+      var $xeTabs = this;
+      $xeTabs.handleScrollToLeft(1);
+    },
+    scrollToTab: function scrollToTab(name) {
+      var $xeTabs = this;
+      var tabOptions = $xeTabs.computeTabOptions;
+      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+      var lrPosition = $xeTabs.computeLrPosition;
+      return $xeTabs.$nextTick().then(function () {
+        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+        if (headerWrapperEl) {
+          var index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, function (item) {
+            return item.name === name;
+          });
+          if (index > -1) {
+            var scrollLeft = headerWrapperEl.scrollLeft,
+              scrollTop = headerWrapperEl.scrollTop,
+              clientWidth = headerWrapperEl.clientWidth,
+              clientHeight = headerWrapperEl.clientHeight,
+              children = headerWrapperEl.children;
+            var tabEl = children[index];
+            if (tabEl) {
+              if (lrPosition) {
+                var tabOffsetTop = tabEl.offsetTop;
+                var tabClientHeight = tabEl.clientHeight;
+                // 如果顶部被挡
+                var overSize = tabOffsetTop + tabClientHeight - (scrollTop + clientHeight);
+                if (overSize > 0) {
+                  headerWrapperEl.scrollTop += overSize;
+                }
+                // 如果底部被挡，优先
+                if (tabOffsetTop < scrollTop) {
+                  headerWrapperEl.scrollTop = tabOffsetTop;
+                }
+              } else {
+                var tabOffsetLeft = tabEl.offsetLeft;
+                var tabClientWidth = tabEl.clientWidth;
+                // 如果右侧被挡
+                var _overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
+                if (_overSize > 0) {
+                  headerWrapperEl.scrollLeft += _overSize;
+                }
+                // 如果左侧被挡，优先
+                if (tabOffsetLeft < scrollLeft) {
+                  headerWrapperEl.scrollLeft = tabOffsetLeft;
+                }
+              }
+            }
+          }
+          $xeTabs.updateTabStyle();
+        }
+      });
+    },
+    handlePrevNext: function handlePrevNext(isNext) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var activeName = reactData.activeName;
+      var tabOptions = $xeTabs.computeTabOptions;
+      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+      var list = tabStaticOptions.length ? tabStaticOptions : tabOptions;
+      var index = _xeUtils.default.findIndexOf(list, function (item) {
+        return item.name === activeName;
+      });
+      if (index > -1) {
+        var item = null;
+        if (isNext) {
+          if (index < list.length - 1) {
+            item = list[index + 1];
+          }
+        } else {
+          if (index > 0) {
+            item = list[index - 1];
+          }
+        }
+        if (item) {
+          var name = item.name;
+          var value = name;
+          reactData.activeName = name;
+          $xeTabs.emitModel(value);
+          $xeTabs.addInitName(name, null);
+        }
+      }
+      return $xeTabs.$nextTick();
+    },
+    //
+    // Render
+    //
+    renderTabHeader: function renderTabHeader(h, tabList) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var slots = $xeTabs.$scopedSlots;
+      var reactData = $xeTabs.reactData;
+      var allTitleWidth = props.titleWidth,
+        allTitleAlign = props.titleAlign,
+        showClose = props.showClose,
+        closeConfig = props.closeConfig,
+        refreshConfig = props.refreshConfig;
+      var activeName = reactData.activeName,
+        scrollbarWidth = reactData.scrollbarWidth,
+        scrollbarHeight = reactData.scrollbarHeight,
+        isTabOver = reactData.isTabOver,
+        cacheTabMaps = reactData.cacheTabMaps;
+      var tabType = $xeTabs.computeTabType;
+      var tabPosition = $xeTabs.computeTabPosition;
+      var lrPosition = $xeTabs.computeLrPosition;
+      var lineStyle = $xeTabs.computeLineStyle;
+      var tabPrefixSlot = slots.tabPrefix || slots['tab-prefix'] || slots.prefix;
+      var tabSuffixSlot = slots.tabSuffix || slots['tab-suffix'] || slots.suffix || slots.extra;
+      var closeOpts = $xeTabs.computeCloseOpts;
+      var closeVisibleMethod = closeOpts.visibleMethod;
+      var refreshOpts = $xeTabs.computeRefreshOpts;
+      var refreshVisibleMethod = refreshOpts.visibleMethod;
+      return h('div', {
+        key: 'th',
+        class: ['vxe-tabs-header', "type--".concat(tabType), "pos--".concat(tabPosition)]
+      }, [tabPrefixSlot ? h('div', {
+        class: ['vxe-tabs-header--prefix', "type--".concat(tabType), "pos--".concat(tabPosition)]
+      }, $xeTabs.callSlot(tabPrefixSlot, {
+        name: activeName
+      }, h)) : (0, _ui.renderEmptyElement)($xeTabs), isTabOver ? h('div', {
+        ref: 'refHeadPrevElem',
+        class: ['vxe-tabs-header--bar vxe-tabs-header--prev-bar', "type--".concat(tabType), "pos--".concat(tabPosition)],
+        on: {
+          click: $xeTabs.scrollLeftEvent
+        }
+      }, [h('span', {
+        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_TOP : (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
+      })]) : (0, _ui.renderEmptyElement)($xeTabs), h('div', {
+        class: ['vxe-tabs-header--wrapper', "type--".concat(tabType), "pos--".concat(tabPosition)]
+      }, [h('div', {
+        ref: 'refHeadWrapperElem',
+        class: 'vxe-tabs-header--item-wrapper',
+        style: lrPosition ? {
+          marginRight: "-".concat(scrollbarWidth + scrollbarOffsetSize, "px"),
+          paddingRight: "".concat(scrollbarOffsetSize, "px")
+        } : {
+          marginBottom: "-".concat(scrollbarHeight + scrollbarOffsetSize, "px"),
+          paddingBottom: "".concat(scrollbarOffsetSize, "px")
+        },
+        on: {
+          scroll: $xeTabs.checkScrolling
+        }
+      }, tabList.map(function (item, index) {
+        var title = item.title,
+          titleWidth = item.titleWidth,
+          titleAlign = item.titleAlign,
+          icon = item.icon,
+          name = item.name;
+        var itemSlots = item.slots || {};
+        var titleSlot = itemSlots.title || itemSlots.tab;
+        var titlePrefixSlot = itemSlots.titlePrefix || itemSlots['title-prefix'];
+        var titleSuffixSlot = itemSlots.titleSuffix || itemSlots['title-suffix'];
+        var itemWidth = titleWidth || allTitleWidth;
+        var itemAlign = titleAlign || allTitleAlign;
+        var params = {
+          $tabs: $xeTabs,
+          value: activeName,
+          name: name,
+          option: item
+        };
+        var isActive = activeName === name;
+        var cacheItem = name ? cacheTabMaps["".concat(name)] : null;
+        var isLoading = cacheItem ? cacheItem.loading : false;
+        return h('div', {
+          key: "".concat(name),
+          class: ['vxe-tabs-header--item', "type--".concat(tabType), "pos--".concat(tabPosition), itemAlign ? "align--".concat(itemAlign) : '', {
+            'is--active': isActive
+          }],
+          style: itemWidth ? {
+            width: (0, _dom.toCssUnit)(itemWidth)
+          } : undefined,
+          on: {
+            click: function click(evnt) {
+              $xeTabs.clickEvent(evnt, item);
+            }
+          }
+        }, [h('div', {
+          class: 'vxe-tabs-header--item-inner'
+        }, [h('div', {
+          class: 'vxe-tabs-header--item-content'
+        }, [icon ? h('span', {
+          class: 'vxe-tabs-header--item-icon'
+        }, [h('i', {
+          class: icon
+        })]) : (0, _ui.renderEmptyElement)($xeTabs), titlePrefixSlot ? h('span', {
+          class: 'vxe-tabs-header--item-prefix'
+        }, $xeTabs.callSlot(titlePrefixSlot, {
+          name: name,
+          title: title
+        }, h)) : (0, _ui.renderEmptyElement)($xeTabs), h('span', {
+          class: 'vxe-tabs-header--item-name'
+        }, titleSlot ? $xeTabs.callSlot(titleSlot, {
+          name: name,
+          title: title
+        }, h) : "".concat(title)), titleSuffixSlot ? h('span', {
+          class: 'vxe-tabs-header--item-suffix'
+        }, $xeTabs.callSlot(titleSuffixSlot, {
+          name: name,
+          title: title
+        }, h)) : (0, _ui.renderEmptyElement)($xeTabs)]), ((0, _utils.isEnableConf)(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? h('div', {
+          class: ['vxe-tabs-header--refresh-btn', {
+            'is--active': isActive,
+            'is--loading': isLoading,
+            'is--disabled': isLoading
+          }],
+          on: {
+            click: function click(evnt) {
+              $xeTabs.handleRefreshTabEvent(evnt, item);
+            }
+          }
+        }, [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)) ? h('div', {
+          class: ['vxe-tabs-header--close-btn', {
+            'is--active': isActive
+          }],
+          on: {
+            click: function click(evnt) {
+              $xeTabs.handleCloseTabEvent(evnt, item, index, tabList);
+            }
+          }
+        }, [h('i', {
+          class: (0, _ui.getIcon)().TABS_TAB_CLOSE
+        })]) : (0, _ui.renderEmptyElement)($xeTabs)])]);
+      }).concat([h('span', {
+        key: 'line',
+        class: ['vxe-tabs-header--active-line', "type--".concat(tabType), "pos--".concat(tabPosition)],
+        style: lineStyle
+      })]))]), isTabOver ? h('div', {
+        ref: 'refHeadNextElem',
+        class: ['vxe-tabs-header--bar vxe-tabs-header--next-bar', "type--".concat(tabType), "pos--".concat(tabPosition)],
+        on: {
+          click: $xeTabs.scrollRightEvent
+        }
+      }, [h('span', {
+        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_BOTTOM : (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
+      })]) : (0, _ui.renderEmptyElement)($xeTabs), tabSuffixSlot ? h('div', {
+        class: ['vxe-tabs-header--suffix', "type--".concat(tabType), "pos--".concat(tabPosition)]
+      }, $xeTabs.callSlot(tabSuffixSlot, {
+        name: activeName
+      }, h)) : (0, _ui.renderEmptyElement)($xeTabs)]);
+    },
+    renderTabPane: function renderTabPane(h, item) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var initNames = reactData.initNames,
+        activeName = reactData.activeName;
+      var name = item.name,
+        slots = item.slots;
+      var defaultSlot = slots ? slots.default : null;
+      return name && initNames.includes(name) ? h('div', {
+        key: "".concat(name),
+        class: ['vxe-tabs-pane--item', {
+          'is--visible': activeName === name
+        }]
+      }, defaultSlot ? $xeTabs.callSlot(defaultSlot, {
+        name: name
+      }, h) : []) : (0, _ui.renderEmptyElement)($xeTabs);
+    },
+    renderTabContent: function renderTabContent(h, tabList) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      var destroyOnClose = props.destroyOnClose;
+      var activeName = reactData.activeName;
+      if (destroyOnClose) {
+        var activeTab = tabList.find(function (item) {
+          return item.name === activeName;
+        });
+        return [activeTab ? $xeTabs.renderTabPane(h, activeTab) : (0, _ui.renderEmptyElement)($xeTabs)];
+      }
+      return tabList.map(function (item) {
+        return $xeTabs.renderTabPane(h, item);
+      });
+    },
+    rendetTabBody: function rendetTabBody(h, tabList) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var slots = $xeTabs.$scopedSlots;
+      var reactData = $xeTabs.reactData;
+      var height = props.height,
+        padding = props.padding,
+        showBody = props.showBody;
+      var activeName = reactData.activeName,
+        cacheTabMaps = reactData.cacheTabMaps;
+      var vSize = $xeTabs.computeSize;
+      var tabType = $xeTabs.computeTabType;
+      var tabPosition = $xeTabs.computeTabPosition;
+      var refreshOpts = $xeTabs.computeRefreshOpts;
+      var showLoading = refreshOpts.showLoading;
+      var headerpSlot = slots.header;
+      var footerSlot = slots.footer;
+      if (!showBody) {
+        return (0, _ui.renderEmptyElement)($xeTabs);
+      }
+      var cacheItem = activeName ? cacheTabMaps["".concat(activeName)] : null;
+      var isLoading = cacheItem ? cacheItem.loading : false;
+      var defParams = {
+        name: activeName
+      };
+      return h('div', {
+        key: 'tb',
+        class: ['vxe-tabs-pane--wrapper', "type--".concat(tabType), "pos--".concat(tabPosition), {
+          'is--content': showBody
+        }]
+      }, [headerpSlot ? h('div', {
+        class: 'vxe-tabs-pane--header'
+      }, $xeTabs.callSlot(headerpSlot, defParams, h)) : (0, _ui.renderEmptyElement)($xeTabs), h('div', {
+        class: ['vxe-tabs-pane--body', "type--".concat(tabType), "pos--".concat(tabPosition), _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--padding', padding), 'is--height', height)]
+      }, $xeTabs.renderTabContent(h, tabList)), footerSlot ? h('div', {
+        class: 'vxe-tabs-pane--footer'
+      }, $xeTabs.callSlot(footerSlot, defParams, h)) : (0, _ui.renderEmptyElement)($xeTabs), showLoading && isLoading ? (0, _ui.renderEmptyElement)($xeTabs) : h(_loading.default, {
+        class: 'vxe-tabs--loading',
+        props: {
+          value: isLoading
+        }
+      })]);
+    },
+    renderVN: function renderVN(h) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var slots = $xeTabs.$scopedSlots;
+      var reactData = $xeTabs.reactData;
+      var height = props.height,
+        padding = props.padding,
+        trigger = props.trigger;
+      var activeName = reactData.activeName;
+      var vSize = $xeTabs.computeSize;
+      var tabOptions = $xeTabs.computeTabOptions;
+      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+      var tabType = $xeTabs.computeTabType;
+      var tabPosition = $xeTabs.computeTabPosition;
+      var wrapperStyle = $xeTabs.computeWrapperStyle;
+      var defaultSlot = slots.default;
+      var tabList = defaultSlot ? tabStaticOptions : tabOptions;
+      var vns = [h('div', {
+        key: 'ts',
+        class: 'vxe-tabs-slots'
+      }, defaultSlot ? defaultSlot({
+        name: activeName
+      }) : [])];
+      if (tabPosition === 'right' || tabPosition === 'bottom') {
+        vns.push($xeTabs.rendetTabBody(h, tabList), $xeTabs.renderTabHeader(h, tabList));
+      } else {
+        vns.push($xeTabs.renderTabHeader(h, tabList), $xeTabs.rendetTabBody(h, tabList));
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-tabs', "pos--".concat(tabPosition), "vxe-tabs--".concat(tabType), "trigger--".concat(trigger === 'manual' ? 'trigger' : 'default'), _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--padding', padding), 'is--height', height)],
+        style: wrapperStyle
+      }, vns);
+    }
+  },
+  watch: {
+    position: function position() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      reactData.resizeFlag++;
+    },
+    value: function value(val) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.addInitName(val, null);
+      reactData.activeName = val;
+    },
+    'reactData.activeName': function reactDataActiveName(val) {
+      var $xeTabs = this;
+      $xeTabs.scrollToTab(val);
+    },
+    options: function options() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.initDefaultName(props.options);
+      reactData.resizeFlag++;
+    },
+    'reactData.staticTabs': function reactDataStaticTabs() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.initDefaultName(reactData.staticTabs);
+      reactData.resizeFlag++;
+    },
+    computeParentTabsResizeFlag: function computeParentTabsResizeFlag() {
+      var $xeTabs = this;
+      $xeTabs.$nextTick(function () {
+        $xeTabs.updateTabStyle();
+      });
+    }
+  },
+  created: function created() {
+    var $xeTabs = this;
+    var props = $xeTabs;
+    var reactData = $xeTabs.reactData;
+    $xeTabs.addInitName(props.value, null);
+    $xeTabs.initDefaultName(reactData.staticTabs.length ? reactData.staticTabs : props.options);
+  },
+  mounted: function mounted() {
+    var $xeTabs = this;
+    $xeTabs.updateTabStyle();
+    _ui.globalEvents.on($xeTabs, 'resize', $xeTabs.updateTabStyle);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeTabs = this;
+    _ui.globalEvents.off($xeTabs, 'resize');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */