vuetify.js v-选择最小高度限制？

Question

正如您从下面可以看到的，我试图降低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>

​

Answer 1

min-height of v-select组件是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>

​

Answer 2

我正在使用vuetify 1.5，而接受的答案对我无效，但这确实有效，例如，如果您希望您的身高为32 be：

.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
}

Answer 3

我认为最佳实践是覆盖默认变量，检查您需要哪个变量(有最小高度、填充等等)。在API文档中：

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

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

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