如何修改 Element-UI input 标签的高度
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
使用 ::v-deep 兼容更高!!!
从以下地址拿的
https://www.jianshu.com/p/2c65d9c5a78b
————————————————————————————————————————
深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,
例如影响子组件,你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>,
这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。
注意最后一句话,在 scss 环境下,就是上面高度没有生效的例子,当我们指定 lang='scss' 样式就会全部失效。效果如下:
<template>
<div>
<el-input></el-input>
</div>
</template>
<script>
export default {
};
</script>
<style scoped lang="scss">
div{
margin: 50px;
}
>>> .el-input__inner{
width: 190px;
height: 500px;
}
</style>
去掉 lang 并且高度生效案例如下:
<template>
<div>
<el-input></el-input>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
div{
margin: 50px;
}
>>> .el-input__inner{
width: 190px;
height: 500px;
}
/*下面这个方法也可以*/
/deep/ .el-input__inner{
width: 190px;
height: 500px;
}
</style>
所以在css上面定义“scoped“ 就可以覆盖原来的样式了
”
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)