Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

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

通过设置 options 来设置下拉触发的元素。 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

Dropdown List

<script lang="ts" setup>
import SiDropdown from '@/components/Dropdown/Dropdown.tsx'
import type { MenuOption } from '@/components/Dropdown/types'
import Icon from '@/components/Icon/Icon.vue'

const options: MenuOption[] = [
  { key: 1, label: 'Action 1' },
  { key: 2, label: 'Action 2', disabled: true },
  { key: 3, label: 'Action 3' },
  { key: 4, label: 'Action 4', divided: true },
]
</script>

<template>
  <div>
    <SiDropdown
      :menu-options="options"
      trigger="hover"
    >
      <span class="si-dropdown-link">
        Dropdown List
        <Icon icon="fa-chevron-down" class="si-icon--right" />
      </span>
    </SiDropdown>
  </div>
</template>

<style>
.si-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #38bdf8;
}
.si-icon--right {
  margin-left: 5px;
}
</style>

位置

支持 6 个位置。

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

<script lang="ts" setup>
import SiDropdown from '@/components/Dropdown/Dropdown.tsx'
import type { MenuOption } from '@/components/Dropdown/types'
import SiButton from '@/components/Button/Button.vue'

const options: MenuOption[] = [
  { key: 1, label: 'The Action 1st' },
  { key: 2, label: 'The Action 2st' },
  { key: 3, label: 'The Action 3st' },
]
</script>

<template>
  <div class="position">
    <SiDropdown
      :menu-options="options"
      trigger="hover"
      placement="top-start"
    >
      <SiButton>topStart</SiButton>
    </SiDropdown>

    <SiDropdown
      :menu-options="options"
      trigger="hover"
      placement="top"
    >
      <SiButton>top</SiButton>
    </SiDropdown>
    <SiDropdown
      :menu-options="options"
      trigger="hover"
      placement="top-end"
    >
      <SiButton>topEnd</SiButton>
    </SiDropdown>
    <SiDropdown
      :menu-options="options"
      trigger="hover"
      placement="bottom-start"
    >
      <SiButton>bottomStart</SiButton>
    </SiDropdown>
    <SiDropdown
      :menu-options="options"
      trigger="hover"
      placement="bottom"
    >
      <SiButton>bottom</SiButton>
    </SiDropdown>
    <SiDropdown
      :menu-options="options"
      trigger="hover"
      placement="bottom-end"
    >
      <SiButton>bottomEnd</SiButton>
    </SiDropdown>
  </div>
</template>

<style>
.position {
  display: flex;
  justify-content: space-around;
}
</style>

触发方式

可以配置点击激活或者悬停激活。

将 trigger 属性设置为 click 即可

hover to trigger

Dropdown List

click to trigger

Dropdown List

<script lang="ts" setup>
import SiDropdown from '@/components/Dropdown/Dropdown.tsx'
import type { MenuOption } from '@/components/Dropdown/types'
import Icon from '@/components/Icon/Icon.vue'

const options: MenuOption[] = [
  { key: 1, label: 'Action 1' },
  { key: 2, label: 'Action 2' },
  { key: 3, label: 'Action 3' },
  { key: 4, label: 'Action 4' },
]
</script>

<template>
  <div class="trigger-layout">
    <div>
      <div>
        <span>hover to trigger</span>
      </div>
      <SiDropdown
        :menu-options="options"
        trigger="hover"
      >
        <span class="si-dropdown-link">
          Dropdown List
          <Icon icon="fa-chevron-down" class="si-icon--right" />
        </span>
      </SiDropdown>
    </div>
    <div>
      <div>
        <span>click to trigger</span>
      </div>
      <SiDropdown
        :menu-options="options"
        trigger="click"
      >
        <span class="si-dropdown-link">
          Dropdown List
          <Icon icon="fa-chevron-down" class="si-icon--right" />
        </span>
      </SiDropdown>
    </div>
  </div>
</template>

<style>
.si-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #38bdf8;
}
.si-icon--right {
  margin-left: 5px;
}
.trigger-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  justify-items: center;
}
</style>

下拉方法

您可以手动使用 手动打开 或 手动关闭下拉菜单以打开或关闭

open(close) the Dropdown list

Dropdown List

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import SiDropdown from '@/components/Dropdown/Dropdown.tsx'
import type { MenuOption } from '@/components/Dropdown/types'
import SiButton from '@/components/Button/Button.vue'
import type { Options } from '@/components/Tooltip/types'
import type { TooltipInstance } from '@/components/Tooltip/type.ts'

const dropdowRef = ref<TooltipInstance | null>(null)

const options: MenuOption[] = [
  { key: 1, label: 'Action 1' },
  { key: 2, label: 'Action 2', disabled: true },
  { key: 3, label: 'Action 3' },
  { key: 4, label: 'Action 4', divided: true },
]
const popperOptions: Partial<Options> = reactive({
  manual: true,
})
function showClick() {
  dropdowRef.value?.show()
}
function closeClick() {
  dropdowRef.value?.hide()
}
</script>

<template>
  <div>
    <div style="font-size: 14px">
      <p>open(close) the Dropdown list</p>
    </div>
    <div style="margin: 15px">
      <SiButton @click="showClick">
        show
      </SiButton>
      <SiButton @click="closeClick">
        hide
      </SiButton>
    </div>
    <SiDropdown
      ref="dropdowRef"
      :menu-options="options"
      trigger="hover"
      :popper-options="popperOptions"
    >
      <span class="si-dropdown-link">
        Dropdown List
      </span>
    </SiDropdown>
  </div>
</template>

<style>
.si-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #38bdf8;
}
.si-icon--right {
  margin-left: 5px;
}
</style>

Dropdown API

Dropdown Attributes

属性名	说明	类型	Default
placement	菜单弹出位置	enum	bottom
trigger	触发下拉的行为	enum	—
disabled	是否禁用	boolean	false
openDelay	打开延迟	number	0
closeDelay	关闭延迟	number	0
popperOptions	popper.js 参数 参考tooltip组件	object	—

menuOptions Attributes

属性名	说明	Type	默认值
divided	是否显示分隔符	boolean	false
disabled	是否禁用	boolean	false

Dropdown Slots

插槽名	说明	子标签
default	下拉菜单触发内容。 注意：必须是有效的 html DOM 元素（例如 <span>、<button> 等）	—

Dropdown Events

事件名	说明	类型
visible-change	当下拉菜单出现/消失时触发器, 当它出现时, 参数将是 true, 否则将是 false	Function
select	当下拉项被点击时触发	Function

dropdown Exposes

方法名	说明	Type
show	打开下拉菜单	Function
hide	关闭下拉菜单	Function