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

前言

公司的一个 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

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试