//tree
.treeSelect {
width: 212px;
border-radius: 0;
height: 50px;
}
::v-deep .vue-treeselect__control {
height: 100%;
border: 1px solid rgba(2, 189, 253, 0.35);
}
::v-deep .vue-treeselect__placeholder {
color: #606266;
}
//foucs时的placeholder
::v-deep.vue-treeselect--focus .vue-treeselect__input{
color: #606266 !important;
}
//foucs时有值的input
::v-deep.vue-treeselect--has-value .vue-treeselect__single-value{
color: #606266 !important;
}
::v-deep .vue-treeselect__menu {
background: #024b8a;
// border: none;
border: rgba(8, 160, 255, 0.827) 1px solid;
}
::v-deep.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused)
.vue-treeselect__control:hover {
border-color: rgba(8, 160, 255, 0.827);
}
// ::v-deep .vue-treeselect__list:hover > .vue-treeselect__list-item {
// background: #202a60;
// }
//选中的
// ::v-deep .vue-treeselect__single-value {
// color: #fff;
// line-height: 47px;
// font-size: 20px;
// }
//input箭头
::v-deep .vue-treeselect__control-arrow-container .vue-treeselect__control-arrow {
color: #C0C4CC !important;
}
//清空icon
::v-deep .vue-treeselect__x-container .vue-treeselect__x{
color: #C0C4CC !important;
}
//hover
::v-deep .vue-treeselect__option--highlight{
background-color: #4a8bec !important;
}
//选中的menu
::v-deep .vue-treeselect__option--selected{
background: none;
}
// /deep/ .vue-treeselect__option--selected
// :hover{
// background: #202a60;
// }
// /deep/ .vue-treeselect__option--selected
// :hover{
// background: #202a60;
// }
// /deep/ .vue-treeselect__option--selected
// :hover .vue-treeselect__option-arrow-placeholder{
// background: #202a60;
// }
//menu文字
::v-deep .vue-treeselect__label{
color: #fff;
}
//menu-icon
::v-deep .vue-treeselect__option-arrow-container .vue-treeselect__option-arrow{
color: #2aebff !important;
}
接下来看效果:
vuetreeSelect插件不会用的看我另一篇博客 点击这里