menu-item2.mjs 3.6 KB

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