Menú desplegable

Lista de menú que se despliega hacia abajo. Tres formas de invocación — al pasar el cursor, al hacer clic y con el botón derecho —; los elementos del menú pueden llevar un identificador de comando y una línea divisoria.

Menú desplegable

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown placement="bottom-start" @command="onCommand">
        <LhButton>Invocación con hover (predeterminada)</LhButton>
        <template #dropdown>
          <LhDropdownItem command="copy">Copiar el colofón</LhDropdownItem>
          <LhDropdownItem command="move">Mover al rollo</LhDropdownItem>
          <LhDropdownItem divided command="delete">Eliminar</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="click" placement="bottom" :max-height="180" @command="onCommand">
        <LhButton>click + maxHeight</LhButton>
        <template #dropdown>
          <LhDropdownItem v-for="i in 8" :key="i" :command="'item-' + i">Opción {{ i }}</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="contextmenu" placement="bottom-end" @command="onCommand">
        <LhButton>Invocación con el botón derecho</LhButton>
        <template #dropdown>
          <LhDropdownItem command="ctx-a">Menú contextual A</LhDropdownItem>
          <LhDropdownItem command="ctx-b" disabled>Menú contextual B (deshabilitado)</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
    <p class="demo-note">Comando: {{ command || '(ninguno)' }}</p>
    <p class="demo-note">Con hideOnClick=false, hacer clic en un elemento no cierra el menú; :visible.sync permite el control manual; con flip=false la posición es estricta.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown :hide-on-click="false" placement="top" @command="onCommand">
        <LhButton>hideOnClick=false</LhButton>
        <template #dropdown>
          <LhDropdownItem command="keep-1">No se cierra tras el clic</LhDropdownItem>
          <LhDropdownItem command="keep-2">Segundo elemento</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown :visible.sync="manual" placement="top-start" :flip="false" popper-class="my-popper">
        <LhButton @click="manual = !manual">Interruptor manual ({{ manual ? 'abierto' : 'cerrado' }})</LhButton>
        <template #dropdown>
          <LhDropdownItem command="manual-1">Elemento manual</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown disabled>
        <LhButton disabled>disabled</LhButton>
        <template #dropdown>
          <LhDropdownItem command="never">Nunca aparece</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    command: '',
    manual: false,
  }),
  methods: {
    onCommand(cmd) {
      this.command = String(cmd)
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
trigger	Forma de invocación	'hover' \| 'click' \| 'contextmenu'	'hover'
placement	Posición de aparición	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'bottom'
flip	Si se voltea la dirección cuando falta espacio en el eje principal (activado por defecto); con false se respeta estrictamente placement y se permite desbordar la ventana gráfica	boolean	true
visible	Visibilidad controlada manualmente (:visible.sync)	boolean	—
disabled	Si se deshabilita	boolean	false
hideOnClick	Si se cierra automáticamente al hacer clic en un elemento	boolean	true
teleportTarget	Destino de montaje de la capa emergente (selector o elemento; body por defecto. Vue 2.7 no tiene Teleport: se implementa moviendo el anfitrión)	string \| HTMLElement	—
popperClass	Clase personalizada de la capa emergente	string	—
maxHeight	Altura máxima del menú	string \| number	—
themeVars	Variables de tema a nivel de componente; anula la configuración de ConfigProvider	Record<string, string>	—
bgPattern	Patrón de fondo a nivel de componente; anula la configuración de ConfigProvider	string	—
sx	Propiedades de layout abreviadas (se aplican al elemento raíz del disparador)	—	—

DropdownItem Props

Prop	Descripción	Tipo	Predeterminado
command	Identificador del comando; se emite con el evento command al hacer clic	string \| number	—
disabled	Si se deshabilita (conserva la capacidad de recibir el foco para permanecer en el árbol de accesibilidad)	boolean	false
divided	Si se muestra la línea divisoria	boolean	false

Events

Evento	Descripción	Parámetro del callback
command	Al hacer clic en un elemento del menú	El command de ese elemento
visible-change	Cambio del estado de visibilidad	boolean

Slots

Slot	Descripción
default	Disparador
dropdown	Contenido del menú (aquí van los LhDropdownItem)