mt-ui-components-vue3/es/Tabs/tabs.me.js

玛果添实UI组件库(Vue3)

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
import { Tabs } from 'ant-design-vue';
import { tabsProps } from './tabsTypes';
import { ref, watch, defineComponent } from 'vue';
import { useElementSize } from '@vueuse/core';
import useConfigInject from "ant-design-vue/es/config-provider/hooks/useConfigInject";
import useStyle from "./style/index.style";
import classNames from "ant-design-vue/es/_util/classNames";
var jTabsProps = function jTabsProps() {
  return _objectSpread(_objectSpread({}, tabsProps), {}, {
    style: {
      type: Object,
      default: undefined
    }
  });
};
var JTabs = defineComponent({
  name: 'Tabs',
  props: jTabsProps(),
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
      slots = _ref.slots,
      expose = _ref.expose;
    var renderArr = Object.keys(slots).filter(function (item) {
      return !['centerExtra'].includes(item);
    });
    var jetTabs = ref();
    var content = ref();
    var centerExtraWidth = ref();
    var _useElementSize = useElementSize(jetTabs),
      width = _useElementSize.width;
    watch(width, function () {
      if (jetTabs.value) {
        centerExtraWidth.value = jetTabs.value.querySelector('.ant-tabs-nav-wrap').clientWidth - jetTabs.value.querySelector('.ant-tabs-nav-list').clientWidth - 10 + 'px';
        content.value = jetTabs.value.querySelector('.ant-tabs-nav-wrap');
      }
    }, {
      immediate: true
    });
    var _useConfigInject = useConfigInject('j-tabs', props),
      prefixCls = _useConfigInject.prefixCls;
    var _useStyle = useStyle(prefixCls),
      _useStyle2 = _slicedToArray(_useStyle, 2),
      wrapSSR = _useStyle2[0],
      hashId = _useStyle2[1];
    var prefixClsValue = prefixCls.value;
    var rootCls = classNames(prefixClsValue, _defineProperty({}, hashId.value, true));
    console.log('renderArr-----', renderArr);
    return function () {
      return wrapSSR(_createVNode("div", {
        "ref": jetTabs,
        "class": rootCls
      }, [_createVNode(Tabs, props, {
        default: function _default(scope) {
          return slots.default && slots.default({
            scope: scope
          });
        }
      }), content.value && _createVNode(_resolveComponent("teleport"), {
        "to": content.value
      }, {
        default: function _default() {
          return [_createVNode("div", {
            "class": "center-extra-content",
            "style": "width: ".concat(centerExtraWidth.value)
          }, [slots.centerExtra && slots.centerExtra()])];
        }
      })]));
    };
  }
});
export default JTabs;