【问题标题】: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 来手动完成。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-08-01
        • 2018-08-31
        • 2022-01-15
        • 2020-02-10
        • 2020-05-03
        • 1970-01-01
        • 2020-02-01
        • 1970-01-01
        相关资源
        最近更新 更多