@vrx-arco/pro-layout/dist/ProLayout/index.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const use = require("@vrx-arco/use");
const vueRouter = require("vue-router");
const core = require("@vueuse/core");
const _var = require("../style/var.js");
const index = require("./components/NavBar/index.js");
const Menu = require("./components/Menu/Menu.js");
const ProLayout = /* @__PURE__ */ vue.defineComponent({
  name: "vrx-arco-pro-layout",
  props: {
    /**
     * 基于路由信息生成的菜单
     */
    menus: {
      type: Array,
      default: () => []
    },
    /**
     * 标题
     */
    title: String,
    /**
     * logo
     */
    logo: String,
    /**
     * 布局的全局加载状态
     */
    loading: {
      type: Boolean,
      default: false
    }
  },
  slots: Object,
  setup: (props, {
    slots
  }) => {
    const {
      bemClass
    } = _var.style("pro-layout");
    const breakpoints = use.useShareBreakpoints();
    const isSmallerLg = breakpoints.smaller("lg");
    const [menuModelVisible, setMenuModelVisible] = core.useToggle(false);
    return () => {
      const {
        title,
        logo,
        menus,
        loading
      } = props;
      return vue.createVNode(webVue.Spin, {
        "loading": loading,
        "class": bemClass("__spin"),
        "size": 30
      }, {
        default: () => [vue.createVNode(webVue.Layout, {
          "class": bemClass()
        }, {
          default: () => [vue.createVNode(webVue.LayoutHeader, {
            "class": bemClass("__header")
          }, {
            default: () => [vue.createVNode(index.NavBar, {
              "title": title,
              "logo": logo,
              "onMenuClick": () => {
                setMenuModelVisible(true);
              }
            }, {
              default: () => {
                var _a;
                return [(_a = slots.headerToolbox) == null ? void 0 : _a.call(slots)];
              },
              logo: slots.logo,
              title: slots.title,
              logoContainer: slots.logoContainer,
              content: slots.navContent
            })]
          }), vue.createVNode(webVue.LayoutContent, {
            "class": bemClass("__wrap-container")
          }, {
            default: () => [vue.createVNode(webVue.Layout, {
              "class": bemClass("__wrap")
            }, {
              default: () => [isSmallerLg.value ? vue.createVNode(webVue.Drawer, {
                "class": bemClass("__smaller-menu-drawer"),
                "placement": "left",
                "visible": menuModelVisible.value,
                "onUpdate:visible": ($event) => menuModelVisible.value = $event,
                "footer": false,
                "header": false,
                "maskClosable": true,
                "closable": false
              }, {
                default: () => [vue.createVNode(webVue.Scrollbar, {
                  "outerClass": bemClass("__menu-scrollbar")
                }, {
                  default: () => [vue.createVNode(Menu.ProMenu, {
                    "menu": menus
                  }, {
                    icon: slots.menuIcon
                  })]
                })]
              }) : vue.createVNode(webVue.LayoutSider, {
                "breakpoint": "xl",
                "collapsible": true
              }, {
                default: () => [vue.createVNode(webVue.Scrollbar, {
                  "outerClass": bemClass("__menu-scrollbar")
                }, {
                  default: () => [vue.createVNode(Menu.ProMenu, {
                    "menu": menus
                  }, {
                    icon: slots.menuIcon
                  })]
                })]
              }), vue.createVNode(webVue.LayoutContent, {
                "class": bemClass("__content")
              }, {
                default: () => {
                  var _a;
                  return [((_a = slots.default) == null ? void 0 : _a.call(slots)) || vue.createVNode(vueRouter.RouterView, null, null)];
                }
              })]
            })]
          })]
        })]
      });
    };
  }
});
exports.ProLayout = ProLayout;