element-ui_dropdown-下拉菜单

element-ui_dropdown-下拉菜单

---

目录

---

---

内容

---

1、效果展示

• 应用场景：登录后用户展示

• 折叠效果图示0-1：

• 鼠标悬停效果图示0-2：

2、下拉菜单相关组件

2.1、el-dropdown 下拉菜单

• 常用属性：

属性名	类型	可接受值	默认	描述
trigger	string	hover/click	hover	hover当鼠标悬停是，展开下拉菜单；click,当鼠标点击的时候，展开下拉菜单

• 常用事件

事件名称	参数	描述
command	从el-menu-item标签获取的command属性值	当点击下拉菜单项的时候触发

2.2、el-dropdown-menu 下拉列表

• 常用插槽

插槽名称	描述
dropdown	下拉列表，通常是el-dropdown-menu元素

3.3、el-dropdown-item 下拉菜单项

属性名	类型	可接受值	默认	描述
command	string/number/object	-	-	属性值发送给command事件对应的处理函数的参数
icon	string	-	-	图标类名，详见icon

3、头像组件_el-avatar

• 常用属性

属性名	类型	可接受值	默认	描述
size	number/string	number/large/medium/small	large	头像大小
shape	string	circle/square	circle	形状，circle：圆形，square:方形
src	string	-	-	图像地址

4、实现

• template代码

    <el-dropdown @command="handleCommand">
    	<div class="header-right">
    	  <el-avatar>
    		<img src="../assets/avatar.jpg" alt />
    	  </el-avatar>
    	  <span>gaogzhen</span>
    	</div>
    	<el-dropdown-menu slot="dropdown">
    	  <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
    	  <el-dropdown-item icon="el-icon-s-fold" command="b">退出系统</el-dropdown-item>
    	</el-dropdown-menu>
    </el-dropdown>
  

• scirpt代码

    ...
    methods: {
    	...
    	handleCommand(command) {
    		...
    	}
    	...
    }
    ...
  

提示 ： 这里只给出页面结构，样式部分查看博文’全栈项目-乐优商场-主页布局’,退出及修改密码功能，后续添加。

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/ly-bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend        // 后端项目