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

topLeft

   top

   topRight

   bottomLeft

   bottom

   bottomRight

   right-top

   right

   right-bottom

   left-top

   left

   left-bottom

:::

::: 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	下拉面板是否可见	true false
trigger	触发方式,类型 string 或 trigger 数组	click hover focus contextMenu
disabled	是否禁用触发	true false
placement	下拉面板位置	top bottom right left *-left *-right *-top *-bottom
autoFitPosition	是否自动调整下拉面板位置，默认 true	true false
autoFitWidth	是否将下拉面板宽度设置为触发器宽度, 默认 false	true false
autoFitMinWidth	是否将下拉面板最小宽度设置为触发器宽度, 默认 true	true false
updateAtScroll	是否在容器滚动时更新下拉面板的位置,默认 false	true false
autoFixPosition	是否在触发器或下拉面板尺寸变化时更新下拉面板位置, 面板尺寸变化参见级联选择器,默认 true	true false
clickToClose	是否在点击触发器时关闭面板,默认 true	true false
blurToClose	是否在触发器失去焦点时关闭面板,默认 true	true false
clickOutsideToClose	是否点击外部关闭下拉面板,默认 true	true false
contentOffset	下拉面板距离触发器的偏移距离，默认 2	-

:::

::: title Dropdown 插槽 :::

::: table

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

:::

::: title Dropdown 事件 :::

::: table

插槽	描述	参数
hide	隐藏下拉内容后触发	--
open	显示下拉内容后触发	--

:::

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

::: table

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

:::

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

::: table

插槽	描述	参数
trigger	触发方式,类型 string 或 trigger 数组,默认 hover	click hover focus contextMenu
disabled	是否禁用触发	true false
placement	下拉面板位置,默认 right-top	top bottom right left *-left *-right *-top *-bottom
contentOffset	下拉面板距离触发器的偏移距离，默认 2	-

:::

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

::: table

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

:::

::: contributor dropdown :::

::: previousNext dropdown :::