[Vue] 深度选择器调整el-input的高度

针对问题vue + element-ui/ iview 不能调整input高度
下面以element-ui举例。

如：在页面中写了一个<el-input>

加上类名，在<style>标签中设置class，高度没有改变（但宽度设置有效果），直接在el-input上设置style属性也没有效果，甚至加上了!important还是没有效果。

查看网页html元素发现

实际上<el-input>是创建了一个<div>，而原生的<input>是这个<div>的子元素，
<input>的属性是 display: inline-block; width: 100%; height: 40px; line-height: 40px;
width: 100%; 能够继承父元素的宽度，因此给<el-input>设置宽度有效。
而设置高度无效，会被el-input的默认样式 .el-input__inner覆盖

解决方法是利用vue的 深度选择器 >>> 默认类名 覆盖掉默认样式。
（官方说明文档里也用的是>>>），如果遇到sass/less （Sass 3就变成了Scss）之类的预处理器无法识别>>>，可以改写为::v-deep 或者 /deep/ 这两者都是>>>的别名。
使用方法:
在<style>标签上加上scope属性，找到ui框架的原生样式类名(可以通过html页面中f12找到元素来获取)
（深度选择器是vue的特性，使用不依赖sass或less等css预编译器）

实测在"scss"预编译器中 >>> 换成::v-deep或者/deep/也可以生效。
（注：必须在编译环境中，经过编译器处理后才可以，纯前端引入vue、element-ui是不行的）

搬运自自己的语雀
https://www.yuque.com/diracke...