Date cuenta del efecto:
Instrucciones:
Prefacio:
Preguntas:
1. No se puede usar ningún estilo de modificación profunda, no funcionará porque no está montado en #app en absoluto (ninguna modificación es inútil)
2. Use index.vue global para modificar el estilo (contamina el estilo global y yo No)
3. Los documentos oficiales y todas las soluciones de Baidu usan popper-append-to-body (pero fue descartado)
4. Después de 9981 dificultades, el estilo del cuadro desplegable finalmente se puede personalizar y modificar. (No puedo esperar para compartirlo con amigos como yo)
Código específico:
<el-form-item label="统计频度" >
<el-select v-model="value" placeholder="请选择" popper-class="selectStyle" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
popper-classSolo agrega este atributo
data() {
return {
//下拉框数据
options: [
{
value: "选项1",
label: "年度",
},
{
value: "选项2",
label: "季度",
},
{
value: "选项3",
label: "月度",
},
],
value: ""
};
},
¡recordar! ¡Golpea la pizarra para concentrarte! Para escribir una etiqueta de estilo sola (de lo contrario no tiene ningún efecto)
//下拉框标题文本label
::v-deep .el-form-item__label{
color: #fff;
font-weight: 100;
}
//选择框
::v-deep .el-input__wrapper{
background-color: rgba(26, 84, 128,0.5);
width:130px;
}
//下拉框文字
/deep/ .el-input__inner{
color:#e1dcdc;
}
//下拉框背景色
.el-popper.is-light.selectStyle {
background-color: rgba(0, 136, 255, 0.1) !important;
border: 1px solid #254277 !important;
}
//下拉框的链接小方块
.selectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
background: rgba(0, 136, 255, 0.1) !important;
border: 1px solid #254277 !important;
}
.selectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
background: #254277 !important;
border: 1px solid #254277 !important;
}
//鼠标移动上去的选中色
.selectStyle {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #2A77C6 !important;
}
//下拉框的文本颜色
.el-select-dropdown__item {
color: #B3BCCE !important;
}
//选中之后的颜色
.el-select-dropdown__item.selected {
background: #2A77C6 !important;
}
}
¡Espero que pueda ayudar a aquellos que son tan melancólicos como yo!
Referencia (un estilo de borde de cuadro desplegable más que yo): https://blog.csdn.net/qq_52721978/article/details/127493256