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）