vxe-pc-ui 3.15.27 → 3.16.0

package/lib/tabs/src/tabs.js

@@ -1,1031 +0,0 @@
-"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 */