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

Posted 2023-02-22

【中文标题】如何减小 vuetify 输入的大小（v-select/v-input）

【英文标题】：How to reduce size of vuetify inputs(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>

【参考方案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 来手动完成。