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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JS解析XML的实现代码
Nov 12 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP中soap的用法实例
2014/10/24 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
js使用递归解析xml
2014/12/12 Javascript
Javascript中神奇的this
2016/01/20 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
中学家长会邀请函
2014/02/03 职场文书
学校文明单位申报材料
2014/05/06 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015年大学生工作总结
2015/04/21 职场文书
校园运动会广播稿
2015/08/19 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
python关于集合的知识案例详解
2021/05/30 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫