学校大作业,我负责的前端部分,正好前段时间学习了vue和elementUI,就来实践一下,部分代码如下:
<div class="ipInput">
<el-input class="ip" v-model="part1"></el-input>
......
</div>
后来我发现在el-input舔加样式使文字居中但并没有生效
<div class="ipInput">
<el-input class="ip" v-model="part1"></el-input>
......
</div>
<style scoped>
......
.ip{
text-align:center
}
......
<style>
在浏览器里渲染成这样
可以看到渲染的时候在input外套了个div元素,我加在el-input的ip这个class也是在这个div元素上,input元素则是el-input__inner这个class
div为父组件,input为子组件,vue里可以看到<style scoped>,由于scoped的存在父组件的样式无法传递到子组件
而以上可以看到我们的原本加在el-input的名为ip的class渲染到了父组件div上,这也就是为什么添加样式无法生效的原因
所以修改代码如下(可以将/deep/换成>>>)
<div class="ipInput">
<el-input class="ip" v-model="part1"></el-input>
......
</div>
<style scoped>
......
.ip /deep/ .el-input__inner{
}
......
<style>
重新运行样式就生效了