@vrx-arco/pro-layout
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
73 lines (72 loc) • 2.31 kB
JavaScript
import { computed, createVNode, defineComponent, isVNode, mergeProps, ref, toRef, watch } from "vue";
import { Menu, MenuItem, SubMenu } from "@arco-design/web-vue";
import { useRoute, useRouter } from "vue-router";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const MenuItem$1 = ({ menu }, { slots }) => {
const renderMenuIcon = () => slots.icon?.(menu) || menu.meta?.icon;
if (menu.meta?.hidden) return;
if (!menu.children) return createVNode(MenuItem, { "key": menu.name }, {
default: () => [menu.meta?.title || ""],
icon: renderMenuIcon
});
if (menu.meta?.list) {
const firstChild = menu.children[0].name;
return createVNode(MenuItem, { "key": firstChild }, {
default: () => [menu.meta?.title || ""],
icon: renderMenuIcon
});
}
return createVNode(SubMenu, {
"key": menu.name,
"title": menu.meta?.title || ""
}, {
default: () => [menu.children?.map((item) => createVNode(MenuItem$1, {
"menu": item,
"key": item.name
}, { icon: slots.icon }))],
icon: renderMenuIcon
});
};
const ProMenu = /* @__PURE__ */ defineComponent({
name: "vrx-arco-pro-menu",
props: { menu: {
type: Array,
default: () => []
} },
slots: Object,
setup: (props, { slots }) => {
const menu = toRef(props, "menu");
const route = useRoute();
const router = useRouter();
const active = computed(() => route.name);
const selectedKeys = ref([]);
const openKeys = ref([]);
watch(active, () => {
openKeys.value = route.matched.map((item) => item.name);
selectedKeys.value = [active.value];
}, { immediate: true });
const onMenuItemClick = (key) => {
router.push({ name: key });
};
return () => {
let _slot;
return createVNode(Menu, mergeProps({
"selectedKeys": selectedKeys.value,
"onUpdate:selectedKeys": ($event) => selectedKeys.value = $event,
"openKeys": openKeys.value,
"onUpdate:openKeys": ($event) => openKeys.value = $event
}, {
autoOpenSelected: true,
accordion: true,
autoScrollIntoView: true,
onMenuItemClick
}), _isSlot(_slot = menu.value.map((item) => createVNode(MenuItem$1, {
"menu": item,
"key": item.name
}, { icon: slots.icon }))) ? _slot : { default: () => [_slot] });
};
}
});
export { ProMenu };