element-plus [Feature Request] [Enhancement] [menu-item] Attach click event to el-link or el-button instead of li

6bc51xsx  于 2023-03-19  发布在  其他
关注(0)|答案(2)|浏览(244)

Feature type: Enhancement

Details

  • Enhanced component name: menu-item

Description

This issue is as much a question as it is a feature request.

At the moment, el-menu-item output a <li> element, with a click event attached:

<li class="el-menu-item is-active" role="menuitem" tabindex="0">Processing Center</li>

Why not output a el-link or a el-button ?
It would be more semantic, the role attribute and the tabindex wouldn't be necessary anymore. The element to render could be passed as a props, el-link by default and el-button if fooProps=true ?

What do you think ?

Edit:
I would add that it would allow user to do ctrl + click or middle-click on the element to open it in a new tab, that behavior is broken because of the actual markup.

6uxekuva

6uxekuva1#

I might try to tackle it myself, but I would like some insight.

  • Is it something that you would like to see integrated ?
  • How would you tackle the switch between a and button tag ? Might be a boolean props button , might also be a props href

We could work on something like that:

<template>
  <li
    class="el-menu-item"
    :style="paddingStyle"
    :class="{
      'is-active': active,
      'is-disabled': disabled,
    }"
  >
    <component
      :is="href ? 'el-link' : 'el-button'"
      role="menuitem"
      :disabled="disabled"
      :underline="false"
      :type="href ? null : 'text'"
      :href="href"
      @click="handleClick"
    >
      <el-tooltip
        v-if="
          parentMenu.type.name === 'ElMenu' &&
          rootMenu.props.collapse &&
          $slots.title
        "
        :effect="Effect.DARK"
        placement="right"
        :fallback-placements="['left']"
        persistent
      >
        <template #content>
          <slot name="title" />
        </template>
        <div class="el-menu-tooltip__trigger">
          <slot />
        </div>
      </el-tooltip>
      <template v-else>
        <slot />
        <slot name="title" />
      </template>
    </component>
  </li>
</template>

What do you think?

yqyhoc1h

yqyhoc1h2#

It's really helpful! The current menu-item behavior does not support opening with Ctrl+click or middle-click, nor does it support opening in a new window from the right-click menu, which is very frustrating for me.

相关问题