@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
177 lines (172 loc) • 7.34 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var vueRouter = require('vue-router');
require('../../../utils/index.js');
var index$1 = require('../../../utils/other/index.js');
var pinia = require('pinia');
require('../../../stores/index.js');
var routesList = require('../../../stores/routesList.js');
var themeConfig = require('../../../stores/themeConfig.js');
var index = require('../../../utils/storage/index.js');
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__ */ vue.defineComponent({
__name: "breadcrumb",
setup(__props) {
const stores = routesList.useRoutesList();
const storesThemeConfig = themeConfig.useThemeConfig();
const { themeConfig: themeConfig$1 } = pinia.storeToRefs(storesThemeConfig);
const { routesList: routesList$1 } = pinia.storeToRefs(stores);
const route = vueRouter.useRoute();
const router = vueRouter.useRouter();
const state = vue.reactive({
breadcrumbList: [],
routeSplit: [],
routeSplitFirst: "",
routeSplitIndex: 1
});
const isShowBreadcrumb = vue.computed(() => {
initRouteSplit(route);
const { layout, isBreadcrumb } = themeConfig$1.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$1.value.isCollapse = !themeConfig$1.value.isCollapse;
setLocalThemeConfig();
};
const setLocalThemeConfig = () => {
index.Local.remove("themeConfig");
index.Local.set("themeConfig", themeConfig$1.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$1.value.isBreadcrumb) return false;
state.breadcrumbList = [];
state.routeSplit = toRoute.path.split("/");
state.routeSplit.shift();
state.routeSplitFirst = `/${state.routeSplit[0]}`;
state.routeSplitIndex = 1;
getBreadcrumbList(routesList$1.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 = index$1.default.setTagsViewNameI18n(route);
};
vue.onMounted(() => {
initRouteSplit(route);
});
vueRouter.onBeforeRouteUpdate((to) => {
initRouteSplit(to);
});
return (_ctx, _cache) => {
const _component_SvgIcon = vue.resolveComponent("SvgIcon");
const _component_el_breadcrumb_item = vue.resolveComponent("el-breadcrumb-item");
const _component_el_breadcrumb = vue.resolveComponent("el-breadcrumb");
return isShowBreadcrumb.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(_component_SvgIcon, {
class: "layout-navbars-breadcrumb-icon",
name: vue.unref(themeConfig$1).isCollapse ? "ele-Expand" : "ele-Fold",
size: 16,
onClick: onThemeConfigChange
}, null, 8, ["name"]),
vue.createVNode(_component_el_breadcrumb, { class: "layout-navbars-breadcrumb-hide" }, {
default: vue.withCtx(() => [
vue.createVNode(vue.TransitionGroup, { name: "breadcrumb" }, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(state.breadcrumbList, (v, k) => {
return vue.openBlock(), vue.createBlock(
_component_el_breadcrumb_item,
{
key: v.path
},
{
default: vue.withCtx(() => [
k === state.breadcrumbList.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
vue.unref(themeConfig$1).isBreadcrumbIcon ? (vue.openBlock(), vue.createBlock(_component_SvgIcon, {
key: 0,
name: v.meta.icon,
class: "layout-navbars-breadcrumb-iconfont"
}, null, 8, ["name"])) : vue.createCommentVNode("v-if", true),
v.meta.title ? (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_3,
vue.toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)) : (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_4,
vue.toDisplayString(v.meta.tagsViewName),
1
/* TEXT */
))
])) : (vue.openBlock(), vue.createElementBlock("a", {
key: 1,
onClick: vue.withModifiers(($event) => onBreadcrumbClick(v), ["prevent"]),
style: { "display": "flex" }
}, [
vue.unref(themeConfig$1).isBreadcrumbIcon ? (vue.openBlock(), vue.createBlock(_component_SvgIcon, {
key: 0,
name: v.meta.icon,
class: "layout-navbars-breadcrumb-iconfont"
}, null, 8, ["name"])) : vue.createCommentVNode("v-if", true),
vue.createTextVNode(
vue.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 */
})
])) : vue.createCommentVNode("v-if", true);
};
}
});
exports.default = _sfc_main;