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

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

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-选择最小低度限制?的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。