ElementPlus Dropdown 下拉菜单

您所在的位置:网站首页 element下拉菜单事件 ElementPlus Dropdown 下拉菜单

ElementPlus Dropdown 下拉菜单

2024-06-08 13:04| 来源: 网络整理| 查看: 265

Dropdown 下拉菜单

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

基础用法

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

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

下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 .el-dropdown-link { cursor: pointer; color: #409eff; } .el-icon-arrow-down { font-size: 12px; } 触发对象

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

设置split-button属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true即可。

更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 export default { methods: { handleClick() { alert('button click') }, }, } .el-dropdown { vertical-align: top; } .el-dropdown + .el-dropdown { margin-left: 15px; } .el-icon-arrow-down { font-size: 12px; } 触发方式

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

在trigger属性设置为click即可。

hover 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 click 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 右键(contextmenu) 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 .el-dropdown-link { cursor: pointer; color: #409eff; } .el-icon-arrow-down { font-size: 12px; } .demonstration { display: block; color: var(--el-text-color-secondary); font-size: 14px; margin-bottom: 20px; } 菜单隐藏方式

可以hide-on-click属性来配置。

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

下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 .el-dropdown-link { cursor: pointer; color: #409eff; } .el-icon-arrow-down { font-size: 12px; } 指令事件

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

下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 export default { methods: { handleCommand(command) { this.$message('click on item ' + command) }, }, } .el-dropdown-link { cursor: pointer; color: #409eff; } .el-icon-arrow-down { font-size: 12px; } 不同尺寸

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

额外的尺寸:medium、small、mini,通过设置size属性来配置它们。

默认尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 中等尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 小型尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 超小尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 Dropdown Attributes参数说明类型可选值默认值type菜单按钮类型,同 Button 组件(只在split-button为 true 的情况下有效)string——size菜单尺寸,在split-button为 true 的情况下也对触发按钮生效stringmedium / small / mini—max-height菜单最大高度string / number——split-button下拉触发元素呈现为按钮组boolean—falsedisabled是否禁用boolean—falseplacement菜单弹出位置stringtop/top-start/top-end/bottom/bottom-start/bottom-endbottomtrigger触发下拉的行为stringhover, click, contextmenuhoverhide-on-click是否在点击菜单项后隐藏菜单boolean—trueshow-timeout展开下拉菜单的延时(仅在 trigger 为 hover 时有效)number—250hide-timeout收起下拉菜单的延时(仅在 trigger 为 hover 时有效)number—150tabindexDropdown 组件的 tabindexnumber—0Dropdown SlotsName说明—触发下拉列表显示的元素。 注意: 必须是一个元素或者或者组件dropdown下拉列表,通常是  组件Dropdown Events事件名称说明回调参数clicksplit-button 为 true 时,点击左侧按钮的回调—command点击菜单项触发的事件回调dropdown-item 的指令visible-change下拉框出现/隐藏时触发出现则为 true,隐藏则为 false¶Dropdown Menu Item Attributes参数说明类型可选值默认值command指令string/number/object——disabled禁用boolean—falsedivided显示分割线boolean—falseicon图标类名string——



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3