@fmdevui/fm-dev/es/packages/core/layout/navMenu/vertical.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, reactive, computed, onMounted, watch, resolveComponent, createBlock, openBlock, withCtx, createElementBlock, Fragment, renderList, createVNode, unref, createCommentVNode, createElementVNode, toDisplayString, createSlots, 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 './subItem.vue.mjs';
import _sfc_main$1 from './subItem.vue2.mjs';
import { useThemeConfig } from '../../stores/themeConfig.mjs';

const _hoisted_1 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "vertical",
  props: {
    // 菜单列表
    menuList: {
      type: Array,
      default: () => []
    }
  },
  setup(__props) {
    const SubItem = _sfc_main$1;
    const props = __props;
    const storesThemeConfig = useThemeConfig();
    const { themeConfig } = storeToRefs(storesThemeConfig);
    const route = useRoute();
    const state = reactive({
      // 修复：
      defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
      isCollapse: false
    });
    const menuLists = computed(() => {
      return props.menuList;
    });
    const getThemeConfig = computed(() => {
      return themeConfig.value;
    });
    const setParentHighlight = (currentRoute) => {
      const { path, meta } = currentRoute;
      const pathSplit = meta?.isDynamic ? meta.isDynamicPath.split("/") : path.split("/");
      if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join("/");
      else return path;
    };
    const onALinkClick = (val) => {
      other.handleOpenLink(val);
    };
    onMounted(() => {
      state.defaultActive = setParentHighlight(route);
    });
    onBeforeRouteUpdate((to) => {
      state.defaultActive = setParentHighlight(to);
      const clientWidth = document.body.clientWidth;
      if (clientWidth < 1e3) themeConfig.value.isCollapse = false;
    });
    watch(
      () => themeConfig.value.isCollapse,
      (isCollapse) => {
        document.body.clientWidth <= 1e3 ? state.isCollapse = false : state.isCollapse = isCollapse;
      },
      {
        immediate: true
      }
    );
    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(), createBlock(_component_el_menu, {
        router: "",
        "default-active": state.defaultActive,
        "background-color": "transparent",
        collapse: state.isCollapse,
        "unique-opened": getThemeConfig.value.isUniqueOpened,
        "collapse-transition": false
      }, {
        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"]),
                      createCommentVNode(" <span>{{ $t(val.meta.title) }}</span> "),
                      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({
                    default: withCtx(() => [
                      createVNode(_component_SvgIcon, {
                        name: val.meta.icon
                      }, null, 8, ["name"])
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, [
                    !val.meta.isLink || val.meta.isLink && val.meta.isIframe ? {
                      name: "title",
                      fn: withCtx(() => [
                        createCommentVNode(" <span>{{ $t(val.meta.title) }}</span> "),
                        createElementVNode(
                          "span",
                          null,
                          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"])
                        }, toDisplayString(_ctx.$t(`message.menu.${val.meta.title}`)), 9, _hoisted_1)
                      ]),
                      key: "1"
                    }
                  ]), 1032, ["index"]))
                ],
                64
                /* STABLE_FRAGMENT */
              );
            }),
            256
            /* UNKEYED_FRAGMENT */
          ))
        ]),
        _: 1
        /* STABLE */
      }, 8, ["default-active", "collapse", "unique-opened"]);
    };
  }
});

export { _sfc_main as default };