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

前言

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

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

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

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

神奇的现象

日期范围,select选择器

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

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

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

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

js 复制代码
<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 修改选中样式

scss 复制代码
::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 文件中的

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-activeis-focus 属性也不行

组件排查分析

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

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

问题解决思路

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

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

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

scss 复制代码
<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 里面改东西

欢迎大家讨论交流,如果文章感觉有用,随手点个赞再走呗 ^_^ 🥰🥰

微信公众号:草帽Lufei

相关推荐
江城开朗的豌豆2 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician6 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN666821 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD31 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆31 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel34 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒41 分钟前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish7 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909068 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5