如何减小 vuetify 输入的大小（v-select/v-input）答案

【问题标题】：How to reduce size of vuetify inputs(v-select/v-input)如何减小 vuetify 输入的大小（v-select/v-input）
【发布时间】：2021-10-13 21:47:53
【问题描述】：

如何使 vuetify 输入字段（v-select/v-input）更小？更小我的意思是减少内部空白/填充？

这是我的标记：

          <div class="d-flex selects">
            <v-select
                :items="['Accepted', 'Pending']"
                label="Accepted"
                outlined
                class="select mr-3"
            ></v-select>
            <v-select
                :items="['Oldest', 'Newest']"
                label="Oldest"
                outlined
                class="select mr-3"
            ></v-select>
            <v-text-field
              label="Date"
              persistent-hint
              append-icon="mdi-calendar"
              outlined
            ></v-text-field>
          </div>

【问题讨论】：

标签： vue.js vuetify.js v-select

【解决方案1】：

vuetify js 给了 SASS API 来改变组件的样式：

<style lang="scss" scoped>
$text-field-padding: 8px 0 8px !default;
</style>

这是输入组件的默认样式。您可以根据需要对其进行调整。您还可以通过以下链接了解更多 SASS API：https://vuetifyjs.com/en/api/v-text-field/#api-sass

【讨论】：

【解决方案2】：

您可能可以使用 'dense' 道具，例如：

<v-select
  :items="['Accepted', 'Pending']"
  label="Accepted"
  outlined
  dense
  class="select mr-3"
></v-select>

这将减少here记录的一些空间

为了减少更多，我想你必须通过覆盖 vuetify scss 或 css 来手动完成。

【讨论】：