Question

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

这是我正在使用的标记：

<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>

如果我修改标记以模仿docs示例，例如：

<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不会产生任何影响。

Answer 1

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

Answer 2

由于xs1列，因此出现的空格是正确的。

如果将所有v-flex放在其中，则元素将与display:block一起使用，因此它将位于另一行；为了避免这种情况，请按照以下示例将其放在v-layout中：

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

使用类收缩只使用其内容所需的空间（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>

JS

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>

此处的Codepen：https://codepen.io/pen/?&editable=true&editors=101

Answer 3

您可以尝试将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>

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

3 个答案: