@vrx-arco/pro-layout
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
75 lines (74 loc) • 2.18 kB
JavaScript
import { defineComponent, createVNode, Fragment, mergeProps } from "vue";
import { Breadcrumb, BreadcrumbItem, Scrollbar } from "@arco-design/web-vue";
import { useRoute, useRouter } from "vue-router";
import IconApps from "@vrx-arco/icons-vue/IconApps";
import { style } from "../style/var.js";
const PageWrapper = /* @__PURE__ */ defineComponent({
name: "vrx-arco-page-wrapper",
props: {
scrollbar: {
type: Boolean,
default: false
}
},
setup: (props, {
slots
}) => {
const {
bemClass
} = style("page-wrapper");
const route = useRoute();
const router = useRouter();
const handleRoute = (name) => {
router.replace({
name
});
};
const renderContent = () => {
var _a;
if (props.scrollbar) {
return createVNode("main", {
"class": bemClass("__content--scrollbar")
}, [createVNode(Scrollbar, {
"outerClass": bemClass("__scrollbar--out"),
"class": bemClass("__scrollbar")
}, {
default: () => {
var _a2;
return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
}
})]);
}
return createVNode("main", {
"class": bemClass("__content")
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
};
return () => createVNode("section", {
"class": bemClass()
}, [createVNode("header", {
"class": bemClass("__header")
}, [createVNode(Breadcrumb, null, {
default: () => [createVNode(BreadcrumbItem, null, {
default: () => [createVNode(IconApps, {
"class": "arco-icon"
}, null)]
}), route.matched.map((item) => {
var _a;
if (!((_a = item.meta) == null ? void 0 : _a.title)) {
return createVNode(Fragment, null, null);
}
return createVNode(BreadcrumbItem, mergeProps({
"class": bemClass("__breadcrumb-item"),
"key": item.name
}, {
onClick: () => handleRoute(item.name)
}), {
default: () => [item.meta.title]
});
})]
})]), renderContent()]);
}
});
export {
PageWrapper
};