menu-item.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { defineComponent, getCurrentInstance, inject, toRef, computed, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, renderSlot, createElementVNode, Fragment } from 'vue';
  2. import { ElTooltip } from '../../tooltip/index.mjs';
  3. import useMenu from './use-menu.mjs';
  4. import { menuItemProps, menuItemEmits } from './menu-item2.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  7. import { throwError } from '../../../utils/error.mjs';
  8. const COMPONENT_NAME = "ElMenuItem";
  9. const __default__ = defineComponent({
  10. name: COMPONENT_NAME
  11. });
  12. const _sfc_main = /* @__PURE__ */ defineComponent({
  13. ...__default__,
  14. props: menuItemProps,
  15. emits: menuItemEmits,
  16. setup(__props, { expose, emit }) {
  17. const props = __props;
  18. const instance = getCurrentInstance();
  19. const rootMenu = inject("rootMenu");
  20. const nsMenu = useNamespace("menu");
  21. const nsMenuItem = useNamespace("menu-item");
  22. if (!rootMenu)
  23. throwError(COMPONENT_NAME, "can not inject root menu");
  24. const { parentMenu, indexPath } = useMenu(instance, toRef(props, "index"));
  25. const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
  26. if (!subMenu)
  27. throwError(COMPONENT_NAME, "can not inject sub menu");
  28. const active = computed(() => props.index === rootMenu.activeIndex);
  29. const item = reactive({
  30. index: props.index,
  31. indexPath,
  32. active
  33. });
  34. const handleClick = () => {
  35. if (!props.disabled) {
  36. rootMenu.handleMenuItemClick({
  37. index: props.index,
  38. indexPath: indexPath.value,
  39. route: props.route
  40. });
  41. emit("click", item);
  42. }
  43. };
  44. onMounted(() => {
  45. subMenu.addSubMenu(item);
  46. rootMenu.addMenuItem(item);
  47. });
  48. onBeforeUnmount(() => {
  49. subMenu.removeSubMenu(item);
  50. rootMenu.removeMenuItem(item);
  51. });
  52. expose({
  53. parentMenu,
  54. rootMenu,
  55. active,
  56. nsMenu,
  57. nsMenuItem,
  58. handleClick
  59. });
  60. return (_ctx, _cache) => {
  61. return openBlock(), createElementBlock("li", {
  62. class: normalizeClass([
  63. unref(nsMenuItem).b(),
  64. unref(nsMenuItem).is("active", unref(active)),
  65. unref(nsMenuItem).is("disabled", _ctx.disabled)
  66. ]),
  67. role: "menuitem",
  68. tabindex: "-1",
  69. onClick: handleClick
  70. }, [
  71. unref(parentMenu).type.name === "ElMenu" && unref(rootMenu).props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(unref(ElTooltip), {
  72. key: 0,
  73. effect: unref(rootMenu).props.popperEffect,
  74. placement: "right",
  75. "fallback-placements": ["left"],
  76. persistent: unref(rootMenu).props.persistent
  77. }, {
  78. content: withCtx(() => [
  79. renderSlot(_ctx.$slots, "title")
  80. ]),
  81. default: withCtx(() => [
  82. createElementVNode("div", {
  83. class: normalizeClass(unref(nsMenu).be("tooltip", "trigger"))
  84. }, [
  85. renderSlot(_ctx.$slots, "default")
  86. ], 2)
  87. ]),
  88. _: 3
  89. }, 8, ["effect", "persistent"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
  90. renderSlot(_ctx.$slots, "default"),
  91. renderSlot(_ctx.$slots, "title")
  92. ], 64))
  93. ], 2);
  94. };
  95. }
  96. });
  97. var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "menu-item.vue"]]);
  98. export { MenuItem as default };
  99. //# sourceMappingURL=menu-item.mjs.map