yuang-framework-ui-pc/es/ele-dropdown/components/dropdown-menu-item.js

yuang-framework-ui-pc Library

import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, normalizeClass, withModifiers, renderSlot, createBlock, normalizeProps, mergeProps, withCtx, resolveDynamicComponent, normalizeStyle, toDisplayString, createVNode } from "vue";
import { ElIcon } from "element-plus";
import { ArrowRight } from "../../icons";
const _sfc_main = defineComponent({
  name: "DropdownMenuItem",
  components: { ElIcon, ArrowRight },
  props: {
    /** 菜单项数据 */
    item: {
      type: Object,
      required: true
    },
    /** 选中的菜单 */
    selected: [String, Number, Object],
    /** 自定义图标属性 */
    iconProps: Object
  },
  emits: {
    itemClick: (_item) => true,
    wrapperContext: (_e) => true
  },
  setup(props, { emit }) {
    const itemRef = ref(null);
    const subMenuRef = ref(null);
    const placement = ref();
    const handleItemClick = () => {
      if (props.item.disabled) {
        return;
      }
      emit("itemClick", props.item);
    };
    const handleItemMouseenter = () => {
      const subMenuEl = subMenuRef.value;
      if (!subMenuEl || !itemRef.value) {
        return;
      }
      const rect = itemRef.value.getBoundingClientRect();
      const rightOver = rect.right + subMenuEl.offsetWidth > window.innerWidth;
      const bottomOver = rect.top + subMenuEl.offsetHeight > window.innerHeight;
      if (rightOver && bottomOver) {
        placement.value = "leftEnd";
      } else if (rightOver) {
        placement.value = "leftStart";
      } else if (bottomOver) {
        placement.value = "rightEnd";
      } else {
        placement.value = void 0;
      }
    };
    const handleWrapperContext = (e) => {
      emit("wrapperContext", e);
    };
    return {
      itemRef,
      subMenuRef,
      placement,
      handleItemClick,
      handleItemMouseenter,
      handleWrapperContext
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  key: 0,
  class: "ele-dropdown-menu-divider"
};
const _hoisted_2 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElIcon = resolveComponent("ElIcon");
  const _component_ArrowRight = resolveComponent("ArrowRight");
  return openBlock(), createElementBlock(Fragment, null, [
    _ctx.item.divided ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
    createElementVNode("div", {
      ref: "itemRef",
      class: normalizeClass([
        "ele-dropdown-menu-item",
        { "is-disabled": !!_ctx.item.disabled },
        { "is-active": _ctx.selected === _ctx.item.command },
        { "is-danger": !!_ctx.item.danger }
      ]),
      onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args), ["stop"])),
      onMouseenter: _cache[3] || (_cache[3] = (...args) => _ctx.handleItemMouseenter && _ctx.handleItemMouseenter(...args))
    }, [
      _ctx.item.slot && _ctx.item.slot !== "default" && _ctx.item.slot !== "subMenus" && _ctx.$slots[_ctx.item.slot] ? renderSlot(_ctx.$slots, _ctx.item.slot, {
        key: 0,
        item: _ctx.item
      }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
        _ctx.item.icon ? (openBlock(), createBlock(_component_ElIcon, normalizeProps(mergeProps({ key: 0 }, { ..._ctx.iconProps || {}, ..._ctx.item.iconProps || {} })), {
          default: withCtx(() => [
            (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.icon), {
              style: normalizeStyle(_ctx.item.iconStyle)
            }, null, 8, ["style"]))
          ]),
          _: 1
        }, 16)) : createCommentVNode("", true),
        _ctx.item.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.item.title), 1)) : createCommentVNode("", true)
      ], 64)),
      _ctx.item.children && _ctx.item.children.length ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
        createVNode(_component_ElIcon, { class: "ele-dropdown-menu-item-arrow" }, {
          default: withCtx(() => [
            createVNode(_component_ArrowRight)
          ]),
          _: 1
        }),
        createElementVNode("div", {
          ref: "subMenuRef",
          class: normalizeClass(["ele-dropdown-wrapper is-sub-menu", [
            { "is-right-end": _ctx.placement === "rightEnd" },
            { "is-left-start": _ctx.placement === "leftStart" },
            { "is-left-end": _ctx.placement === "leftEnd" }
          ]]),
          onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.handleWrapperContext && _ctx.handleWrapperContext(...args)),
          onClick: _cache[1] || (_cache[1] = withModifiers(() => {
          }, ["stop"]))
        }, [
          renderSlot(_ctx.$slots, "subMenus")
        ], 34)
      ], 64)) : createCommentVNode("", true)
    ], 34)
  ], 64);
}
const dropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  dropdownMenuItem as default
};