富贵资源网 Design By www.hznty.com
例如有一个输入框
<el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"> </el-input>
如果没有加自定义样式则输入框大概是这样的
我希望是这样的
通过谷歌浏览器的开发者工具,找到对应样式的类名为.el-input__inner
但发现再html
中前面的el-input
标签解析成了这个,其中mySearch
是自己添加上去的,因此我们可以找到mySearch
的元素,需要修改的是子元素类名是.el-input__inner
如果之间通过css的选择器选择子元素则不能作用到子内部的元素
下面使用了stylus语法的写法
下面是错误的写法:
<style scoped lang="stylus" rel="stylessheet/stylus"> .mySearch .el-input__inner border-radius 20px </style>
让其生效的方法
方案一:需要中间加一个/deep/
才能
<style scoped lang="stylus" rel="stylessheet/stylus"> .mySearch /deep/ .el-input__inner border-radius 20px </style>
方案二:去掉scoped
,这种方式能达到效果但不建议使用!
总的来说之所以不能生效就是这个scope
导致作用范围不能作用到内部的子组件,解决问题的最后方法是通过加/deep/
使其能作用到子组件中
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。