改变el-input框的样式(去掉边框)

<el-input v-model="username" placeholder="请输入用户名" class="pass_input" ></el-input>

css样式(这里用到的方法叫做:样式穿透 /deep/):

<style lang='less' scoped>
    .pass_input {
            float: left;
            width: 215px;
            margin-left: 10px;
            // el-input__inner是el-input的input类名
            & /deep/ .el-input__inner {
                    border: none;
            }
    }
<style>

1.什么是scoped

当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化

2.scoped实现原理

Vue中的scoped属性的效果主要是通过PostCss实现的。PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,给css选择器额外添加一个对应的属性选择器,来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。

3.scoped穿透

scoped看起来很美,但是,在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped

sass 和 less的样式穿透 使用 /deep/

stylus的样式穿透 使用 >>>

如果没有写scoped属性,那么改变第三方组件样式的时候就不用考虑样式穿透了。

Logo

前往低代码交流专区

更多推荐