@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
182 lines (179 loc) • 7.09 kB
JavaScript
import { defineComponent, reactive, computed, onBeforeMount, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, Fragment, renderList, createBlock, unref, createElementVNode, toDisplayString, createSlots, createTextVNode, withModifiers } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { storeToRefs } from 'pinia';
import '../../stores/index.mjs';
import other from '../../utils/other/index.mjs';
import emitter from '../../utils/emit/index.mjs';
import './subItem.vue.mjs';
import _sfc_main$1 from './subItem.vue2.mjs';
import { useRoutesList } from '../../stores/routesList.mjs';
import { useThemeConfig } from '../../stores/themeConfig.mjs';
const _hoisted_1 = { class: "el-menu-horizontal-warp" };
const _hoisted_2 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "horizontal",
props: {
// 菜单列表
menuList: {
type: Array,
default: () => []
}
},
setup(__props) {
const SubItem = _sfc_main$1;
const props = __props;
const stores = useRoutesList();
const storesThemeConfig = useThemeConfig();
const { routesList } = storeToRefs(stores);
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const state = reactive({
defaultActive: ""
});
const menuLists = computed(() => {
return props.menuList;
});
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 setSendClassicChildren = (path) => {
const currentPathSplit = path.split("/");
let currentData = { children: [] };
filterRoutesFun(routesList.value).map((v, k) => {
if (v.path === `/${currentPathSplit[1]}`) {
v["k"] = k;
currentData["item"] = { ...v };
currentData["children"] = [{ ...v }];
if (v.children) currentData["children"] = v.children;
}
});
return currentData;
};
const setCurrentRouterHighlight = (currentRoute) => {
const { path, meta } = currentRoute;
if (themeConfig.value.layout === "classic") {
state.defaultActive = `/${path?.split("/")[1]}`;
} else {
const pathSplit = meta?.isDynamic ? meta.isDynamicPath.split("/") : path.split("/");
if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join("/");
else state.defaultActive = path;
}
};
const onALinkClick = (val) => {
other.handleOpenLink(val);
};
onBeforeMount(() => {
setCurrentRouterHighlight(route);
});
onBeforeRouteUpdate((to) => {
setCurrentRouterHighlight(to);
let { layout, isClassicSplitMenu } = themeConfig.value;
if (layout === "classic" && isClassicSplitMenu) {
emitter.emit("setSendClassicChildren", setSendClassicChildren(to.path));
}
});
return (_ctx, _cache) => {
const _component_SvgIcon = resolveComponent("SvgIcon");
const _component_el_sub_menu = resolveComponent("el-sub-menu");
const _component_el_menu_item = resolveComponent("el-menu-item");
const _component_el_menu = resolveComponent("el-menu");
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_el_menu, {
router: "",
"default-active": state.defaultActive,
"background-color": "transparent",
mode: "horizontal"
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(menuLists.value, (val) => {
return openBlock(), createElementBlock(
Fragment,
null,
[
val.children && val.children.length > 0 ? (openBlock(), createBlock(_component_el_sub_menu, {
index: val.path,
key: val.path
}, {
title: withCtx(() => [
createVNode(_component_SvgIcon, {
name: val.meta.icon
}, null, 8, ["name"]),
createElementVNode(
"span",
null,
toDisplayString(_ctx.$t(`message.menu.${val.meta.title}`)),
1
/* TEXT */
)
]),
default: withCtx(() => [
createVNode(unref(SubItem), {
chil: val.children
}, null, 8, ["chil"])
]),
_: 2
/* DYNAMIC */
}, 1032, ["index"])) : (openBlock(), createBlock(_component_el_menu_item, {
index: val.path,
key: val.path
}, createSlots({
_: 2
/* DYNAMIC */
}, [
!val.meta.isLink || val.meta.isLink && val.meta.isIframe ? {
name: "title",
fn: withCtx(() => [
createVNode(_component_SvgIcon, {
name: val.meta.icon
}, null, 8, ["name"]),
createTextVNode(
" " + toDisplayString(_ctx.$t(`message.menu.${val.meta.title}`)),
1
/* TEXT */
)
]),
key: "0"
} : {
name: "title",
fn: withCtx(() => [
createElementVNode("a", {
class: "w100",
onClick: withModifiers(($event) => onALinkClick(val), ["prevent"])
}, [
createVNode(_component_SvgIcon, {
name: val.meta.icon
}, null, 8, ["name"]),
createTextVNode(
" " + toDisplayString(_ctx.$t(`message.menu.${val.meta.title}`)),
1
/* TEXT */
)
], 8, _hoisted_2)
]),
key: "1"
}
]), 1032, ["index"]))
],
64
/* STABLE_FRAGMENT */
);
}),
256
/* UNKEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}, 8, ["default-active"])
]);
};
}
});
export { _sfc_main as default };