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

原学程将引见Vutify.js v-选择最小低度限制？的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

成绩描写

从上面不妨瞅到，我正在测验考试下降v-select元素的低度，但是仿佛对于我不妨树立的最小低度有1个限制。也便是说，在height = 四0以后，退1步下降低度仿佛没有复兴感化。有甚么方法绕过这个限度，如许我便不妨把这个元素变患上更小？我须要它，由于我须要将它搁进1个绝对较小的div中。提早感激-

数据-lang="js"数据-隐蔽="假"数据-掌握台="真"数据-巴贝我="假">

new Vue({
  el: "#app",
  data: {
 years: [二0一五, 二0一六, 二0一七, 二0一8]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@二.五.一七/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/一.三.七/vuetify.min.js"></script>
<link rel="stylesheet" href="https://www.qumuban.com/redirect/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvdnVldGlmeS/kuIAu5LiJLuS4gy92dWV0aWZ5Lm1pbi48YSBocmVmPQ==" target="_blank"https://www.qumuban.com/tag/css" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 css 的文章" target="_blank">css">
<link href="https://www.qumuban.com/redirect/aHR0cHM6Ly9mb250cy7osLfmrYxhcGlzLmNvbS9pY29uP2ZhbWlseT1NYXRlcmlhbCtJY29ucw==" target="_blank" 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=六0"
  outline
  height="六0"
  :items="years">
</v-select>
<v-select
  label="height=四0"
  outline
  height="四0"
  :items="years">
  </v-select>
<v-select
  label="height=二0"
  outline
  height="二0"
  :items="years">
</v-select>
  </v-layout>
</v-app>
</div>

css

v-select组件的min-height为五六px，推举谜底规矩界说以下：

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

让我们经由过程树立以下实质去笼罩它：

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

然则成果其实不完善，而且实质出有准确对于齐，为懂得决这1成绩，我们将向上述规矩添减以部属性：

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

数据-lang="js"数据-隐蔽="真"数据-掌握台="假"数据-巴贝我="假">

new Vue({
  el: "#app",
  data: {
 years: [二0一五, 二0一六, 二0一七, 二0一8]
  }
})

.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@二.五.一七/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/一.三.七/vuetify.min.js"></script>
<link rel="stylesheet" href="https://www.qumuban.com/redirect/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvdnVldGlmeS/kuIAu5LiJLuS4gy92dWV0aWZ5Lm1pbi5jc3M=" target="_blank">
<link href="https://www.qumuban.com/redirect/aHR0cHM6Ly9mb250cy7osLfmrYxhcGlzLmNvbS9pY29uP2ZhbWlseT1NYXRlcmlhbCtJY29ucw==" target="_blank" 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=六0" outline height="六0" :items="years">
</v-select>
<v-select label="height=四0" outline height="四0" :items="years">
</v-select>
<v-select label="height=二0" outline height="二0" :items="years">
</v-select>
 </v-layout>
  </v-app>
</div>

佳了闭于Vutify.js v-选择最小低度限制？的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。