去除 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 来实现样式的深度选择。

相关推荐
世伟爱吗喽28 分钟前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo42 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭1 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@2 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响2 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_584121432 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料3 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|3 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊3 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发