plus-pro-components
Version:
Page level components developed based on Element Plus.
209 lines (206 loc) • 8.64 kB
JavaScript
import { defineComponent, ref, computed, onMounted, openBlock, createBlock, unref, normalizeClass, normalizeStyle, withCtx, createCommentVNode, normalizeProps, mergeProps, createSlots, renderSlot, guardReactiveProps, createVNode, createElementVNode, createElementBlock } from 'vue';
import { PlusBreadcrumb } from '../../breadcrumb/index.mjs';
import { PlusSidebar } from '../../sidebar/index.mjs';
import { PlusHeader } from '../../header/index.mjs';
import '../../utils/index.mjs';
import { ElContainer, ElMain, ElScrollbar, ElBacktop } from 'element-plus';
import { isPlainObject } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-layout-main" };
const _hoisted_2 = {
key: 0,
class: "plus-layout-extra"
};
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusLayout"
},
__name: "index",
props: {
hasSidebar: { type: Boolean, default: true },
hasHeader: { type: Boolean, default: true },
hasBreadcrumb: { type: Boolean, default: true },
sidebarProps: { default: void 0 },
headerProps: { default: void 0 },
breadcrumbProps: { default: void 0 },
scrollbarProps: { default: () => ({
always: true
}) },
backtop: { type: [Boolean, Object], default: true }
},
setup(__props, { expose: __expose }) {
const props = __props;
const PlusBreadcrumb$1 = PlusBreadcrumb;
const PlusSidebar$1 = PlusSidebar;
const PlusHeader$1 = PlusHeader;
const height = ref("100%");
const collapse = ref(false);
const plusSidebarInstance = ref();
const plusBreadcrumbInstance = ref();
const backtopProps = computed(
() => isPlainObject(props.backtop) ? props.backtop : {}
);
const setHeight = () => {
var _a;
if (props.hasBreadcrumb && ((_a = plusBreadcrumbInstance.value) == null ? void 0 : _a.$el)) {
requestAnimationFrame(() => {
var _a2, _b;
const bottom = (_b = (_a2 = plusBreadcrumbInstance.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.getBoundingClientRect().bottom;
height.value = `calc(100% - ${bottom}px + var(--plus-header-height))`;
});
}
};
onMounted(() => {
setHeight();
});
__expose({
plusSidebarInstance
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElContainer), {
class: normalizeClass(["plus-layout", { collapse: collapse.value }]),
style: normalizeStyle(!_ctx.hasHeader ? "--plus-header-height: 0px" : void 0)
}, {
default: withCtx(() => [
createCommentVNode(" \u5934\u90E8 "),
_ctx.hasHeader ? (openBlock(), createBlock(
unref(PlusHeader$1),
normalizeProps(mergeProps({ key: 0 }, _ctx.headerProps)),
createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["header-left"] ? {
name: "header-left",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "header-left", normalizeProps(guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots["header-right"] ? {
name: "header-right",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "header-right", normalizeProps(guardReactiveProps(data)))
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : createCommentVNode("v-if", true),
createVNode(unref(ElContainer), { class: "plus-layout-main-wrapper" }, {
default: withCtx(() => [
createCommentVNode(" \u4FA7\u8FB9\u680F "),
_ctx.hasSidebar ? (openBlock(), createBlock(unref(PlusSidebar$1), mergeProps({ key: 0 }, _ctx.sidebarProps, {
ref_key: "plusSidebarInstance",
ref: plusSidebarInstance,
collapse: collapse.value,
"onUpdate:collapse": _cache[0] || (_cache[0] = ($event) => collapse.value = $event)
}), createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["sidebar-extra"] ? {
name: "sidebar-extra",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-extra", normalizeProps(guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots["sidebar-item"] ? {
name: "sidebar-item",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-item", normalizeProps(guardReactiveProps(data)))
]),
key: "1"
} : void 0,
_ctx.$slots["sidebar-sub"] ? {
name: "sidebar-sub",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-sub", normalizeProps(guardReactiveProps(data)))
]),
key: "2"
} : void 0,
_ctx.$slots["sidebar-item-title"] ? {
name: "sidebar-item-title",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-item-title", normalizeProps(guardReactiveProps(data)))
]),
key: "3"
} : void 0
]), 1040, ["collapse"])) : createCommentVNode("v-if", true),
createCommentVNode(" \u4E3B\u5185\u5BB9 "),
createElementVNode("main", _hoisted_1, [
createCommentVNode(" \u9762\u5305\u5C51\u4E0A\u65B9 "),
_ctx.$slots["layout-extra"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
renderSlot(_ctx.$slots, "layout-extra")
])) : createCommentVNode("v-if", true),
createCommentVNode(" \u9762\u5305\u5C51 "),
_ctx.hasBreadcrumb ? (openBlock(), createBlock(
unref(PlusBreadcrumb$1),
mergeProps({ key: 1 }, _ctx.breadcrumbProps, {
ref_key: "plusBreadcrumbInstance",
ref: plusBreadcrumbInstance
}),
createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["breadcrumb-item-title"] ? {
name: "breadcrumb-item-title",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "breadcrumb-item-title", normalizeProps(guardReactiveProps(data)))
]),
key: "0"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : createCommentVNode("v-if", true),
createVNode(unref(ElMain), {
class: "plus-layout-content",
style: normalizeStyle({ height: height.value })
}, {
default: withCtx(() => [
createVNode(
unref(ElScrollbar),
mergeProps({ class: "plus-layout-main__scrollbar" }, _ctx.scrollbarProps),
{
default: withCtx(() => [
createVNode(unref(ElMain), null, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}),
_ctx.backtop ? (openBlock(), createBlock(
unref(ElBacktop),
mergeProps({ key: 0 }, backtopProps.value, { target: ".plus-layout .plus-layout-main__scrollbar" }),
null,
16
/* FULL_PROPS */
)) : createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
)
]),
_: 3
/* FORWARDED */
}, 8, ["style"])
])
]),
_: 3
/* FORWARDED */
})
]),
_: 3
/* FORWARDED */
}, 8, ["style", "class"]);
};
}
});
export { _sfc_main as default };