公司的一个 Vue2 Web端的项目,项目功能完成了对应阶段目标后,给客户演示了一波,现场的客户对功能比较认可,直接提出我们做的页面太素了,整体项目的颜色比较浅,某些地方的字体可能也偏小,有些字的显示对于客户群体来讲可能看起来都有点吃力,项目使用的 Element UI 库,默认都是用的官方的主题、颜色、字体大小、比例等
演示结束后,根据反馈做了测试,项目在在笔记本上看着效果还行,在某些投屏的显示器、非高清、非超清的电脑外接显示器色彩方面的效果看着就打折扣了
接着UI设计弄了一堆修改点,共同组件封装的统一改,单独设计的页面单独改,直接来了一堆样式优化修改的需求任务
我这边接了关于 Element UI 库的输入框、选择器等原生组件的选中样式进行选中加深,然后调整边框,这么一个原生组件调整,我以为统一调整一波就行了,没想到中间出了神奇的现象
官方的文档中日期范围的组件选中时 class 里面有 is-active 属性,失去焦点后 is-active 移除
select 选择器组件选中时 class 里面有 is-focus 属性,失去焦点后 is-focus 移除
从浏览器控制台上找到对应的元素,找到 is-active 和 is-focus 的地方,把那里的 css 代码直接复制过来,然后放到项目全局样式对应的位置,根据蓝湖设计图上的样式进行调整,使用 ::v-deep 直接覆盖原来的地方就行了
<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 里面改东西