从群友那儿学来了一个前端词汇
穿透
原因是我使用 Vuetify 的 文本框 v-text-field
使用了 dense 前/后置 图标就不能 垂直居中 了
先来一个没有 dense 的
<v-text-field
outlined
solo
single-line
clearable
prepend-inner-icon="mdi-text"
hide-details="auto"
label="请输入"
></v-text-field>
效果图如下：
image
看着感觉有点“胖”。。。
这时候 前置图标 还是居中的
这时候加上 dense
<v-text-field
dense
outlined
solo
single-line
clearable
prepend-inner-icon="mdi-text"
hide-details="auto"
label="请输入"
></v-text-field>
再看效果图：
image
明显图标下移了！看着相当难受啊！
这时候可以看下页面元素的样式，这就是没能居中的原因
image
然后找到 vuetify.css 发现是这么定义的，这。。太为难我了。。
image
这时候嘛，作为一个小菜鸟，第一反应，当然是直接修改成 margin-top: 0; 咯
<style scoped>
.v-text-field.v-input--dense .v-input__prepend-inner .v-input__icon > .v-icon,
.v-text-field.v-input--dense .v-input__append-inner .v-input__icon > .v-icon {
margin-top: 0;
}
<style>
但是，这时候，
刷新了页面，
清理了浏览器缓存，
再看这个元素的样式，发现！
还是 margin-top: 8px;！
这时候不慌，我在 style 标签里加了 scoped 表示仅作用在当前的 vue 组件，
如果删掉 scoped 呢，的确是可以让 前置图标 居中，图就不放了（懒）。
但是，就真的只有这种方式？
当然不，最终我放了个大招，面向群友编程
于是就学到一个新词 穿透
在 Vue 官网 也是有提到过的，新知识点 get。
这时候赶紧改起来
<style scoped>
>>> .v-text-field.v-input--dense .v-input__prepend-inner .v-input__icon > .v-icon,
>>> .v-text-field.v-input--dense .v-input__append-inner .v-input__icon > .v-icon {
margin-top: 0;
}
<style>
再看效果图：
image
✌️ 居中了，看着舒服多～
文章写于 2020-04-10T15:37:18+08:00
原文地址是我的个人网站，没太多时间维护，就不放地址了
