Dropdown 下拉菜单​

欧洲世界杯名额

Dropdown 下拉菜单​

admin
2025-11-18 22:38:32

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

基础用法 ​悬停在下拉菜单上以展开更多操作。

通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

Dropdown List vue

隐藏源代码位置 ​支持 6 个位置。

设置 placement 属性，使下拉菜单出现在不同位置。

topStart top topEnd bottomStart bottom bottomEnd vue

隐藏源代码触发对象 ​可使用按钮触发下拉菜单。

设置 split-button 属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为 true 即可。 如果你想要在第三和第四个选项之间添加一个分隔符，你只需要为第四个选项添加一个 divided 的属性。

Dropdown List Dropdown List vue

隐藏源代码触发方式 ​可以配置点击激活或者悬停激活。

将 trigger 属性设置为 click 即可， 默认为 hover。

hover to trigger Dropdown Listclick to trigger Dropdown Listright click to trigger Dropdown Listvue

隐藏源代码菜单隐藏方式 ​可以通过 hide-on-click 属性来配置。

下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性设置为 false 可以关闭此功能。

Dropdown Listvue

隐藏源代码指令事件 ​点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

Dropdown Listvue

隐藏源代码下拉方法 ​您可以手动使用 手动打开 或 手动关闭下拉菜单以打开或关闭

open(close) the Dropdown list2 will close(open) the Dropdown List1.

show Dropdown List1 Dropdown List2 vue

隐藏源代码尺寸 ​Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。

使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small

Large Default Small vue

隐藏源代码虚拟触发2.11.3 ​有时候我们想把 dropdown 的触发元素放在别的地方，而不需要写在一起，这时候就可以使用虚拟触发。

Right click vue

隐藏源代码Dropdown API ​Dropdown Attributes ​属性名说明类型Defaulttype菜单按钮类型，同 Button 组件一样，仅在 split-button 为 true 的情况下有效。enum''size菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效。enum''button-props按钮组件的 props，参考 按钮属性object—max-height菜单最大高度string / number''split-button下拉触发元素呈现为按钮组booleanfalsedisabled是否禁用booleanfalseplacement菜单弹出位置enumbottomeffectTooltip 主题，内置了 dark / light 两种主题enum / stringlighttrigger触发下拉的行为enum / objecthovertrigger-keys 2.9.1指定键盘上哪些按键可以触发操作array['Enter', 'Space', 'ArrowDown', 'NumpadEnter']virtual-triggering 2.11.3是否启用虚拟触发器boolean—virtual-ref 2.11.3指示下拉框所依附的参考元素HTMLElement—hide-on-click是否在点击菜单项后隐藏菜单booleantrueshow-arrow 2.11.3tooltip 的内容是否有箭头booleantrueshow-timeout展开下拉菜单的延时，仅在 trigger 为 hover 时有效number150hide-timeout收起下拉菜单的延时（仅在 trigger 为 hover 时有效）number150role下拉菜单的 ARIA 属性。 根据具体场景，您可能想要将此更改为“navigation”enummenutabindexDropdown 组件的 tabindexnumber / string0popper-class自定义浮层类名string / object''popper-style 2.11.5自定义浮层类名string / object—popper-optionspopper.js 参数object{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}teleported 2.2.20是否将下拉列表插入至 body 元素booleantruepersistent 2.9.5当下拉菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁booleantrueDropdown Slots ​插槽名说明子标签default下拉菜单的内容。 注意：必须是有效的 html DOM 元素（例如 、