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

基础用法

移动到下拉菜单上,展开更多操作。

悬浮展开
显示代码

触发对象

可使用按钮触发下拉菜单。

自动生成Button
显示代码

触发方式

可以配置 click 激活或者 hover 激活。

hover触发 |==============| click触发
显示代码

菜单隐藏方式

可以hideOnClick属性来配置。

点击子菜单不关闭
显示代码

指令事件

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

点击子菜单触发事件
显示代码

不同尺寸

Dropdown 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的尺寸。

默认尺寸 中等尺寸 小型尺寸 超小尺寸
显示代码

参数

你可以通过修改$.fn.dropdown.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(el).dropdown({xx: xx})。 参数默认为 Json ,若为数组,则会被当做data赋值。

参数 说明 类型 可选值 默认值
data 子菜单数组,具体配置见下方【data参数】 array - []
type 菜单按钮类型,同 Button 组件(只在splitButton为 true 的情况下有效) string - -
size 菜单尺寸,在splitButton为 true 的情况下也对触发按钮生效 string medium / small / mini -
splitButton 下拉触发元素呈现为按钮组 boolean - false
placement 菜单弹出位置 string top/top-start/top-end/bottom/bottom-start/bottom-end bottom-end
trigger 触发下拉的行为 string hover, click hover
hideOnClick 是否在点击菜单项后隐藏菜单 boolean - true
hideOnOutside 是否在点击元素外内容后隐藏菜单 boolean - true
showTimeout 展开下拉菜单的延时(仅在 trigger 为 hover 时有效) number - 250
hideTimeout 收起下拉菜单的延时(仅在 trigger 为 hover 时有效) number - 150
click splitButton 为 true 时,点击左侧按钮的回调 function - -
command 点击菜单项触发的事件回调,参数为data对象的command function - -
visibleChange 下拉框出现/隐藏时触发,参数出现为 true,隐藏为 false function - -

data参数

参数默认为 Json ,若为string,则会被当做content赋值。

参数 说明 类型 可选值 默认值
content 本子菜单内容 string - -
command 指令 - - 与content一致
disabled 禁用 boolean - false
divided 显示分割线 boolean - false