這個(gè)是工作中遇到的問題比搭，當(dāng)時(shí)時(shí)間總結(jié)范舀，就隨便測(cè)試了一下就用上了，現(xiàn)在來整理下衫樊。
今天是 2019年12月14日15:34:50 周六飒赃，不出意外的話今天是個(gè)加班的好日子，但是我并沒有去加班科侈，現(xiàn)在入職的這家公司是臨時(shí)組件的團(tuán)隊(duì)载佳，各方面還不是很完善，最終的估計(jì)就是加班的問題臀栈，在我入職這二十多天里面蔫慧，光新人剛?cè)肼毜木妥吡巳齻€(gè)，離職原因相信聽產(chǎn)品的人講是加班問題和公司制度問題权薯。加班沒什么好講的藕漱，現(xiàn)在已經(jīng)是常態(tài)了，一三五強(qiáng)制崭闲，周六也必須來肋联，但是周六我沒去，為啥沒去刁俭，我認(rèn)為對(duì)個(gè)人來講周六有更加重要的東西橄仍，工作是給公司貢獻(xiàn)自己的價(jià)值，但是休息的時(shí)候就是給自己充電牍戚，只有這樣才能保證自己一直前進(jìn)侮繁，不會(huì)講突然沒電，折半路上去了如孝，即使是不惜被老板罵宪哩。我到?jīng)]被罵，但是也沒好到那里去第晰∷希看看我昨天請(qǐng)假的后果：
上圖是周六凌晨一點(diǎn)十九分老大發(fā)的消息，但是突然撤回了品抽，我也沒看到是啥子储笑。
上圖就是老大撤回的內(nèi)容，想不明白老大發(fā)送的消息為什么突然撤回了圆恤，生平最恨別人發(fā)了消息就撤回突倍，這是不負(fù)責(zé)任的體現(xiàn)，就像講過的話盆昙，有的人就能當(dāng)啥事都沒發(fā)生似的羽历。想要回復(fù)這句話其實(shí)也很簡(jiǎn)單，這是我不加班你對(duì)我的懲罰淡喜，那好秕磷，我平時(shí)12345加班晚上的加班費(fèi)你給我按 1.5 倍計(jì)算，周六按 2倍計(jì)算拆火。當(dāng)然公司肯定不會(huì)這么干跳夭，我也不會(huì)這么說滴涂圆。畢竟勞資關(guān)系们镜，勞動(dòng)者是弱勢(shì)的一方。
在我剛剛實(shí)習(xí)的時(shí)候润歉，進(jìn)入的那家公司模狭，公司的主管就和現(xiàn)在的老板挺像的，天天看著你工作踩衩，實(shí)習(xí)的那家公司是主管坐在辦公室通過玻璃墻來觀察（監(jiān)視）員工的工作狀態(tài)嚼鹉，現(xiàn)在這家的老板是天天在工位旁邊轉(zhuǎn)悠，催進(jìn)度驱富。這點(diǎn)還是很不舒服的锚赤，這倒是不要緊的，最麻煩的是員工的工作習(xí)慣的改變褐鸥，溜須拍馬肯定會(huì)占著上風(fēng)线脚，實(shí)習(xí)的那家公司就是這樣，不干活的但會(huì)表現(xiàn)的人升職加薪叫榕，真正干活的人反而升職沒他們快浑侥，我看現(xiàn)在這家公司也是有點(diǎn)苗頭，但是因?yàn)槲覀兪羌兗夹g(shù)公司晰绎，人都是比較踏實(shí)的寓落，風(fēng)氣并沒有特別不好。
本周最有收獲的地方就是從我們產(chǎn)品的身上學(xué)到的東西荞下，坐在我身旁的產(chǎn)品是九零年的人伶选，快比我大了十歲史飞，他產(chǎn)品的技術(shù)應(yīng)該不錯(cuò)，但是最佩服的還是游刃有余的職場(chǎng)本事了考蕾。我自我感覺在公司員工的眼里就是個(gè)愣頭青祸憋。因?yàn)槲倚欧畹木褪俏乙詾榈木褪俏乙詾椋F(xiàn)實(shí)是你以為的還真不是你以為的肖卧，就像我不明白我實(shí)習(xí)的那家公司蚯窥，怎么能活下去，公司一幫這樣的人為什么能和上海最有知識(shí)的老師打交道塞帐，做生意拦赠，甚至有的員工跟老師的關(guān)系還不錯(cuò)，也不知道是他們臆想的還是真有其事葵姥，還有點(diǎn)緋聞荷鼠。我學(xué)習(xí)的東西很多都是網(wǎng)上的，以為老師都是向他們似的眼見和認(rèn)知都比較高榔幸，你真去接觸了還真不是那么回事允乐。和我想的差距挺大的，算是我對(duì)這個(gè)世界認(rèn)識(shí)不夠吧削咆‰故瑁回到我們的產(chǎn)品上，完全給我演示了從入職到勝任工作的全過程拨齐，算是我入職這家公司的最大收獲鳞陨，工資都是小事沒白來。以后肯定都能用到瞻惋。嘻嘻厦滤。
現(xiàn)在前端開發(fā)在寫樣式的時(shí)候比以前省心多了，這無疑得益于 UI 框架的普及歼狼，但是缺點(diǎn)就是使用它的東西不能完全自定義掏导。這次就遇到 element-UI input 輸入框高度自定義的問題。
先測(cè)試下簡(jiǎn)單的按鈕修改：
一羽峰、先放一個(gè)按鈕
<template>
<div>
<el-button type="warning">按我</el-button>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
</style>
上面是個(gè)普通的按鈕趟咆。我們來改變它，自定義一個(gè)類名限寞。
<template>
<div>
<el-button type="warning" class="btn">按我</el-button>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
.btn{
background-color: blue;
}
</style>
按鈕變成藍(lán)色的忍啸，符合預(yù)期。
接下來采用樣式覆蓋的方法履植，審查元素计雌，拿到類名。
<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 自定義樣式可以自定義類名也可以采用覆蓋的方法凿滤。下面來看看輸入框：
二妈橄、輸入框
放一個(gè)輸入框：
<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 補(bǔ)充：
這里解釋下為什么審查元素得到的類名 el-input__inner眷蚓，在這里使用完全失效。再次總結(jié)下 elementUI 自定義樣式的方法
- elementUI 標(biāo)簽的標(biāo)簽名就是類型反番，例如按鈕標(biāo)簽：
<el-button></el-button>它的類名使用就能這樣.el-button{} - 自定義類名覆蓋原有樣式沙热，例如：
class="cur" - 用了elementUI標(biāo)簽，在控制臺(tái)審查元素時(shí)出現(xiàn)的類名罢缸。我們想去修改他的話篙贸。這時(shí)候如果你直接 copy 類名到 style 里面直接用，我們看到是失效的枫疆。因?yàn)槟氵@個(gè)組件里面沒有爵川。如果你非要這么用，當(dāng)然可以這樣寫息楔，去掉scoped 變成全局樣式：
<style>
.el-input__inner{
}
</style>
這種方法存在全局污染萬一其他地方也用到了這個(gè)就玩完了寝贡。所以使用深度作用選擇器。
所以上面我們使用控制臺(tái)的樣式失效值依，就很容易明白了圃泡，直接使用組件不存在的類名，這個(gè)類選擇器只能作用在本地鳞滨，全局是不會(huì)生效的洞焙。那為什么使用自定義類名也不行蟆淀，因?yàn)槿謱?duì)自定義的類名進(jìn)行了覆蓋拯啦。
分割線
混用本地和全局樣式里面講：
深度作用選擇器
如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件熔任，你可以使用 >>> 操作符褒链。有些像 Sass 之類的預(yù)處理器無法正確解析 >>>，這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名疑苔，同樣可以正常工作甫匹。
注意最后一句話，在 scss 環(huán)境下惦费，就是上面高度沒有生效的例子兵迅，當(dāng)我們指定 lang='scss' 樣式就會(huì)全部失效。效果如下：
<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;
}
總結(jié)：el-input 輸入框薪贫，自定義類名修改樣式恍箭，只有高度沒生效，覆蓋方法瞧省，自定義的樣式全部失效扯夭，在 scss 環(huán)境下使用深度作用選擇器的時(shí)候鳍贾，無作用，只能不使用 css 預(yù)處理器完成高度自定義交洗。
上面這個(gè)總結(jié)就不是太對(duì)了骑科。對(duì)的總結(jié)請(qǐng)參考 2019年12月21日新增的總結(jié)。
