@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
173 lines (170 loc) • 7.24 kB
JavaScript
import { defineComponent, reactive, computed, onMounted, resolveComponent, createElementBlock, createCommentVNode, openBlock, createVNode, unref, withCtx, TransitionGroup, Fragment, renderList, createBlock, toDisplayString, withModifiers, createTextVNode } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import '../../../utils/index.mjs';
import other from '../../../utils/other/index.mjs';
import { storeToRefs } from 'pinia';
import '../../../stores/index.mjs';
import { useRoutesList } from '../../../stores/routesList.mjs';
import { useThemeConfig } from '../../../stores/themeConfig.mjs';
import { Local } from '../../../utils/storage/index.mjs';
const _hoisted_1 = {
key: 0,
class: "layout-navbars-breadcrumb"
};
const _hoisted_2 = {
key: 0,
class: "layout-navbars-breadcrumb-span"
};
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { key: 2 };
const _hoisted_5 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "breadcrumb",
setup(__props) {
const stores = useRoutesList();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { routesList } = storeToRefs(stores);
const route = useRoute();
const router = useRouter();
const state = reactive({
breadcrumbList: [],
routeSplit: [],
routeSplitFirst: "",
routeSplitIndex: 1
});
const isShowBreadcrumb = computed(() => {
initRouteSplit(route);
const { layout, isBreadcrumb } = themeConfig.value;
if (layout === "classic" || layout === "transverse") return false;
else return isBreadcrumb ? true : false;
});
const onBreadcrumbClick = (v) => {
const {
redirect
/*,path*/
} = v;
if (redirect) router.push(redirect);
};
const onThemeConfigChange = () => {
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
setLocalThemeConfig();
};
const setLocalThemeConfig = () => {
Local.remove("themeConfig");
Local.set("themeConfig", themeConfig.value);
};
const getBreadcrumbList = (arr) => {
arr.forEach((item) => {
state.routeSplit.forEach((v, k, arrs) => {
if (state.routeSplitFirst === item.path) {
state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
!state.breadcrumbList.find((a) => a.path === item.path) && state.breadcrumbList.push(item);
state.routeSplitIndex++;
if (item.children) getBreadcrumbList(item.children);
}
});
});
};
const initRouteSplit = (toRoute) => {
if (!themeConfig.value.isBreadcrumb) return false;
state.breadcrumbList = [];
state.routeSplit = toRoute.path.split("/");
state.routeSplit.shift();
state.routeSplitFirst = `/${state.routeSplit[0]}`;
state.routeSplitIndex = 1;
getBreadcrumbList(routesList.value);
if (toRoute.name === "home" || toRoute.name === "notFound" && state.breadcrumbList.length > 1) state.breadcrumbList.shift();
if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
};
onMounted(() => {
initRouteSplit(route);
});
onBeforeRouteUpdate((to) => {
initRouteSplit(to);
});
return (_ctx, _cache) => {
const _component_SvgIcon = resolveComponent("SvgIcon");
const _component_el_breadcrumb_item = resolveComponent("el-breadcrumb-item");
const _component_el_breadcrumb = resolveComponent("el-breadcrumb");
return isShowBreadcrumb.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_SvgIcon, {
class: "layout-navbars-breadcrumb-icon",
name: unref(themeConfig).isCollapse ? "ele-Expand" : "ele-Fold",
size: 16,
onClick: onThemeConfigChange
}, null, 8, ["name"]),
createVNode(_component_el_breadcrumb, { class: "layout-navbars-breadcrumb-hide" }, {
default: withCtx(() => [
createVNode(TransitionGroup, { name: "breadcrumb" }, {
default: withCtx(() => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(state.breadcrumbList, (v, k) => {
return openBlock(), createBlock(
_component_el_breadcrumb_item,
{
key: v.path
},
{
default: withCtx(() => [
k === state.breadcrumbList.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2, [
unref(themeConfig).isBreadcrumbIcon ? (openBlock(), createBlock(_component_SvgIcon, {
key: 0,
name: v.meta.icon,
class: "layout-navbars-breadcrumb-iconfont"
}, null, 8, ["name"])) : createCommentVNode("v-if", true),
v.meta.title ? (openBlock(), createElementBlock(
"div",
_hoisted_3,
toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)) : (openBlock(), createElementBlock(
"div",
_hoisted_4,
toDisplayString(v.meta.tagsViewName),
1
/* TEXT */
))
])) : (openBlock(), createElementBlock("a", {
key: 1,
onClick: withModifiers(($event) => onBreadcrumbClick(v), ["prevent"]),
style: { "display": "flex" }
}, [
unref(themeConfig).isBreadcrumbIcon ? (openBlock(), createBlock(_component_SvgIcon, {
key: 0,
name: v.meta.icon,
class: "layout-navbars-breadcrumb-iconfont"
}, null, 8, ["name"])) : createCommentVNode("v-if", true),
createTextVNode(
toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)
], 8, _hoisted_5))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
])) : createCommentVNode("v-if", true);
};
}
});
export { _sfc_main as default };