有头像显示头像 没有头像显示用户名的第一个字
<img v-if="avatar" :src="avatar" class="user-avatar" />
<span v-else class="username">{{ name.charAt(0) }}</span>
.username {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #04c9be;
color: white;
border-radius: 50%;
margin-right: 4px;
}
若用户名为空,name.charAt(0)会报错,使用vue模板可选链操作符。就不会报错了。
<!-- native事件的修饰符 -->
<!-- 注册组件的根元素的原生事件(h5事件) -->
<!-- el-dropdown-item 是没有click事件的 -->
<el-dropdown-item @click.native="logout">
<span style="display: block">退出</span>
</el-dropdown-item>