去除 el-input 输入框的边框([email protected]

复制代码
dgq@dgqdeMac-mini spid-admin % yarn list --pattern element-ui
yarn list v1.22.22
└─ [email protected]
✨  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.
└─ [email protected]
✨  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 来实现样式的深度选择。

相关推荐
ElasticPDF-新国产PDF编辑器13 分钟前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
揣晓丹18 分钟前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
Carlos_sam21 分钟前
Openlayers:海量图形渲染之图片渲染
前端·javascript
你的人类朋友24 分钟前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
顽疲35 分钟前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai
美食制作家1 小时前
【无标题】Threejs第一个3D场景
javascript·three
派小汤1 小时前
Springboot + Vue + WebSocket + Notification实现消息推送功能
vue.js·spring boot·websocket
HelloRevit2 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
阿珊和她的猫3 小时前
Webpack Dev Server的安装与配置:解决跨域问题
vue.js·webpack
ohMyGod_1233 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js