Dropdown 드롭다운

아래로 펼쳐지는 메뉴 목록입니다. 마우스 오버/클릭/우측 클릭 세 가지 트리거, 메뉴 항목에 명령 식별자와 구분선을 포함할 수 있습니다.

드롭다운

<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>hover 트리거 (기본)</LhButton>
        <template #dropdown>
          <LhDropdownItem command="copy">제발 복사</LhDropdownItem>
          <LhDropdownItem command="move">두루마리로 이동</LhDropdownItem>
          <LhDropdownItem divided command="delete">삭제</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">옵션 {{ i }}</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="contextmenu" placement="bottom-end" @command="onCommand">
        <LhButton>우측 클릭 트리거</LhButton>
        <template #dropdown>
          <LhDropdownItem command="ctx-a">우측 클릭 메뉴 A</LhDropdownItem>
          <LhDropdownItem command="ctx-b" disabled>우측 클릭 메뉴 B (비활성화)</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
    <p class="demo-note">명령: {{ command || '(없음)' }}</p>
    <p class="demo-note">hideOnClick=false일 때 메뉴 항목 클릭 후 자동으로 닫히지 않습니다. :visible.sync로 수동 제어, flip=false로 엄격한 배치.</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">클릭 후 닫지 않기</LhDropdownItem>
          <LhDropdownItem command="keep-2">두 번째 항목</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown :visible.sync="manual" placement="top-start" :flip="false" popper-class="my-popper">
        <LhButton @click="manual = !manual">수동 토글 ({{ manual ? '켜짐' : '꺼짐' }})</LhButton>
        <template #dropdown>
          <LhDropdownItem command="manual-1">수동 메뉴 항목</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown disabled>
        <LhButton disabled>disabled</LhButton>
        <template #dropdown>
          <LhDropdownItem command="never">나타나지 않음</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
  </div>
</template>

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

Props

프로퍼티	설명	타입	기본값
trigger	트리거 방식	'hover' \| 'click' \| 'contextmenu'	'hover'
placement	표시 위치	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'bottom'
flip	주축 방향 공간이 부족할 때 방향을 뒤집을지 여부 (기본 켜짐). false로 설정하면 placement를 엄격히 따르고 뷰포트 벗김을 허용	boolean	true
visible	수동으로 제어하는 표시 상태 (:visible.sync)	boolean	—
disabled	비활성화 여부	boolean	false
hideOnClick	메뉴 항목 클릭 후 자동 닫기 여부	boolean	true
teleportTarget	팝업 레이어 마운트 대상 (선택자 또는 요소, 기본값 body. 2.7에는 Teleport가 없어 host 이동으로 구현)	string \| HTMLElement	—
popperClass	팝업 레이어 사용자 정의 클래스명	string	—
maxHeight	메뉴 최대 높이	string \| number	—
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정 덮어쓰기	Record<string, string>	—
bgPattern	컴포넌트 수준 배경 무늬, ConfigProvider 설정 덮어쓰기	string	—
sx	sx 레이아웃 단축 프로퍼티 (트리거 루트 요소에 적용)	—	—

DropdownItem Props

프로퍼티	설명	타입	기본값
command	명령 식별자. 클릭 시 command 이벤트로 전달	string \| number	—
disabled	비활성화 여부 (접근성 트리에 들어가도록 포커스 가능성 유지)	boolean	false
divided	구분선 표시 여부	boolean	false

Events

이벤트	설명	콜백 매개변수
command	메뉴 항목 클릭	해당 항목의 command
visible-change	표시/숨김 상태 변화	boolean

Slots

슬롯	설명
default	트리거
dropdown	메뉴 콘텐츠 (LhDropdownItem 배치)