1.关于表单组件 el-form
默认样式
由于 项目需求 需要将UI组件库中input框的默认边框去掉,实现只有下横线的效果。
一直以为是border的问题,找了很久发现是 在官方组件中设置了 box-shadowd导致有这个问题。
解决方案:
(1).可以使用全局穿透 :global去去除掉box-shadow,再给input设置底部Border或者外层加一个边框设置底部边框,但要注意这个会影响所有的input
// :global(.el-input__wrapper){
// box-shadow: none;
// }
(2).使用深度穿透 ::v-deep ,这个方式是以前一直使用的方法,但是不知道是什么原因导致当前项目中无法去除
(3).使用原生input
2.关于弹窗组件 el-dialg
同上一个组件,需求要将 title 移动到中间位置,使用了深度穿透样式也未生效,由于我的项目里是所有的对话框的 title 都在中间,所以我采用了全局 :global去实现
也有另外一种方式
由图可看出,可以将 title 单独设置,也就是在 :title="title"这里我们不设置title
新入门前端一名,其他方法暂时没有想到,目前是这几种解决方案,欢迎大家在评论区讨论