前端改原生组件遇到的一个神奇的现象

草帽小子-蒙奇·D·路飞

前言

公司的一个 Vue2Web端的项目，项目功能完成了对应阶段目标后，给客户演示了一波，现场的客户对功能比较认可，直接提出我们做的页面太素了，整体项目的颜色比较浅，某些地方的字体可能也偏小，有些字的显示对于客户群体来讲可能看起来都有点吃力，项目使用的 Element UI 库，默认都是用的官方的主题、颜色、字体大小、比例等

演示结束后，根据反馈做了测试，项目在在笔记本上看着效果还行，在某些投屏的显示器、非高清、非超清的电脑外接显示器色彩方面的效果看着就打折扣了

接着UI设计弄了一堆修改点，共同组件封装的统一改，单独设计的页面单独改，直接来了一堆样式优化修改的需求任务

我这边接了关于 Element UI 库的输入框、选择器等原生组件的选中样式进行选中加深，然后调整边框，这么一个原生组件调整，我以为统一调整一波就行了，没想到中间出了神奇的现象

神奇的现象

日期范围，select选择器

官方的文档中日期范围的组件选中时 class 里面有 is-active 属性，失去焦点后 is-active 移除

select 选择器组件选中时 class 里面有 is-focus 属性，失去焦点后 is-focus 移除

从浏览器控制台上找到对应的元素，找到 is-active 和 is-focus 的地方，把那里的 css 代码直接复制过来，然后放到项目全局样式对应的位置，根据蓝湖设计图上的样式进行调整，使用 ::v-deep 直接覆盖原来的地方就行了

select选择器修改边框颜色和加深边框阴影效果

<el-select v-model="form.breed" placeholder="请选择">
  <el-option
    v-for="item in list"
    :key="item.value"
    :label="item.name"
    :value="item.id"
  >
  </el-option>
</el-select>

css 修改选中样式

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: #1a66ff !important;
  box-shadow: 0 0 0 1px #409eff !important;
}

上面是在单独 el-select 的调整，根据项目需求调整的最终代码如下情况，下面代码是提取到公共全局 scss 文件中的

::v-deep .el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-date-editor.is-active,
.el-date-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #1a66ff !important;
  box-shadow: 0 0 0 1px #409eff !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: #1a66ff !important;
  box-shadow: 0 0 0 1px #409eff !important;
}

简单粗暴一通操作后，调整后的效果如下，相对原来的选中效果，调整后的颜色视觉效果更明显了

在项目上测试调整后的样式效果时发现，其他的组件样式都调整了，选择年份的那个不好使，测试的几个页面其他页面的都好使，唯独那个不行，这也太神奇了吧

单独查看选择年份的 class 属性，把 el-date-editor--year 属性单独设置 is-active 或 is-focus 属性也不行

组件排查分析

由于项目中多人多部门协作的方式，以及大量自定义修改，项目里很可能存在代码污染的情况，直接看 element ui 库的官方示例效果，发现 选择日，其他日期单位 这里面的组件选中后没有发现 is-active 和 is-focus 等 class 属性

当前的 element ui 库的版本为 v2.15.16，根据官方的不同效果来看，官方的不同组件的选中效果在实现时使用了不同的方式

问题解决思路

既然官方没有通过 class 属性的方式来设置选中后的样式，我们是否可以尝试在项目代码中找到对应元素，手动给对应的元素添加 focus 之类的属性，以实现项目的实际需求

第一步，先修改的默认显示边框(border)，能改动说明正确获取了元素

第二步，使用 ::v-deep 添加 focus 属性进行选中后样式覆盖，目标完成，直接上代码

<style lang="scss">
.el-date-editor {
  .el-input__inner:focus {
    border-color: #1a66ff !important;
    box-shadow: 0 0 0 1px #409eff !important;
  }
}
</style>

这时候年份的日期选择器的样式默认选中样式也修改好了

注意！ 上面的 scss 代码是在 <style lang="scss"></style> 中实现的，没有 scoped

最终实现的效果

思考扩展

像这种更改UI库底层原生样式的时候，一定要慎重，改完的代码多测测，防止误伤其他组件样式；还有就是尽量用官方原生的属性和能力，这样代码会更简洁优雅，毕竟谁也不想在一堆 ::v-deep 里面改东西