调整vuetify中`VNumberInput`的输入字段高度

Question

我正在尝试在 vuetify 中将

v-number-input

或

VNumberInput

的高度调整为

32px

。虽然组件的某些部分似乎响应了我的 CSS，但我无法将整个组件的高度降低到

40px

以下。

我在浏览器中检查了组件和 html 结构，看起来 没有额外的边距或填充来阻止高度变化。这是我当前的实现代码。我在 vuetify

3.7.1

。

我目前的尝试：

<template>
    <v-number-input
        v-model="lol"
        class="custom-height"
        color="primary"
        control-variant="split"
        variant="outlined"
        density="compact"
        width="120"
        hide-details
        single-line
        :rules="rules.integerOnly"
        :min="0"
    />
</template>

<style>
:root {
    --v-number-input-height: 32px;
}

/* The whole container */
.custom-height .v-input__control {
    height: var(--v-number-input-height);
    line-height: var(--v-number-input-height);
}

/* The decrement container */
.custom-height .v-field__prepend-inner {
    height: var(--v-number-input-height);
}

/* The FIELD container */
.custom-height .v-field__field {
    height: var(--v-number-input-height);
    padding: 0;
}

/* The increment container */
.custom-height .v-field__append-inner {
    height: var(--v-number-input-height);
}

/* The buttons */
.custom-height .v-number-input__control button {
    width: calc(var(--v-number-input-height) + 0.2px);
}

.custom-height input.v-field__input {
    height: var(--v-number-input-height) !important;
    background-color: blanchedalmond;
    padding: 0;
    box-sizing: border-box; 
}
</style>

问题是：

• 输入字段不在中心（如下面 SP 列中的

  Image A

  所示）。

• 尽管我尝试将其降低到

  40px

  ，但场高仍保持在

  32px

  。

• 我可以调整

  40px

  上方的高度，但不能调整下方（它在我的

  css

  中）。

.custom-height input.v-field__input {
    height: 32px !important;  /* It's changing if you set above 40 */
    padding: 0;
    background-color: blanchedalmond;
    box-sizing: border-box;  
}

图片A：

VNumberInput 示例问题

您可以忽略

SG

和ORD列中的其他VNumberInput，因为我还没有将

custom-height

类应用于它们

Answer 1

这可能是实现 32px 高度的最简单方法。 我必须注意，还需要

density="compact"

道具。

.v-number-input * {
  --v-input-control-height: 32px;
  --v-input-padding-top: 0px;
  --v-field-input-padding-bottom: 0px;
  --v-field-padding-bottom: 0px;
}

游乐场示例