mt-ui-components-vue3/es/ProLayout/Basic/Header.js

玛果添实UI组件库(Vue3)

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import { baseHeaderProps, TopNavHeader } from '../TopHeader';
import PropTypes from "ant-design-vue/es/_util/vue-types";
import { defineComponent, computed, toRefs } from 'vue';
import { useRouteContext } from '../RouteContext';
import { Layout } from 'ant-design-vue';
export var headerViewProps = _objectSpread(_objectSpread({}, baseHeaderProps), {}, {
  headerRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  headerTitleRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  headerContentRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  hasSiderMenu: PropTypes.looseBool,
  siderWidth: PropTypes.number.def(208)
});
export default defineComponent({
  name: 'HeaderView',
  inheritAttrs: false,
  props: headerViewProps,
  setup: function setup(props) {
    var _toRefs = toRefs(props),
      prefixCls = _toRefs.prefixCls,
      fixedHeader = _toRefs.fixedHeader,
      hasSiderMenu = _toRefs.hasSiderMenu,
      headerHeight = _toRefs.headerHeight,
      layout = _toRefs.layout,
      theme = _toRefs.theme,
      onCollapse = _toRefs.onCollapse;
    var context = useRouteContext();
    var needFixedHeader = computed(function () {
      return fixedHeader.value || context.fixedHeader;
    });
    var isMix = computed(function () {
      return layout.value === 'mix';
    });
    var isTop = computed(function () {
      return layout.value === 'top';
    });
    var needSettingWidth = computed(function () {
      return needFixedHeader.value && hasSiderMenu.value && !isTop.value;
    });
    var className = computed(function () {
      var _ref;
      return _ref = {}, _defineProperty(_ref, "".concat(prefixCls.value, "-fixed-header"), needFixedHeader.value), _defineProperty(_ref, "".concat(prefixCls.value, "-top-menu"), isTop.value), _ref;
    });
    var renderContent = function renderContent() {
      var defaultDom = _createVNode(TopNavHeader, _objectSpread(_objectSpread({
        "theme": theme.value,
        "mode": "horizontal"
      }, props), {}, {
        "onCollapse": onCollapse.value,
        "menuData": context.menuData
      }), null);
      if (props.headerRender) {
        return props.headerRender(props, defaultDom);
      }
      return defaultDom;
    };
    var right = computed(function () {
      return needFixedHeader.value ? 0 : undefined;
    });
    return function () {
      return _createVNode(_Fragment, null, [needFixedHeader.value && _createVNode(Layout.Header, {
        "style": {
          height: "".concat(headerHeight.value, "px"),
          lineHeight: "".concat(headerHeight.value, "px"),
          background: 'transparent'
        }
      }, null), _createVNode(Layout.Header, {
        "style": {
          padding: 0,
          height: "".concat(headerHeight.value, "px"),
          lineHeight: "".concat(headerHeight.value, "px"),
          width: '100%',
          zIndex: 100,
          right: right.value
        },
        "class": className.value
      }, {
        default: function _default() {
          return [renderContent()];
        }
      })]);
    };
  }
});