element ui 校验红色高亮失去效果
先看代码
js
// vue2
.xxxstylename ::v-deep .el-input-number.is-error .el-input__inner {
border-color: #f56c6c;}
// vue3
.xxxstylename :deep(.el-input-number.is-error .el-input__wrapper) {
box-shadow: 0 0 0 1px #f56c6c inset;
}第一行 ::v-deep 是 Vue 2 中的写法，而第二行 :deep() 是 Vue 3 中推荐的写法
核心对比：
| 特性 | ::v-deep (第一行) |
:deep() (第二行) |
|---|---|---|
| 语法形式 | 伪元素选择器 (Pseudo-element) | 伪类函数 (Pseudo-class function) |
| 主要适用 | Vue 2 (配合 SCSS/Less 等预处理器) | Vue 3 (官方推荐) |
| 兼容性 | Vue 3 中仍可用，但已不推荐 | Vue 2 中不可用 |
| 代码风格 | 写法相对自由 | 语法更严谨，将穿透的选择器包裹在函数内 |
🔍 核心原因分析
Element UI (Vue 2) 的结构逻辑
在 Vue 2 的 Element UI 中，.el-input__inner 就是那个真正的 <input> 标签。
- DOM 结构 ：
.el-input>.el-input__inner(<input>) - 样式逻辑 ：边框 (
border) 是直接画在.el-input__inner这个 input 元素上的。 - 你的代码 ：
.el-input__inner { border-color: #f56c6c; }------ 有效，因为直接修改了 input 的边框属性。
Element Plus (Vue 3) 的结构逻辑
在 Vue 3 的 Element Plus 中，引入了一个新的概念 .el-input__wrapper 作为视觉容器，而 .el-input__inner 变成了一个透明的"内容层"。
-
DOM 结构 ：
.el-input>.el-input__wrapper>.el-input__inner(<input>) -
样式逻辑：
.el-input__inner：默认是透明的（无背景、无边框）。它的作用仅仅是承载文字内容。.el-input__wrapper：负责所有的视觉样式。边框是通过给这个容器添加box-shadow: inset(内阴影) 来模拟的。
-
你的代码：
.el-input__inner { border-color: ... }------ 无效。因为这个 input 元素本身已经没有边框了，它是透明的，你给它加边框在视觉上根本看不到。.el-input__wrapper { box-shadow: ... }------ 有效。因为这才是真正绘制边框的地方。
这并非是 Vue 2 和 Vue 3 的区别，而是 Element UI (Vue 2) 和 Element Plus (Vue 3) 这两个组件库在底层 DOM 结构上的重大变化导致的。
简单来说：Element Plus 废弃了 .el-input__inner 直接控制边框的方式，改用 .el-input__wrapper 阴影来绘制边框。
📌 总结
你遇到的现象完全正常，这是因为 Element Plus 改变了实现方式。
- Vue 2 (Element UI) ：边框属于
.el-input__inner(直接改border)。 - Vue 3 (Element Plus) ：边框属于
.el-input__wrapper(通过改box-shadow模拟)。
所以，在 Vue 3 项目中，如果你想修改输入框的边框颜色（例如错误状态），必须针对 .el-input__wrapper 的 box-shadow 属性进行操作，直接修改 .el-input__inner 的 border 是不起作用的。