037_Dropdown下拉菜单
1. Dropdown下拉菜单
1.1. Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。
1.2. 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时有效) |
boolean |
无 |
250 |
|
hide-timeout |
收起下拉菜单的延时(仅在trigger为hover时有效) |
boolean |
无 |
150 |
|
tabindex |
Dropdown组件的tabindex |
boolean |
无 |
0 |
|
disabled |
是否禁用 |
boolean |
无 |
false |
1.3. Dropdown Slots
|
Name |
说明 |
|
— |
触发下拉列表显示的元素。 注意: 必须是一个元素或者或者组件 |
|
dropdown |
下拉列表, 通常是<el-dropdown-menu>组件 |
1.4. Dropdown Events
|
事件名称 |
说明 |
回调参数 |
|
click |
split-button为true时, 点击左侧按钮的回调 |
无 |
|
command |
点击菜单项触发的事件回调 |
dropdown-item的指令 |
|
visible-change |
下拉框出现/隐藏时触发 |
出现则为true, 隐藏则为false |
1.5. Dropdown Menu Item Attributes
|
参数 |
说明 |
类型 |
默认值 |
|
command |
指令 |
string/number/object |
无 |
|
disabled |
禁用 |
boolean |
false |
|
divided |
显示分割线 |
boolean |
false |
|
icon |
图标类名 |
string |
无 |
2. Dropdown下拉菜单例子
2.1. 使用脚手架新建一个名为element-ui-dropdown的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Dropdown from '../components/Dropdown.vue'
import ButtonDropdown from '../components/ButtonDropdown.vue'
import ClickDropdown from '../components/ClickDropdown.vue'
import HideClickDropdown from '../components/HideClickDropdown.vue'
import CommandDropdown from '../components/CommandDropdown.vue'
import SizeDropdown from '../components/SizeDropdown.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Dropdown' },{ path: '/Dropdown', component: Dropdown },{ path: '/ButtonDropdown', component: ButtonDropdown },{ path: '/ClickDropdown', component: ClickDropdown },{ path: '/HideClickDropdown', component: HideClickDropdown },{ path: '/CommandDropdown', component: CommandDropdown },{ path: '/SizeDropdown', component: SizeDropdown }
]const router = new VueRouter({routes
})export default router2.3. 在components下创建Dropdown.vue
<template><div><h1>基础用法</h1><h4>通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown来设置下拉菜单。默认情况下, 下拉按钮只要hover即可, 无需点击也会显示下拉菜单。</h4><el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><style scoped>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style>2.4. 在components下创建ButtonDropdown.vue
<template><div><h1>触发对象-可使用按钮触发下拉菜单</h1><h4>设置split-button属性来让触发下拉元素呈现为按钮组, 左边是功能按钮, 右边是触发下拉菜单的按钮, 设置为true即可。</h4><el-dropdown><el-button type="primary">更多菜单<i class="el-icon-arrow-down el-icon--right"></i></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown split-button type="primary" @click="handleClick">更多菜单<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><style scoped>.el-dropdown {vertical-align: top;}.el-dropdown + .el-dropdown {margin-left: 15px;}.el-icon-arrow-down {font-size: 12px;}
</style><script>
export default {methods: {handleClick () {alert('button click')}}
}
</script>2.5. 在components下创建ClickDropdown.vue
<template><div><h1>触发方式</h1><h4>可以配置click激活或者hover激活。在trigger属性设置为click即可。</h4><el-row><el-col :span="4"><span class="demonstration">hover 激活</span><el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item><el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item><el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item><el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item><el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></el-col><el-col :span="4"><span class="demonstration">click 激活</span><el-dropdown trigger="click"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item><el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item><el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item><el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item><el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></el-col></el-row></div>
</template><style scoped>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}.demonstration {display: block;color: #8492a6;font-size: 14px;margin-bottom: 20px;}
</style>2.6. 在components下创建HideClickDropdown.vue
<template><div><h1>菜单隐藏方式</h1><h4>下拉菜单默认在点击菜单项后会被隐藏, 将hide-on-click属性默认为false可以关闭此功能。</h4><el-dropdown :hide-on-click="false"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><style scoped>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style>2.7. 在components下创建CommandDropdown.vue
<template><div><h1>指令事件</h1><h4>点击菜单项后会触发事件, 用户可以通过相应的菜单项key进行不同的操作。</h4><el-dropdown @command="handleCommand"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="a">黄金糕</el-dropdown-item><el-dropdown-item command="b">狮子头</el-dropdown-item><el-dropdown-item command="c">螺蛳粉</el-dropdown-item><el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item><el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><style scoped>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style><script>
export default {methods: {handleCommand (command) {this.$message('click on item ' + command)}}
}
</script>2.8. 在components下创建SizeDropdown.vue
<template><div><h1>不同尺寸</h1><h4>Dropdown组件提供除了默认值以外的三种尺寸, 可以在不同场景下选择合适的尺寸。额外的尺寸: medium、small、mini, 通过设置size属性来配置它们。</h4><el-dropdown split-button type="primary">默认尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown size="medium" split-button type="primary">中等尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown size="small" split-button type="primary">小型尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown size="mini" split-button type="primary">超小尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><style scoped>.el-dropdown + .el-dropdown {margin-left: 15px;}.el-icon-arrow-down {font-size: 12px;}
</style>2.9. 运行项目, 访问http://localhost:8080/#/Dropdown
2.10. 运行项目, 访问http://localhost:8080/#/ButtonDropdown
2.11. 运行项目, 访问http://localhost:8080/#/ClickDropdown
2.12. 运行项目, 访问http://localhost:8080/#/HideClickDropdown
2.13. 运行项目, 访问http://localhost:8080/#/CommandDropdown
2.14. 运行项目, 访问http://localhost:8080/#/SizeDropdown
037_Dropdown下拉菜单相关推荐
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
- bootstrap:按钮，下拉菜单
'btn':加按钮样式 btn-small btn-large:调整按钮大小 btn-primary....:调整按钮风格 btn-group:声明这是一个按钮组 <span class='ca ...
- popwindow下拉筛选 二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
- 在做会员资料修改时,实现下拉菜单的默认项定位
作者:lshdic http://blog.csdn.net/lshdic/ <!--在写一个交友网站时碰到的问题,就是当会员修改资料时,如何定位SELECT的菜单列默认项,不过很容易就解决 ...
- iOS 多级下拉菜单
前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下 多级下拉菜单 二级下拉筛选菜单. ...
- 纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
- 下拉菜单被挡住了，DIV置于最底层的方法
网站常会用到一些 下拉菜单,,幻灯片,,,飘浮广告等. 但经常会发现.幻灯片会挡住下拉菜单或者飘浮广告等.解决办法有下 第一,可将幻灯片所在DIV 置于最底层.添加CSS如下 style=" ...
- Delphi访问网页中的下拉菜单
Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml; procedure TForm1.Button1Click(Sender: TObject); ...
- html+css3实现二级下拉菜单
2019独角兽企业重金招聘Python工程师标准>>> 下面我们一起来看看实现这款CSS3下拉菜单的过程和源码,代码比较简单,主要由HTML和CSS实现,并不需要JavaScript ...
最新文章
- Visual studio 2010出现“error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”解决方式...
- php 删除文件时间,php删除文件后重建，文件创建时间(filectime)未变化怎么解决？？...
- 贪婪算法近似集合覆盖问题的解
- c# datatable.select() 支持group by
- B - Fibonacci Again
- C#中全局处理异常方式
- 换位思考的最高境界是换待遇，所以，换位思考就是空话！！！
- mac weka连接mysql_weka连接mysqllinux
- img 转esxi vmdk_KVM qcow2、raw、vmdk等镜像格式和转换
- 让家长巧限孩子玩网络游戏、看网络电影
- Python教你从0搭建微信推送斗鱼直播提醒（单房间简化版）
- WIFI学习一（socket介绍）
- STM32堆栈溢出的主要的问题和现象
- 如何自定义排序 aAbBcC 即Excel中的排序，AaBbCc
- ToggleButton的用法
- Spark Mllib 下的决策树二元分类 —— 网站分类(1)
- sqlmap总出现missing a mandatory option的解决方法
- windows程序员进阶系列：《软件调试》之O--- WinDbg使用介绍
- 不是内部或外部命令，也不是可运行的程序或批处理文件。
- HTML5实现图片上传与预览