去除 el-input 输入框的边框(element-ui@2.15.13)

复制代码
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.
html 复制代码
<el-input
  v-model="form.invitor"
  placeholder="PC端的自动取当前账号的手机号"
  readonly
  class="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 组件内部的边框。

css 复制代码
::v-deep(.no-border-input .el-input__inner) {
  border: none;
  box-shadow: none;
}

希望这解释清楚了为什么需要使用 ::v-deep 来实现样式的深度选择。

相关推荐
Asort16 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT37 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码38 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅43 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom1 小时前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试