如果css不是scoped模式可以直接修改,否则需要另外写个style标签
或者新建一个css文件,再引入
html:
<div class="right-menu">
<!-- 个人中心 -->
<el-dropdown class="avatar-container">
<div class="avatar-wrapper">
<!-- 头像 -->
<img v-if="avatar" :src="avatar" class="user-avatar">
<span v-else class="username">{{ name?.at(0) }}</span>
<!-- 用户名 -->
<span class="name">{{ name }}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/user/info">
<el-dropdown-item>
<svg-icon icon-class="base-info"></svg-icon>
<span>基本资料</span>
</el-dropdown-item>
</router-link>
<router-link to="/user/avatar">
<el-dropdown-item>
<svg-icon icon-class="change-avatar"></svg-icon>
<span>更换头像</span>
</el-dropdown-item>
</router-link>
<router-link to="/user/password">
<el-dropdown-item>
<svg-icon icon-class="change-password"></svg-icon>
<span>重置密码</span>
</el-dropdown-item>
</router-link>
</el-dropdown-menu>
</el-dropdown>
<!-- 退出登录 -->
<el-button class="logout" type="text" @click="logout">
<svg-icon icon-class="logout"></svg-icon>
<span style="color:#fff">退出</span>
</el-button>
</div>
新建css文件准备样式:
/* 整体背景色和圆角 */
.el-dropdown-menu {
background-color: #24262d !important ;
border: 0px solid #00487f !important ;
border-radius: 5px;
}
/* 下拉框定位 */
.el-popper {
position: absolute !important ;
top: 56px !important;
}
.el-popper[x-placement^=bottom]{
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
}
.el-dropdown-menu__item:not(:last-of-type){
border-bottom: 1px solid #00487f;
}
/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow{
border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
border: none;
}
/* 下拉选项样式与hover状态 */
.user-dropdown {
li {
margin: 0;
padding: 0;
width: 120px;
height: 44px;
color: #fff !important;
text-align: center;
line-height: 44px;
}
li:hover {
border-radius: 5px;
background-color: #2E3240 !important;
color: #fff !important;
}
}
/* 自定义内容 忽略 */
.user-dropdown {
span {
font-size: 14px;
vertical-align: middle;
}
.svg-icon {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 5px;
}
}
组件中引入:
<script>
import './el-dropdown.less'
</script>