如何修改 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“ 就可以覆盖原来的样式了
”
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)