vuetify.js v-select 最小高度限制？答案

【问题标题】：vuetify.js v-select minimum height limitation?vuetify.js v-select 最小高度限制？
【发布时间】：2019-04-21 03:30:06
【问题描述】：

从下面可以看出，我正在尝试降低 v-select 元素的高度，但我可以设置的最小高度似乎有限制。即在height = 40 之后，进一步降低高度似乎不再起作用。反正有没有围绕这个限制，所以我可以让这个元素更小？我需要这个，因为我需要将它放入一个相对较小的 div 中。提前致谢 -

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
<v-app>
  <v-layout row>
      <v-select
        label="height=80"
        outline
        height="80"
        :items="years">
      </v-select>
      <v-select
        label="height=60"
        outline
        height="60"
        :items="years">
      </v-select>
      <v-select
        label="height=40"
        outline
        height="40"
        :items="years">
        </v-select>
      <v-select
        label="height=20"
        outline
        height="20"
        :items="years">
      </v-select>
  </v-layout>
</v-app>
</div>

【问题讨论】：

min-height 是 56px
@BoussadjraBrahim 很高兴知道这一点。我需要它短于 56px。不确定这是否可能-

标签： javascript css vue.js vuejs2 vuetify.js

【解决方案1】：

v-select 组件的min-height 是56px，由以下 CSS 规则定义：

     .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
       min-height:56px;
     }

让我们通过设置来覆盖它：

  .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
   min-height: auto!important;
  }

但结果并不完美，内容也没有正确对齐，为了解决这个问题，我们将在上述规则中添加以下属性：

  display: flex!important;
  align-items: center!important

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

.v-text-field--box .v-input__slot,
.v-text-field--outline .v-input__slot {
  min-height: auto!important;
  display: flex!important;
  align-items: center!important;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
  <v-app>
    <v-layout row>
      <v-select label="height=80" outline height="80" :items="years">
      </v-select>
      <v-select label="height=60" outline height="60" :items="years">
      </v-select>
      <v-select label="height=40" outline height="40" :items="years">
      </v-select>
      <v-select label="height=20" outline height="20" :items="years">
      </v-select>
    </v-layout>
  </v-app>
</div>

【讨论】：

感谢您的回答。这看起来很有希望。几乎是我要找的，除了标签和图标没有对齐。无论如何，您知道将它们垂直居中对齐吗？
不客气，*很难做到这一点，因为我们的字体大小不合适，但我正在处理这个pen
我正在尝试类似.v-input__append-inner { margin-top: 0px; } 的方法将图标向上移动，但似乎不起作用。
@Psidom 我通过添加一些属性修复了这个问题，我希望我可以实现这一点
完美。正是我正在寻找的。不过还有一个问题。当我在我的组件中将这些自定义 css 应用为 scoped 时，它会影响所有 vuetify v-select 元素（应用程序方面）吗？或者它只会影响这个特定的组件。

【解决方案2】：

我正在使用 vuetify 1.5，接受的答案对我不起作用，但如果您希望自己的高度为 32px，例如：

.v-text-field.v-text-field--enclosed .v-text-field__details, 
.v-text-field.v-text-field--enclosed > .v-input__control > .v-input__slot {
        margin: 0;
        max-height: 32px;
        min-height: 32px !important;
       display: flex!important;
       align-items: center!important
}

【讨论】：

【解决方案3】：

我认为最好的做法是覆盖默认变量，在 API 文档中检查您需要哪一个（有最小高度、填充等...）：

https://vuetifyjs.com/en/api/v-select/#sass-variables

有关 Vuetify 变量的一般信息，请参阅官方文档：

https://vuetifyjs.com/en/features/sass-variables/

【讨论】：

【解决方案4】：

给定的解决方案对我不起作用...所以我创建了一个。

这将减少选择和列表项

.v-select .v-input__control .v-input__slot .v-select__slot .v-select__selections {
  padding: 0 !important;
  min-height: 0 !important;
}

.v-select-list .v-list-item {
  min-height: 0 !important;
}

.v-select-list .v-list-item .v-list-item__content {
  padding: 4px 0 !important;
}

【讨论】：