Dropdown 下拉菜单组件

下拉菜单组件。

基础用法

悬停在下拉菜单上以展开更多操作。

通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

Dropdown List

• Action 1
• Action 2
• Action 3
• Action 4
• Action 5

<template>
  <my-dropdown>
    <span class="my-dropdown-link"> Dropdown List </span>
    <template #dropdown>
      <my-dropdown-menu>
        <my-dropdown-item>Action 1</my-dropdown-item>
        <my-dropdown-item>Action 2</my-dropdown-item>
        <my-dropdown-item>Action 3</my-dropdown-item>
        <my-dropdown-item disabled>Action 4</my-dropdown-item>
        <my-dropdown-item divided>Action 5</my-dropdown-item>
      </my-dropdown-menu>
    </template>
  </my-dropdown>
</template>

<style scoped>
  .my-dropdown-link {
    cursor: pointer;
    color: var(--my-color-primary);
    display: flex;
    align-items: center;
  }
</style>

位置

支持 6 个位置。

设置 placement 属性，使下拉菜单出现在不同位置。

• The Action 1st
• The Action 2st
• The Action 3st

• The Action 1st
• The Action 2st
• The Action 3st

• The Action 1st
• The Action 2st
• The Action 3st

• The Action 1st
• The Action 2st
• The Action 3st

• The Action 1st
• The Action 2st
• The Action 3st

• The Action 1st
• The Action 2st
• The Action 3st

<template>
  <div class="box">
    <my-dropdown placement="top-start">
      <my-button> topStart </my-button>
      <template #dropdown>
        <my-dropdown-menu>
          <my-dropdown-item>The Action 1st</my-dropdown-item>
          <my-dropdown-item>The Action 2st</my-dropdown-item>
          <my-dropdown-item>The Action 3st</my-dropdown-item>
        </my-dropdown-menu>
      </template>
    </my-dropdown>
    <my-dropdown placement="top">
      <my-button> top </my-button>
      <template #dropdown>
        <my-dropdown-menu>
          <my-dropdown-item>The Action 1st</my-dropdown-item>
          <my-dropdown-item>The Action 2st</my-dropdown-item>
          <my-dropdown-item>The Action 3st</my-dropdown-item>
        </my-dropdown-menu>
      </template>
    </my-dropdown>
    <my-dropdown placement="top-end">
      <my-button> topEnd </my-button>
      <template #dropdown>
        <my-dropdown-menu>
          <my-dropdown-item>The Action 1st</my-dropdown-item>
          <my-dropdown-item>The Action 2st</my-dropdown-item>
          <my-dropdown-item>The Action 3st</my-dropdown-item>
        </my-dropdown-menu>
      </template>
    </my-dropdown>
    <my-dropdown placement="bottom-start">
      <my-button> bottomStart </my-button>
      <template #dropdown>
        <my-dropdown-menu>
          <my-dropdown-item>The Action 1st</my-dropdown-item>
          <my-dropdown-item>The Action 2st</my-dropdown-item>
          <my-dropdown-item>The Action 3st</my-dropdown-item>
        </my-dropdown-menu>
      </template>
    </my-dropdown>
    <my-dropdown placement="bottom">
      <my-button> bottom </my-button>
      <template #dropdown>
        <my-dropdown-menu>
          <my-dropdown-item>The Action 1st</my-dropdown-item>
          <my-dropdown-item>The Action 2st</my-dropdown-item>
          <my-dropdown-item>The Action 3st</my-dropdown-item>
        </my-dropdown-menu>
      </template>
    </my-dropdown>
    <my-dropdown placement="bottom-end">
      <my-button> bottomEnd </my-button>
      <template #dropdown>
        <my-dropdown-menu>
          <my-dropdown-item>The Action 1st</my-dropdown-item>
          <my-dropdown-item>The Action 2st</my-dropdown-item>
          <my-dropdown-item>The Action 3st</my-dropdown-item>
        </my-dropdown-menu>
      </template>
    </my-dropdown>
  </div>
</template>

<style scoped>
  .box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
  }
</style>

触发方式

支持点击和悬停两种触发方式。

设置 trigger 属性为 click 即可使用点击触发。

<template>
  <my-row class="block-col-2">
    <div class="col-2">
      <span class="demonstration">hover to trigger</span>
      <my-dropdown>
        <span class="my-dropdown-link">
          Dropdown List<my-icon class="my-icon--right"><arrow-down /></my-icon>
        </span>
        <template #dropdown>
          <my-dropdown-menu>
            <my-dropdown-item :icon="Plus">Action 1</my-dropdown-item>
            <my-dropdown-item :icon="CirclePlusFilled"> Action 2 </my-dropdown-item>
            <my-dropdown-item :icon="CirclePlus">Action 3</my-dropdown-item>
            <my-dropdown-item :icon="Check">Action 4</my-dropdown-item>
            <my-dropdown-item :icon="CircleCheck">Action 5</my-dropdown-item>
          </my-dropdown-menu>
        </template>
      </my-dropdown>
    </div>
    <div class="col-2">
      <span class="demonstration">click to trigger</span>
      <my-dropdown trigger="click">
        <span class="my-dropdown-link"> Dropdown List </span>
        <template #dropdown>
          <my-dropdown-menu>
            <my-dropdown-item :icon="Plus">Action 1</my-dropdown-item>
            <my-dropdown-item :icon="CirclePlusFilled"> Action 2 </my-dropdown-item>
            <my-dropdown-item :icon="CirclePlus">Action 3</my-dropdown-item>
            <my-dropdown-item :icon="Check">Action 4</my-dropdown-item>
            <my-dropdown-item :icon="CircleCheck">Action 5</my-dropdown-item>
          </my-dropdown-menu>
        </template>
      </my-dropdown>
    </div>
    <div class="col-2">
      <span class="demonstration">right click to trigger</span>
      <my-dropdown trigger="contextmenu">
        <span class="my-dropdown-link">
          Dropdown List<my-icon class="my-icon--right"><arrow-down /></my-icon>
        </span>
        <template #dropdown>
          <my-dropdown-menu>
            <my-dropdown-item>Action 1</my-dropdown-item>
            <my-dropdown-item> Action 2 </my-dropdown-item>
            <my-dropdown-item>Action 3</my-dropdown-item>
            <my-dropdown-item>Action 4</my-dropdown-item>
            <my-dropdown-item>Action 5</my-dropdown-item>
          </my-dropdown-menu>
        </template>
      </my-dropdown>
    </div>
  </my-row>
</template>

<script setup></script>
<style scoped>
  .block-col-2 {
    display: flex;
    justify-content: space-between;
  }

  .block-col-2 .demonstration {
    display: block;
    color: var(--my-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }

  .block-col-2 .my-dropdown-link {
    display: flex;
    align-items: center;
  }

  .col-2 {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
</style>

菜单隐藏方式

可以通过 hide-on-click 属性来配置。

下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性设置为 false 可以关闭此功能。

Dropdown List

• Action 1
• Action 2
• Action 3
• Action 4
• Action 5

<template>
  <my-dropdown :hide-on-click="false">
    <span class="my-dropdown-link"> Dropdown List </span>
    <template #dropdown>
      <my-dropdown-menu>
        <my-dropdown-item command="a">Action 1</my-dropdown-item>
        <my-dropdown-item command="b">Action 2</my-dropdown-item>
        <my-dropdown-item command="c">Action 3</my-dropdown-item>
        <my-dropdown-item
          command="d"
          disabled
          >Action 4
        </my-dropdown-item>
        <my-dropdown-item
          command="e"
          divided
          >Action 5
        </my-dropdown-item>
      </my-dropdown-menu>
    </template>
  </my-dropdown>
</template>

<style scoped>
  .my-dropdown-link {
    cursor: pointer;
    color: var(--my-color-primary);
    display: flex;
    align-items: center;
  }
</style>

指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

Dropdown

• Action 1
• Action 2
• Action 3
• Action 4
• Action 5

<template>
  <my-dropdown @command="handleCommand">
    <span class="my-dropdown-link"> Dropdown </span>
    <template #dropdown>
      <my-dropdown-menu>
        <my-dropdown-item command="a">Action 1</my-dropdown-item>
        <my-dropdown-item command="b">Action 2</my-dropdown-item>
        <my-dropdown-item command="c">Action 3</my-dropdown-item>
        <my-dropdown-item
          command="d"
          disabled
          >Action 4</my-dropdown-item
        >
        <my-dropdown-item
          command="e"
          divided
          >Action 5</my-dropdown-item
        >
      </my-dropdown-menu>
    </template>
  </my-dropdown>
</template>

<script setup>
  import createMessage from '@/components/Message/method.ts'
  const handleCommand = (command) => {
    createMessage({
      message: `click on item ${command}`,
      type: 'info',
    })
  }
</script>

<style scoped>
  .my-dropdown-link {
    cursor: pointer;
    color: var(--my-color-primary);
    display: flex;
    align-items: center;
  }
</style>

Dropdown API

Dropdown Attributes

属性名	说明	类型	Default
placement	下拉菜单弹出位置	ComputedPlacement	—
trigger	触发方式	hover | click	hover
disabled	是否禁用	boolean	false
popperOptions	Popper.js 配置项	Partial<Options>	—
showTimeout	显示延迟（毫秒）	number	150
hideTimeout	隐藏延迟（毫秒）	number	150
hideOnClick	点击菜单项后是否隐藏	boolean	true

Dropdown Slots

插槽名	说明	子标签
default	下拉菜单的内容。 注意：必须是有效的 html DOM 元素（例如 <span>、<button> 等）或 组件，以附加监听触发器	—
dropdown	下拉菜单内容	Dropdown-Menu

Dropdown Events

事件名	说明	类型
command	点击菜单项触发	(command: commandType) => ()
visible-change	下拉菜单出现/隐藏时触发	(visible: boolean) => ()

Dropdown Exposes

方法名	说明	Type
handleOpen	打开下拉菜单	() => void
handleClose	关闭下拉菜单	() => void

Dropdown-Menu API

Dropdown-Menu Slots

插槽名	说明	子标签
default	下拉菜单的内容	Dropdown-Item

Dropdown-Item API

Dropdown-Item Attributes

属性名	说明	Type	默认值
command	派发到command回调函数的指令参数	string / number / object	—
disabled	是否禁用	boolean	false
divided	是否显示分隔符	boolean	false

Dropdown-Item Slots

插槽名	说明
default	自定义Dropdown-Item内容