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 有用的脚本函数
May 07 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
解析Vue.js中的组件
Feb 02 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
js实现碰撞检测
Jan 29 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
谈一谈收音机的高放电路
2021/03/02 无线电
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
遗传算法python版
2018/03/19 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
开业庆典邀请函
2014/01/08 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
商务代表岗位职责
2015/02/15 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL