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 を配置）