<!-- 用户头像 -->
<div style="display: flex; justify-content: center; align-items: center;width: 80px; height: 80px; position: relative;" @mouseover="showReplace = true" @mouseleave="showReplace = false">
<div style="display: flex; justify-content: center; align-items: center;">
<el-avatar style="width: 80px; height: 80px;" :src="头像的链接" fit="fill"></el-avatar>
</div>
<el-button v-show="showReplace" circle type="text"
style="position: absolute;width: 80px;height: 80px;display: flex;justify-content: center; align-items: center;
color: white;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
pointer-events: auto; /* 确保可以触发点击事件 */"
@click="showUploadDialog = true">
更换头像
</el-button>
</div>
showUploadDialog 在数据区定义,是上传头像的对话框。