如何修改 Element-UI input 标签的高度
这个是工作中遇到的问题，当时时间总结，就随便测试了一下就用上了，现在来整理下。
今天是 2019年12月14日15:34:50 周六，不出意外的话今天是个加班的好日子，但是我并没有去加班，现在入职的这家公司是临时组件的团队，各方面还不是很完善，最终的估计就是加班的问题，在我入职这二十多天里面，光新人刚入职的就走了三个，离职原因相信听产品的人讲是加班问题和公司制度问题。加班没什么好讲的，现在已经是常态了，一三五强制，周六也必须来，但是周六我没去，为啥没去，我认为对个人来讲周六有更加重要的东西，工作是给公司贡献自己的价值，但是休息的时候就是给自己充电，只有这样才能保证自己一直前进，不会讲突然没电，折半路上去了，即使是不惜被老板骂。我到没被骂，但是也没好到那里去。看看我昨天请假的后果：
晚上一点十九分老大发的消息，但是突然撤回了
上图是周六凌晨一点十九分老大发的消息，但是突然撤回了，我也没看到是啥子。
这就是昨天撤回的内容
上图就是老大撤回的内容，想不明白老大发送的消息为什么突然撤回了，生平最恨别人发了消息就撤回，这是不负责任的体现，就像讲过的话，有的人就能当啥事都没发生似的。想要回复这句话其实也很简单，这是我不加班你对我的惩罚，那好，我平时12345加班晚上的加班费你给我按 1.5 倍计算，周六按 2倍计算。当然公司肯定不会这么干，我也不会这么说滴。毕竟劳资关系，劳动者是弱势的一方。
在我刚刚实习的时候，进入的那家公司，公司的主管就和现在的老板挺像的，天天看着你工作，实习的那家公司是主管坐在办公室通过玻璃墙来观察（监视）员工的工作状态，现在这家的老板是天天在工位旁边转悠，催进度。这点还是很不舒服的，这倒是不要紧的，最麻烦的是员工的工作习惯的改变，溜须拍马肯定会占着上风，实习的那家公司就是这样，不干活的但会表现的人升职加薪，真正干活的人反而升职没他们快，我看现在这家公司也是有点苗头，但是因为我们是纯技术公司，人都是比较踏实的，风气并没有特别不好。
本周最有收获的地方就是从我们产品的身上学到的东西，坐在我身旁的产品是九零年的人，快比我大了十岁，他产品的技术应该不错，但是最佩服的还是游刃有余的职场本事了。我自我感觉在公司员工的眼里就是个愣头青。因为我信奉的就是我以为的就是我以为，但现实是你以为的还真不是你以为的，就像我不明白我实习的那家公司，怎么能活下去，公司一帮这样的人为什么能和上海最有知识的老师打交道，做生意，甚至有的员工跟老师的关系还不错，也不知道是他们臆想的还是真有其事，还有点绯闻。我学习的东西很多都是网上的，以为老师都是向他们似的眼见和认知都比较高，你真去接触了还真不是那么回事。和我想的差距挺大的，算是我对这个世界认识不够吧。回到我们的产品上，完全给我演示了从入职到胜任工作的全过程，算是我入职这家公司的最大收获，工资都是小事没白来。以后肯定都能用到。嘻嘻。
现在前端开发在写样式的时候比以前省心多了，这无疑得益于 UI 框架的普及，但是缺点就是使用它的东西不能完全自定义。这次就遇到 element-UI input 输入框高度自定义的问题。
先测试下简单的按钮修改：
一、先放一个按钮
<template>
<div>
<el-button type="warning">按我</el-button>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
</style>
上面是个普通的按钮。我们来改变它，自定义一个类名。
<template>
<div>
<el-button type="warning" class="btn">按我</el-button>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
.btn{
background-color: blue;
}
</style>
按钮变成蓝色的，符合预期。
接下来采用样式覆盖的方法，审查元素，拿到类名。
<template>
<div>
<el-button type="warning">按我</el-button>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
.el-button,.el-button--default{
background-color: gold;
height: 50px;
}
</style>
同样没问题。
element-UI 自定义样式可以自定义类名也可以采用覆盖的方法。下面来看看输入框：
二、输入框
放一个输入框：
<template>
<div>
<el-input></el-input>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
</style>
这是个没有任何限制的输入框
自定义类名修改样式：
<template>
<div>
<el-input class="eit"></el-input>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
div{
margin: 50px;
}
.eit{
width: 190px;
height: 500px;
}
</style>
很遗憾只有高度未生效。接下来使用覆盖方法：
<template>
<div>
<el-input></el-input>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
div{
margin: 50px;
}
.el-input__inner{
width: 190px;
height: 500px;
}
</style>
自定义的样式全失效了。
2019年12月21日18:31:56 补充：
这里解释下为什么审查元素得到的类名 el-input__inner，在这里使用完全失效。再次总结下 elementUI 自定义样式的方法
- elementUI 标签的标签名就是类型，例如按钮标签：
<el-button></el-button>它的类名使用就能这样.el-button{} - 自定义类名覆盖原有样式，例如：
class="cur" - 用了elementUI标签，在控制台审查元素时出现的类名。我们想去修改他的话。这时候如果你直接 copy 类名到 style 里面直接用，我们看到是失效的。因为你这个组件里面没有。如果你非要这么用，当然可以这样写，去掉scoped 变成全局样式：
<style>
.el-input__inner{
}
</style>
这种方法存在全局污染万一其他地方也用到了这个就玩完了。所以使用深度作用选择器。
所以上面我们使用控制台的样式失效，就很容易明白了，直接使用组件不存在的类名，这个类选择器只能作用在本地，全局是不会生效的。那为什么使用自定义类名也不行，因为全局对自定义的类名进行了覆盖。
分割线
混用本地和全局样式里面讲：
深度作用选择器
如果你希望 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;
}
</style>
/deep/ .el-input__inner{
width: 190px;
height: 500px;
}
总结：el-input 输入框，自定义类名修改样式，只有高度没生效，覆盖方法，自定义的样式全部失效，在 scss 环境下使用深度作用选择器的时候，无作用，只能不使用 css 预处理器完成高度自定义。
上面这个总结就不是太对了。对的总结请参考 2019年12月21日新增的总结。
