Vue 使用 UI 组件库 Vuetify 修改样式

从群友那儿学来了一个前端词汇 穿透

原因是我使用 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

原文地址是我的个人网站，没太多时间维护，就不放地址了