Navigation 导航组件 |
您所在的位置：网站首页 › element下拉菜单点击不显示下拉菜单 › Navigation 导航组件 |
|
Dropdown 下拉菜单基础用法触发对象触发方式菜单隐藏方式指令事件不同尺寸Dropdown AttributesDropdown EventsDropdown Menu Item AttributesDropdown 下拉菜单 将动作或菜单折叠到下拉菜单中。 基础用法移动到下拉菜单上，展开更多操作。 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 触发对象可使用按钮触发下拉菜单。 设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。 更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 .el-dropdown { vertical-align: top; } .el-dropdown + .el-dropdown { margin-left: 15px; } .el-icon-arrow-down { font-size: 12px; } export default { methods: { handleClick() { alert('button click'); } } }显示代码 触发方式可以配置 click 激活或者 hover 激活。 在trigger属性设置为click即可。 hover 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 click 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 菜单隐藏方式可以hide-on-click属性来配置。 下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } 指令事件点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } export default { methods: { handleCommand(command) { this.$message('click on item ' + command); } } } 不同尺寸Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。 额外的尺寸：medium、small、mini，通过设置size属性来配置它们。 默认尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 中等尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 小型尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 超小尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 Dropdown Attributes 参数 说明 类型 可选值 默认值 type 菜单按钮类型，同 Button 组件(只在split-button为 true 的情况下有效) string — — size 菜单尺寸，在split-button为 true 的情况下也对触发按钮生效 string medium / small / mini — split-button 下拉触发元素呈现为按钮组 boolean — false placement 菜单弹出位置 string top/top-start/top-end/bottom/bottom-start/bottom-end bottom-end trigger 触发下拉的行为 string hover, click hover hide-on-click 是否在点击菜单项后隐藏菜单 boolean — true show-timeout 展开下拉菜单的延时（仅在 trigger 为 hover 时有效） number — 250 hide-timeout 收起下拉菜单的延时（仅在 trigger 为 hover 时有效） number — 150 Dropdown Events 事件名称 说明 回调参数 click split-button 为 true 时，点击左侧按钮的回调 — command 点击菜单项触发的事件回调 dropdown-item 的指令 visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false Dropdown Menu Item Attributes 参数 说明 类型 可选值 默认值 command 指令 string/number/object — — disabled 禁用 boolean — false divided 显示分割线 boolean — false原文: http://element-cn.eleme.io/#/zh-CN/component/dropdown |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |