Tui

Dropdown 下拉菜单

下拉菜单，通过 slot 自定义触发元素，支持 click 和 hover 触发

基础用法

通过 slot 自定义触发元素，支持 click（默认）和 hover 两种触发方式。菜单项支持 desc 描述信息。

示例代码

vue

尺寸与禁用

支持 small / medium 两种尺寸；支持整个下拉禁用或单项禁用。

示例代码

vue

弹出位置

通过 placement 控制下拉菜单的弹出方向，支持 8 个位置。

示例代码

vue

自定义插槽

dropdown 插槽使用 TsDropdownMenu + TsDropdownItem 完全自定义菜单；content 插槽自定义 list 项渲染。

示例代码

vue

属性 Props

list

菜单项数据

Array<DropdownItem>

[]

disabled

是否禁用

boolean

false

nowrap

菜单项文字是否换行

boolean

false

width

下拉菜单宽度

string | number

auto

size

下拉菜单尺寸

'small' | 'medium'

small / medium

medium

placement

下拉菜单位置

string

bottom-start / top-start / bottom-end / top-end / left-center / right-center / left-start / right-start / left-end / right-end

bottom-start

trigger

触发方式

'click' | 'hover'

click / hover

click

事件 Events

click

点击菜单项时触发

(item: DropdownItem): void

插槽 Slots

default

自定义触发元素

dropdown

自定义下拉菜单内容，使用 TsDropdownMenu + TsDropdownItem 组合，优先级高于 list

top

自定义下拉菜单顶部内容，在选项列表上方显示

content

自定义菜单项内容，替换默认的label和desc显示

bottom

自定义下拉菜单底部内容，在选项列表下方显示

DropdownItem Type

label

菜单项label

string

value

菜单项value

string | number | boolean

disabled

是否禁用

boolean

false

desc

菜单项描述

string

hidden

是否隐藏

boolean

false

[key: string]

支持用户自定义的任意属性

any

基础用法

尺寸与禁用

弹出位置

自定义插槽

属性 Props

事件 Events

插槽 Slots

DropdownItem Type