原來的樣式:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 修改后的樣式:
? ? ? ? ? ? ? ?
給el-dropdown-menu添加類名dropdown-menu?
<el-dropdown-menu slot="dropdown" class="dropdown-menu">
<router-link to="/user/profile">
<el-dropdown-item>個(gè)人中心</el-dropdown-item>
</router-link>
<el-dropdown-item @click.native="setting = true">
<span>布局設(shè)置</span>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span>退出登錄</span>
</el-dropdown-item>
</el-dropdown-menu>打開F12看一下元素
我們添加的類名與.el-dropdown-menu在同一層,所以修改背景色啥的就可以直接用自定義的類名修改,但是像里層的.el-dropdown-menu__item得加上自定義的類名文章來源：http://www.zghlxwxcb.cn/news/detail-736911.html
切記:寫在style標(biāo)簽內(nèi),不要scoped文章來源地址http://www.zghlxwxcb.cn/news/detail-736911.html
<style>
/* 修改背景色以及border顏色*/
.dropdown-menu {
background-color: #445081;
border-color: #445081;
}
/* 修改小三角的樣式 這里自定義類名與第三方組件的類中間一定不要有空格,不然更改無效!!!*/
.dropdown-menu.el-popper[x-placement^="bottom"] .popper__arrow::after,
.dropdown-menu.el-popper[x-placement^="bottom"] .popper__arrow {
border-bottom-color: #445081;
}
.dropdown-menu.el-dropdown-menu--medium
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
height: 0;
}
/* 修改每一項(xiàng)的字體顏色,這里因?yàn)槭抢飳拥念?所以中間要加上空格!!!*/
.dropdown-menu .el-dropdown-menu__item--divided {
border-top-color: #606266;
}
.dropdown-menu .el-dropdown-menu__item {
color: #a8bfd5;
}
.dropdown-menu .el-dropdown-menu__item:hover {
background-color: #3b4674;
}
</style>到了這里，關(guān)于el-dropdown自定義樣式,不影響其他組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
