vue.js 如何减小虚拟化输入的大小(虚拟选择/虚拟输入)

9o685dep 于 2023-02-05 发布在 Vue.js

关注(0)|答案(3)|浏览(140)

我怎样才能让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

来源：https://stackoverflow.com/questions/68724954/how-to-reduce-size-of-vuetify-inputsv-select-v-input

3条答案

按热度按时间

oknwwptz1#

您可以使用“密集”属性，例如：

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

如此处所述，这将减少一些空间
要减少更多，我想你必须手动覆盖vuetify scss或css。

赞(0）回复(0）举报 2023-02-05

lymgl2op2#

vuetify js提供SASS API来更改组件的样式：

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

这是输入组件的默认样式。2你可以根据自己的需要调整它。3你也可以从下面的链接阅读更多的SASS API：https://vuetifyjs.com/en/api/v-text-field/#api-sass

赞(0）回复(0）举报 2023-02-05

pokxtpni3#

使用此css：

.v-text-field.v-text-field--solo .v-input__control {
    min-height: 10px;
}

应考虑：

从样式标签中删除scoped属性（这意味着更改将在整个项目中生效）
这将只适用于solo prop ，不适用于dens，outlined，...

列表项

赞(0）回复(0）举报 2023-02-05

我来回答

vue.js 如何减小虚拟化输入的大小(虚拟选择/虚拟输入)

3条答案

相关问题

热门标签

最新问答