实现方法是 如果可以通过深度选择器
解决 用深度
解决 解决不了用 组件自带的popper-class
属性解决
注:部分修改是不能用scoped
一、下拉菜单
注意: 部分样式 不能用scoped
<el-select popper-class='selectClass' v-model="param.type" placeholder="请选择" style="margin-top:9px;width: 100%;" @change="blurIps(0)">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<style lang="scss" scoped>
/* 下拉框获得焦点时 边框颜色 */
/deep/.el-select .el-input.is-focus .el-input__inner {
border-color: #7763fa;
}
</style>
<style>
/* 下拉框选中字体颜色 */
.selectClass .el-select-dropdown__item.selected {
color: #7763fa;
}
</style>
二、 级联菜单
注意: popper-class
属性
<el-cascader popper-class='cascaderPopper' :options="classOptions" v-model="param.goods_class_id" style="width:100%;margin-top:9px;" @change="blurIps(1)" :props="{ checkStrictly: true, value: 'goodsClassId', label: 'name', children: 'childs' }" clearable></el-cascader>
<style lang="scss" scoped>
/* 下拉框获得焦点时 边框颜色 */
/deep/ .el-cascader .el-input.is-focus .el-input__inner {
border-color: #7763fa;
}
</style>
<style>
/* 级联选中项 激活时的字体颜色 */
.cascaderPopper .el-cascader-node.in-active-path,
.el-cascader-node.is-selectable.in-checked-path,
.el-cascader-node.is-active {
color: #7763fa !important;
}
/* 级联选中项 激活时 单选框的颜色*/
.cascaderPopper .el-radio__input.is-checked .el-radio__inner {
border-color: #7763fa;
background: #7763fa;
}
/* 级联选中项 鼠标悬浮时 边框颜色*/
.cascaderPopper .el-radio__inner:hover {
border-color: #7763fa;
}
</style>
三、 日期选择器
<el-date-picker popper-class='dateClass' style="margin-top:9px;width: 100%;" @change="blurIps(6)" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" type="daterange" v-model="unshelfTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
<style lang="scss" scoped>
// 激活时边框的颜色
/deep/ .el-range-editor.is-active {
border-color: #7763fa;
}
// 激活时
/deep/ .el-range-editor.is-active:hover {
border-color: #7763fa;
}
</style>
<style>
/* 日期 选中开始的背景和 字体 */
.dateClass td.start-date span {
background: #7763fa;
color: white;
}
/* 日期 选中结束的背景和 字体 */
.dateClass td.end-date span {
background: #7763fa;
color: white;
}
/* 日期 鼠标选中开始和结束后 悬浮时的hover 字体效果 */
.dateClass td.start-date span :hover {
color: white;
}
/* 日期 鼠标选中开始和结束后 悬浮时的hover 字体效果 */
.dateClass td.end-date span :hover {
color: white;
}
/* 日期 鼠标悬浮时字体效果 */
.dateClass .available :hover {
color: #7763fa;
}
/* 日期 今天的字体效果 */
.dateClass td.today span {
color: #7763fa;
}
</style>