Vuetify 中 v-checkbox 元素过大的问题答案

【问题标题】：Problem with large size of v-checkbox element in VuetifyVuetify 中 v-checkbox 元素过大的问题
【发布时间】：2019-09-27 16:44:00
【问题描述】：

我在 Vue 应用程序中使用 Vuetify，并尝试创建一个复选框/文本字段组合（如图所示 here in the Vuetify docs）。但是，当我尝试在我的应用程序中实现它时，复选框元素的大小很大，因此它在复选框和文本字段之间创建了很大的空间：

这是我正在使用的标记::

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs1>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
    </v-flex>
    <v-flex xs4>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertBackgroundColor'"
          v-bind:init-color="templateModel.alertBackgroundColor"
          v-on:update-color="getUpdatedColor">
        </ColorPickerButton>
      </v-flex>
      <!-- Alert Text Color -->
      <v-flex xs1>
        <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
      </v-flex>
      <v-flex xs4>
        <v-text-field
          v-bind="fields.alertTextColor"
          v-model="templateModel.alertTextColor"
          placeholder="#4A4A4A"
          :disabled="true"
        />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertTextColor'"
          v-bind:init-color="templateModel.alertTextColor"
          v-on:update-color="getUpdatedColor"
        ></ColorPickerButton>
      </v-flex>
    </v-layout>
  </v-container>

如果我修改我的标记以模仿文档示例，如下所示：

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs5>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')""></v-checkbox>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
    </v-flex>
    <v-flex xs1>
      <ColorPickerButton
        v-bind:field-name="'alertBackgroundColor'"
        v-bind:init-color="templateModel.alertBackgroundColor"
        v-on:update-color="getUpdatedColor">
      </ColorPickerButton>
    </v-flex>
  </v-layout>
</v-container>

它们甚至不适合一行：

如何让这两个元素像文档示例中那样并排组合在一起？问题在于元素本身的计算大小，而不是填充或边距，因此使用 spacing helpers 并没有什么区别。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

您可以尝试将v-checkbox 和v-text-field 包装在v-layout 中

   <v-layout>
      <v-flex xs5>
        <v-layout>
          <v-checkbox v-model="includeFiles" hide-details class="shrink mr-2"></v-checkbox>
          <v-text-field label="Include files"></v-text-field>
        </v-layout>
      </v-flex>
      <v-flex xs1>Test</v-flex>
    </v-layout>

【讨论】：

【解决方案2】：

<v-checkbox class="shrink mr-0 mt-0"></v-checkbox>

【讨论】：

【解决方案3】：

那里出现的空间是由于xs1列，所以它是正确的。

如果你把所有元素都放在一个 v-flex 中，元素将与 display:block 一起出现，所以它将在另一行中；为避免将其放入 v-layout 中，如下所示：

https://vuetifyjs.com/en/components/selection-controls - 复选框 - 内联文本字段

并使用类 shrink 仅使用其内容所需的空间 (https://vuetifyjs.com/en/framework/grid#grow-and-shrink)：

<v-layout row wrap>
  <v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
  <v-text-field label="Include files"></v-text-field>
</v-layout>

new Vue({
  el: '#app',
  data: () => ({
    includeFiles: true,
    enabled: false
  })
})

如果您想使用尺寸将其放在xs6 列上，您可以这样做：

<v-layout row wrap>
      <v-flex xs6>
        <v-container fluid pa-0>
          <v-layout row wrap>
            <v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
            <v-text-field label="Include files"></v-text-field>
          </v-layout>
        <v-container>
      </v-flex>
    </v-layout>

在此处编写代码：https://codepen.io/pen/?&editable=true&editors=101

【讨论】：