dgq@dgqdeMac-mini spid-admin % yarn list --pattern element-ui
yarn list v1.22.22
└─ element-ui@2.15.13
✨ Done in 0.23s.
dgq@dgqdeMac-mini spid-admin % yarn list vue
yarn list v1.22.22
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ vue@2.7.14
✨ Done in 0.24s.
<el-inputv-model="form.invitor"placeholder="PC端的自动取当前账号的手机号"readonlyclass="no-border-input"
/>
::v-deep
是一个与 Scoped 样式配合使用的特殊选择器,用于深度选择子组件的内部元素。默认情况下,在 Vue 的 Scoped 样式中,CSS 规则仅限于当前组件的范围内,无法直接作用于子组件的内部元素。而 ::v-deep
允许您突破这一限制,修改子组件内部的样式。
当您不使用 ::v-deep
时,样式只能应用于当前组件的 HTML 结构。即使您在 el-input
上添加了 no-border-input
类,样式也无法深入到 el-input
组件内部去除边框。
使用 ::v-deep
后,样式规则可以穿透组件边界,直接影响内部元素的样式。因此,通过添加 ::v-deep
,您能够成功地去除 el-input
组件内部的边框。
::v-deep(.no-border-input .el-input__inner) {border: none;box-shadow: none;
}
希望这解释清楚了为什么需要使用 ::v-deep
来实现样式的深度选择。