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

    
    	
  
    	  
    		
    	  
    	  gaogzhen
    	
    	
    	  修改密码
    	  退出系统
    	
    
  

• scirpt代码

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

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

后记 ：

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

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