layui/package/document-component/src/document/zh-CN/components/dropdown.md

::: anchor :::

::: title 基本介绍 :::

::: describe 当页面上的操作命令过多时，用此组件可以收纳操作元素。 :::

::: title 基础使用 :::

::: demo

下拉菜单 选项一 选项二 选项三 下拉菜单 选项一 选项二 选项三

:::

::: title 触发方式 :::

::: demo

Hover 触发 选项一 选项二 选项三 Click 触发 选项一 选项二 选项三 contextMenu 触发 选项一 选项二 选项三 选项一 选项二 选项三 选项一 选项二 选项三

:::

::: title 手动打开或关闭 :::

::: demo

打开 关闭

下拉菜单 选项一 选项二 选项三

:::

::: title 默认打开 :::

::: demo

下拉菜单 选项一 选项二 选项三

:::

::: title 禁用弹出 :::

::: demo

禁用弹出 选项一 选项二 选项三

::: ::: title 事件处理 :::

::: demo

当前状态:{{stat}} 选项一 选项二 选项三

:::

::: title 弹出位置 :::

::: demo

top-start

top

top-end

bottom-start

bottom

bottom-end

right-start

right

right-end

left-start

left

left-end

:::

::: title 菜单插槽 :::

::: demo

图标菜单 返回 Alt + 向左键 刷新 Ctrl + R 更多

:::

::: title 多级菜单 :::

::: demo

下拉菜单 选项一 选项二 子菜单一 子菜单二 子菜单三 菜单1 菜单2 菜单3 子菜单四 菜单1 菜单2 菜单3 选项三

:::

::: title 其它属性 :::

::: demo

autoFitWidth 选项一 选项二1111111111111111111111 选项三 关闭 autoFitMinWidth 选项一 选项二111111111 选项三 updateAtScroll 选项一 选项二111111111 选项三 contentOffset: 8px 选项一 选项二 选项三

:::

::: title Dropdown 属性 :::

::: table

属性	描述	类型	默认值	可选值
visible	下拉面板是否可见	boolean	true	true false
trigger	触发方式,类型 string 或 trigger 数组	strine string[]	click	click hover focus contextMenu
disabled	是否禁用触发	boolean	false	true false
placement	下拉面板位置	string	bottom	top bottom right left *-start *-end
autoFitPosition	是否自动调整下拉面板位置	boolean	true	true false
autoFitWidth	是否将下拉面板宽度设置为触发器宽度	boolean	false	true false
autoFitMinWidth	是否将下拉面板最小宽度设置为触发器宽度	boolean	true	true false
updateAtScroll	是否在容器滚动时更新下拉面板的位置	boolean	false	true false
autoFixPosition	是否在触发器或下拉面板尺寸变化时更新下拉面板位置	boolean	true	true false
clickToClose	是否在点击触发器时关闭面板	boolean	true	true false
blurToClose	是否在触发器失去焦点时关闭面板	boolean	true	true false
clickOutsideToClose	是否点击外部关闭下拉面板	boolean	true	true false
contentOffset	下拉面板距离触发器的偏移距离	string	2px	-
mouseEnterDelay	mouseEnter 事件延迟触发的时间, trigger hover 有效	number	150	-
mouseLeaveDelay	mouseLeave 事件延迟触发的时间, trigger hover 有效	number	150	-
focusDelay	focus 事件延迟触发的时间, trigger focus 有效	number	150	-

:::

::: title Dropdown 插槽 :::

::: table

插槽	描述	可选值
content	下拉内容	--

:::

::: title Dropdown 事件 :::

::: table

插槽	描述	参数
hide	隐藏下拉面板后触发	--
show	显示下拉面板后触发	--

:::

::: title Dropdown Menu Item 插槽 :::

::: table

插槽	描述	参数
prefix	前缀	--
default	默认	--
suffix	后缀	--

:::

::: title Dropdown Sub Menu 属性 :::

::: table

属性	描述	类型	默认值	可选值
trigger	触发方式,类型 string 或 trigger 数组	strine string[]	click	click hover focus contextMenu
disabled	是否禁用触发	boolean	false	true false
placement	下拉面板位置	string	bottom	top bottom right left *-start *-end
contentOffset	下拉面板距离触发器的偏移距离，默认 2	string	2px	-

:::

::: title Dropdown Sub Menu 插槽 :::

::: table

插槽	描述	参数
prefix	前缀	--
default	默认	--
suffix	后缀	--
content	下拉面板内容	--

:::

::: contributor dropdown :::

::: previousNext dropdown :::