ExUI

Appearance

Dropdown 下拉菜单 ​

向下弹出的列表菜单，用于展示操作选项。

基础用法 ​

最基础的下拉菜单用法。

vue
<template>
  <ExDropdown :items="items" @item-click="handleItemClick">
    <ExButton>
      下拉菜单
      <template #suffix>
        <img src="https://api.iconify.design/ri/arrow-down-s-line.svg" alt="arrow" width="16" height="16" />
      </template>
    </ExButton>
  </ExDropdown>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { key: '1', label: '选项一' },
  { key: '2', label: '选项二' },
  { key: '3', label: '选项三' },
])

const handleItemClick = (item) => {
  console.log('Item clicked:', item)
}
</script>

带图标 ​

菜单项可以显示图标。

vue
<template>
  <ExDropdown :items="items" @item-click="handleItemClick">
    <ExButton>操作</ExButton>
  </ExDropdown>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { 
    key: '1', 
    label: '编辑', 
    icon: 'https://api.iconify.design/ri/edit-line.svg' 
  },
  { 
    key: '2', 
    label: '删除', 
    icon: 'https://api.iconify.design/ri/delete-bin-line.svg' 
  },
  { 
    key: '3', 
    label: '分享', 
    icon: 'https://api.iconify.design/ri/share-line.svg' 
  },
])

const handleItemClick = (item) => {
  console.log('Item clicked:', item)
}
</script>

分割线 ​

使用 divided 属性可以在菜单项之间添加分割线。

vue
<template>
  <ExDropdown :items="items" @item-click="handleItemClick">
    <ExButton>文件</ExButton>
  </ExDropdown>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { key: '1', label: '新建文件' },
  { key: '2', label: '新建文件夹' },
  { key: '3', label: '打开', divided: true },
  { key: '4', label: '保存' },
  { key: '5', label: '另存为', divided: true },
  { key: '6', label: '退出' },
])
</script>

禁用选项 ​

可以禁用某些菜单项。

vue
<template>
  <ExDropdown :items="items" @item-click="handleItemClick">
    <ExButton>选项</ExButton>
  </ExDropdown>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { key: '1', label: '可用选项' },
  { key: '2', label: '禁用选项', disabled: true },
  { key: '3', label: '可用选项' },
])
</script>

触发方式 ​

支持 hover、click 和 contextmenu 三种触发方式。

vue
<template>
  <div style="display: flex; gap: 16px;">
    <ExDropdown :items="items" trigger="hover">
      <ExButton>悬停触发</ExButton>
    </ExDropdown>

    <ExDropdown :items="items" trigger="click">
      <ExButton>点击触发</ExButton>
    </ExDropdown>

    <ExDropdown :items="items" trigger="contextmenu">
      <ExButton>右键触发</ExButton>
    </ExDropdown>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { key: '1', label: '选项一' },
  { key: '2', label: '选项二' },
  { key: '3', label: '选项三' },
])
</script>

弹出位置 ​

支持 12 个不同的弹出位置。

vue
<template>
  <ExDropdown :items="items" placement="bottom-start">
    <ExButton>下拉菜单</ExButton>
  </ExDropdown>
</template>

禁用状态 ​

整个下拉菜单可以被禁用。

vue
<template>
  <ExDropdown :items="items" :disabled="true">
    <ExButton disabled>禁用的下拉菜单</ExButton>
  </ExDropdown>
</template>

API ​

属性说明类型默认值
items下拉菜单项列表DropdownItemData[][]
trigger触发方式'hover' | 'click' | 'contextmenu''hover'
placement弹出位置DropdownPlacement'bottom-start'
disabled是否禁用booleanfalse
visible菜单是否显示boolean-
aria-label无障碍标签string-
class自定义CSS类名string | string[] | Record<string, boolean>-
style自定义样式string | Record<string, string | number>-
事件名说明类型
item-click菜单项点击时触发(item: DropdownItemData) => void
update:visible显示状态改变时触发(visible: boolean) => void
show显示时触发() => void
hide隐藏时触发() => void
方法名说明参数
show显示下拉菜单-
hide隐藏下拉菜单-
getElement获取DOM元素-
属性说明类型默认值
label标签文本string-
icon图标URLstring-
disabled是否禁用booleanfalse
divided是否显示分割线booleanfalse

Types ​

typescript
interface DropdownItemData {
  /** 唯一标识 */
  key: string | number
  /** 标签文本 */
  label: string
  /** 图标URL */
  icon?: string
  /** 是否禁用 */
  disabled?: boolean
  /** 是否分割线 */
  divided?: boolean
  /** 子菜单 */
  children?: DropdownItemData[]
  /** 自定义数据 */
  data?: Record<string, unknown>
}
typescript
type DropdownPlacement = 
  | 'top' | 'top-start' | 'top-end'
  | 'bottom' | 'bottom-start' | 'bottom-end'
  | 'left' | 'left-start' | 'left-end'
  | 'right' | 'right-start' | 'right-end'
typescript
type DropdownTrigger = 'hover' | 'click' | 'contextmenu'

无障碍支持 ​

  • 支持键盘导航
  • 提供 ARIA 标签
  • 支持屏幕阅读器
  • 支持高对比度模式
  • 支持减少动画模式

主题定制 ​

下拉菜单组件使用 CSS 变量进行主题定制：

css
.ex-dropdown {
  --ex-dropdown-bg: var(--ex-color-bg-secondary);
  --ex-dropdown-border: var(--ex-color-border-primary);
  --ex-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}