@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
174 lines (171 loc) • 7.05 kB
JavaScript
import { defineComponent, ref, reactive, computed, onBeforeMount, watch, resolveComponent, withDirectives, openBlock, createElementBlock, createVNode, normalizeClass, withCtx, createBlock, createCommentVNode, vShow, unref } from 'vue';
import { storeToRefs } from 'pinia';
import '../../stores/index.mjs';
import emitter from '../../utils/emit/index.mjs';
import '../logo/index.vue.mjs';
import '../navMenu/vertical.vue.mjs';
import { useRoutesList } from '../../stores/routesList.mjs';
import { useThemeConfig } from '../../stores/themeConfig.mjs';
import { useTagsViewRoutes } from '../../stores/tagsViewRoutes.mjs';
import _sfc_main$1 from '../logo/index.vue2.mjs';
import _sfc_main$2 from '../navMenu/vertical.vue2.mjs';
const _hoisted_1 = { class: "h100" };
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "aside",
setup(__props) {
const layoutAsideScrollbarRef = ref();
const stores = useRoutesList();
const storesThemeConfig = useThemeConfig();
const storesTagsViewRoutes = useTagsViewRoutes();
const { routesList } = storeToRefs(stores);
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
menuList: [],
clientWidth: 0
});
const setCollapseStyle = computed(() => {
const { layout, isCollapse, menuBar } = themeConfig.value;
const asideBrTheme = ["#FFFFFF", "#FFF", "#fff", "#ffffff"];
const asideBrColor = asideBrTheme.includes(menuBar) ? "layout-el-aside-br-color" : "";
if (state.clientWidth <= 1e3) {
if (isCollapse) {
document.body.setAttribute("class", "el-popup-parent--hidden");
const asideEle = document.querySelector(".layout-container");
const modeDivs = document.createElement("div");
modeDivs.setAttribute("class", "layout-aside-mobile-mode");
asideEle.appendChild(modeDivs);
modeDivs.addEventListener("click", closeLayoutAsideMobileMode);
return [asideBrColor, "layout-aside-mobile", "layout-aside-mobile-open"];
} else {
closeLayoutAsideMobileMode();
return [asideBrColor, "layout-aside-mobile", "layout-aside-mobile-close"];
}
} else {
if (layout === "columns" || layout === "classic") {
if (isCollapse) return [asideBrColor, "layout-aside-pc-1"];
else return [asideBrColor, "layout-aside-pc-220"];
} else {
if (isCollapse) return [asideBrColor, "layout-aside-pc-64"];
else return [asideBrColor, "layout-aside-pc-220"];
}
}
});
const setShowLogo = computed(() => {
let { layout, isShowLogo } = themeConfig.value;
return isShowLogo && layout === "defaults" || isShowLogo && layout === "columns";
});
const closeLayoutAsideMobileMode = () => {
const el = document.querySelector(".layout-aside-mobile-mode");
el?.setAttribute("style", "animation: error-img-two 0.3s");
setTimeout(() => {
el?.parentNode?.removeChild(el);
}, 300);
const clientWidth = document.body.clientWidth;
if (clientWidth < 1e3) themeConfig.value.isCollapse = false;
document.body.setAttribute("class", "");
};
const setFilterRoutes = () => {
if (themeConfig.value.layout === "columns") return false;
state.menuList = filterRoutesFun(routesList.value);
};
const filterRoutesFun = (arr) => {
return arr.filter((item) => !item.meta?.isHide).map((item) => {
item = Object.assign({}, item);
if (item.children) item.children = filterRoutesFun(item.children);
return item;
});
};
const initMenuFixed = (clientWidth) => {
state.clientWidth = clientWidth;
};
const onAsideEnterLeave = (bool) => {
let { layout } = themeConfig.value;
if (layout !== "columns") return false;
if (!bool) emitter.emit("restoreDefault");
if (themeConfig.value.isColumnsMenuHoverPreload) stores.setColumnsMenuHover(bool);
};
onBeforeMount(() => {
initMenuFixed(document.body.clientWidth);
setFilterRoutes();
emitter.on("setSendColumnsChildren", (res) => {
state.menuList = res.children;
});
emitter.on("setSendClassicChildren", (res) => {
let { layout, isClassicSplitMenu } = themeConfig.value;
if (layout === "classic" && isClassicSplitMenu) {
res.children.length <= 1 ? themeConfig.value.isCollapse = true : themeConfig.value.isCollapse = false;
state.menuList = [];
state.menuList = res.children;
}
});
emitter.on("getBreadcrumbIndexSetFilterRoutes", () => {
setFilterRoutes();
});
emitter.on("layoutMobileResize", (res) => {
initMenuFixed(res.clientWidth);
closeLayoutAsideMobileMode();
});
});
watch(
() => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],
([isShowLogoChange, isShowLogo, layout, isClassicSplitMenu]) => {
if (isShowLogoChange !== isShowLogo) {
if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
}
if (layout === "classic" && isClassicSplitMenu) return false;
}
);
watch(
() => routesList.value,
() => {
setFilterRoutes();
}
);
return (_ctx, _cache) => {
const _component_el_scrollbar = resolveComponent("el-scrollbar");
const _component_el_aside = resolveComponent("el-aside");
return withDirectives((openBlock(), createElementBlock(
"div",
_hoisted_1,
[
createVNode(_component_el_aside, {
class: normalizeClass(["layout-aside", setCollapseStyle.value])
}, {
default: withCtx(() => [
setShowLogo.value ? (openBlock(), createBlock(_sfc_main$1, { key: 0 })) : createCommentVNode("v-if", true),
createVNode(
_component_el_scrollbar,
{
class: "flex-auto",
ref_key: "layoutAsideScrollbarRef",
ref: layoutAsideScrollbarRef,
onMouseenter: _cache[0] || (_cache[0] = ($event) => onAsideEnterLeave(true)),
onMouseleave: _cache[1] || (_cache[1] = ($event) => onAsideEnterLeave(false))
},
{
default: withCtx(() => [
createVNode(_sfc_main$2, {
menuList: state.menuList
}, null, 8, ["menuList"])
]),
_: 1
/* STABLE */
},
512
/* NEED_PATCH */
)
]),
_: 1
/* STABLE */
}, 8, ["class"])
],
512
/* NEED_PATCH */
)), [
[vShow, !unref(isTagsViewCurrenFull)]
]);
};
}
});
export { _sfc_main as default };