yuang-framework-ui-pc/lib/ele-dropdown/components/dropdown-menu-item.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../../icons");
const _sfc_main = vue.defineComponent({
  name: "DropdownMenuItem",
  components: { ElIcon: elementPlus.ElIcon, ArrowRight: icons.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 = vue.ref(null);
    const subMenuRef = vue.ref(null);
    const placement = vue.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 = vue.resolveComponent("ElIcon");
  const _component_ArrowRight = vue.resolveComponent("ArrowRight");
  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
    _ctx.item.divided ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1)) : vue.createCommentVNode("", true),
    vue.createElementVNode("div", {
      ref: "itemRef",
      class: vue.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] = vue.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] ? vue.renderSlot(_ctx.$slots, _ctx.item.slot, {
        key: 0,
        item: _ctx.item
      }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
        _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 0 }, { ..._ctx.iconProps || {}, ..._ctx.item.iconProps || {} })), {
          default: vue.withCtx(() => [
            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.icon), {
              style: vue.normalizeStyle(_ctx.item.iconStyle)
            }, null, 8, ["style"]))
          ]),
          _: 1
        }, 16)) : vue.createCommentVNode("", true),
        _ctx.item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(_ctx.item.title), 1)) : vue.createCommentVNode("", true)
      ], 64)),
      _ctx.item.children && _ctx.item.children.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
        vue.createVNode(_component_ElIcon, { class: "ele-dropdown-menu-item-arrow" }, {
          default: vue.withCtx(() => [
            vue.createVNode(_component_ArrowRight)
          ]),
          _: 1
        }),
        vue.createElementVNode("div", {
          ref: "subMenuRef",
          class: vue.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] = vue.withModifiers(() => {
          }, ["stop"]))
        }, [
          vue.renderSlot(_ctx.$slots, "subMenus")
        ], 34)
      ], 64)) : vue.createCommentVNode("", true)
    ], 34)
  ], 64);
}
const dropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = dropdownMenuItem;