Element Dropdown下拉菜单的使用方法


Posted in Javascript onJuly 26, 2020

组件— 下拉菜单

基础用法

Element Dropdown下拉菜单的使用方法

<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>

<style>
 .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

触发对象

Element Dropdown下拉菜单的使用方法

<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>

<style>
 .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>

触发方式

Element Dropdown下拉菜单的使用方法

<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>

<style>
 .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>

菜单隐藏方式

Element Dropdown下拉菜单的使用方法

<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>

<style>
 .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

指令事件

Element Dropdown下拉菜单的使用方法

<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>

<style>
 .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>

不同尺寸

Element Dropdown下拉菜单的使用方法

<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>

Dropdown Attributes

Element Dropdown下拉菜单的使用方法

Dropdown Slots

Element Dropdown下拉菜单的使用方法

Dropdown Events

Element Dropdown下拉菜单的使用方法

Dropdown Menu Item Attributes

Element Dropdown下拉菜单的使用方法

到此这篇关于Element Dropdown下拉菜单的使用方法的文章就介绍到这了,更多相关Element Dropdown下拉菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
vue 实现上传组件
May 31 Vue.js
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
Element Steps步骤条的使用方法
Jul 26 #Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 #Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 #Javascript
VUE动态生成word的实现
Jul 26 #Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
You might like
php通过session防url攻击方法
2014/12/10 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP中list方法用法示例
2016/12/01 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python命令行参数用法实例分析
2019/06/25 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
高中美术教学反思
2014/01/19 职场文书
优秀企业获奖感言
2014/02/01 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Python提取PDF指定内容并生成新文件
2021/06/09 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis