plus-pro-components
Version:
Page level components developed based on Element Plus.
213 lines (208 loc) • 8.84 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../breadcrumb/index.js');
var index$1 = require('../../sidebar/index.js');
var index$2 = require('../../header/index.js');
require('../../utils/index.js');
var elementPlus = require('element-plus');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-layout-main" };
const _hoisted_2 = {
key: 0,
class: "plus-layout-extra"
};
var _sfc_main = /* @__PURE__ */ vue.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 = index.PlusBreadcrumb;
const PlusSidebar = index$1.PlusSidebar;
const PlusHeader = index$2.PlusHeader;
const height = vue.ref("100%");
const collapse = vue.ref(false);
const plusSidebarInstance = vue.ref();
const plusBreadcrumbInstance = vue.ref();
const backtopProps = vue.computed(
() => is.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))`;
});
}
};
vue.onMounted(() => {
setHeight();
});
__expose({
plusSidebarInstance
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElContainer), {
class: vue.normalizeClass(["plus-layout", { collapse: collapse.value }]),
style: vue.normalizeStyle(!_ctx.hasHeader ? "--plus-header-height: 0px" : void 0)
}, {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u5934\u90E8 "),
_ctx.hasHeader ? (vue.openBlock(), vue.createBlock(
vue.unref(PlusHeader),
vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.headerProps)),
vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["header-left"] ? {
name: "header-left",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "header-left", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots["header-right"] ? {
name: "header-right",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "header-right", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(elementPlus.ElContainer), { class: "plus-layout-main-wrapper" }, {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u4FA7\u8FB9\u680F "),
_ctx.hasSidebar ? (vue.openBlock(), vue.createBlock(vue.unref(PlusSidebar), vue.mergeProps({ key: 0 }, _ctx.sidebarProps, {
ref_key: "plusSidebarInstance",
ref: plusSidebarInstance,
collapse: collapse.value,
"onUpdate:collapse": _cache[0] || (_cache[0] = ($event) => collapse.value = $event)
}), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["sidebar-extra"] ? {
name: "sidebar-extra",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-extra", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots["sidebar-item"] ? {
name: "sidebar-item",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-item", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "1"
} : void 0,
_ctx.$slots["sidebar-sub"] ? {
name: "sidebar-sub",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-sub", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "2"
} : void 0,
_ctx.$slots["sidebar-item-title"] ? {
name: "sidebar-item-title",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-item-title", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "3"
} : void 0
]), 1040, ["collapse"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u4E3B\u5185\u5BB9 "),
vue.createElementVNode("main", _hoisted_1, [
vue.createCommentVNode(" \u9762\u5305\u5C51\u4E0A\u65B9 "),
_ctx.$slots["layout-extra"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "layout-extra")
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u9762\u5305\u5C51 "),
_ctx.hasBreadcrumb ? (vue.openBlock(), vue.createBlock(
vue.unref(PlusBreadcrumb),
vue.mergeProps({ key: 1 }, _ctx.breadcrumbProps, {
ref_key: "plusBreadcrumbInstance",
ref: plusBreadcrumbInstance
}),
vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["breadcrumb-item-title"] ? {
name: "breadcrumb-item-title",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "breadcrumb-item-title", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "0"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(elementPlus.ElMain), {
class: "plus-layout-content",
style: vue.normalizeStyle({ height: height.value })
}, {
default: vue.withCtx(() => [
vue.createVNode(
vue.unref(elementPlus.ElScrollbar),
vue.mergeProps({ class: "plus-layout-main__scrollbar" }, _ctx.scrollbarProps),
{
default: vue.withCtx(() => [
vue.createVNode(vue.unref(elementPlus.ElMain), null, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}),
_ctx.backtop ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElBacktop),
vue.mergeProps({ key: 0 }, backtopProps.value, { target: ".plus-layout .plus-layout-main__scrollbar" }),
null,
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
)
]),
_: 3
/* FORWARDED */
}, 8, ["style"])
])
]),
_: 3
/* FORWARDED */
})
]),
_: 3
/* FORWARDED */
}, 8, ["style", "class"]);
};
}
});
exports.default = _sfc_main;