@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
186 lines (181 loc) • 7.27 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var vueRouter = require('vue-router');
var pinia = require('pinia');
require('../../stores/index.js');
var index = require('../../utils/other/index.js');
var index$1 = require('../../utils/emit/index.js');
require('./subItem.vue.js');
var subItem_vue_vue_type_script_setup_true_name_navMenuSubItem_lang = require('./subItem.vue2.js');
var routesList = require('../../stores/routesList.js');
var themeConfig = require('../../stores/themeConfig.js');
const _hoisted_1 = { class: "el-menu-horizontal-warp" };
const _hoisted_2 = ["onClick"];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "horizontal",
props: {
// 菜单列表
menuList: {
type: Array,
default: () => []
}
},
setup(__props) {
const SubItem = subItem_vue_vue_type_script_setup_true_name_navMenuSubItem_lang.default;
const props = __props;
const stores = routesList.useRoutesList();
const storesThemeConfig = themeConfig.useThemeConfig();
const { routesList: routesList$1 } = pinia.storeToRefs(stores);
const { themeConfig: themeConfig$1 } = pinia.storeToRefs(storesThemeConfig);
const route = vueRouter.useRoute();
const state = vue.reactive({
defaultActive: ""
});
const menuLists = vue.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$1.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$1.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) => {
index.default.handleOpenLink(val);
};
vue.onBeforeMount(() => {
setCurrentRouterHighlight(route);
});
vueRouter.onBeforeRouteUpdate((to) => {
setCurrentRouterHighlight(to);
let { layout, isClassicSplitMenu } = themeConfig$1.value;
if (layout === "classic" && isClassicSplitMenu) {
index$1.default.emit("setSendClassicChildren", setSendClassicChildren(to.path));
}
});
return (_ctx, _cache) => {
const _component_SvgIcon = vue.resolveComponent("SvgIcon");
const _component_el_sub_menu = vue.resolveComponent("el-sub-menu");
const _component_el_menu_item = vue.resolveComponent("el-menu-item");
const _component_el_menu = vue.resolveComponent("el-menu");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(_component_el_menu, {
router: "",
"default-active": state.defaultActive,
"background-color": "transparent",
mode: "horizontal"
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(menuLists.value, (val) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
val.children && val.children.length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_sub_menu, {
index: val.path,
key: val.path
}, {
title: vue.withCtx(() => [
vue.createVNode(_component_SvgIcon, {
name: val.meta.icon
}, null, 8, ["name"]),
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.$t(`message.menu.${val.meta.title}`)),
1
/* TEXT */
)
]),
default: vue.withCtx(() => [
vue.createVNode(vue.unref(SubItem), {
chil: val.children
}, null, 8, ["chil"])
]),
_: 2
/* DYNAMIC */
}, 1032, ["index"])) : (vue.openBlock(), vue.createBlock(_component_el_menu_item, {
index: val.path,
key: val.path
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!val.meta.isLink || val.meta.isLink && val.meta.isIframe ? {
name: "title",
fn: vue.withCtx(() => [
vue.createVNode(_component_SvgIcon, {
name: val.meta.icon
}, null, 8, ["name"]),
vue.createTextVNode(
" " + vue.toDisplayString(_ctx.$t(`message.menu.${val.meta.title}`)),
1
/* TEXT */
)
]),
key: "0"
} : {
name: "title",
fn: vue.withCtx(() => [
vue.createElementVNode("a", {
class: "w100",
onClick: vue.withModifiers(($event) => onALinkClick(val), ["prevent"])
}, [
vue.createVNode(_component_SvgIcon, {
name: val.meta.icon
}, null, 8, ["name"]),
vue.createTextVNode(
" " + vue.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"])
]);
};
}
});
exports.default = _sfc_main;