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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
前端性能优化及技巧
May 06 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
使用Python读取大文件的方法
2018/02/11 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python 下载文件的多种方法汇总
2020/11/17 Python
pymysql模块使用简介与示例
2020/11/17 Python
python 录制系统声音的示例
2020/12/21 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
大学生军训感想
2014/02/16 职场文书
单位绩效考核方案
2014/05/11 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Golang 切片(Slice)实现增删改查
2022/04/22 Golang