利用el-dropdown实现显示登录用户名和头像
时间: 2023-03-20 19:02:46 浏览: 258
你可以使用 `el-dropdown` 组件实现显示登录用户名和头像。具体实现方式如下:
1. 首先在页面中引入 `el-dropdown` 组件:
```
<template>
<el-dropdown>
<!-- el-dropdown 组件的触发按钮 -->
<span class="el-dropdown-link">
<img src="your-avatar-url" class="avatar">
<span class="username">{{ your-username }}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<!-- el-dropdown 组件的下拉菜单 -->
<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-menu>
</el-dropdown>
</template>
```
2. 在上述代码中,`your-avatar-url` 和 `your-username` 分别代表登录用户的头像和用户名。你可以通过调用 API 获取登录用户的头像和用户名,并将其传入组件中。
3. 在样式文件中定义 `.avatar` 和 `.username` 类的样式,以显示用户头像和用户名:
```
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 8px;
}
.username {
font-size: 14px;
font-weight: bold;
}
```
4. 最后,你可以将菜单项的内容替换为你需要显示的内容,例如用户设置、退出登录等等。