vue.js 前端 Element UI更改下拉菜单el-dropdown-menu样式

如果css不是scoped模式可以直接修改，否则需要另外写个style标签

或者新建一个css文件，再引入

html：

新建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;

}

}

组件中引入：

相关文章

 您阅读本篇文章共花了：