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

Stack Overflow用户

提问于 2019-05-10 03:26:51

回答 3查看 9.3K关注 0票数 6

我正在Vue应用程序中使用Vuetify，并且我正在尝试创建一个复选框/文本字段组合(如here in the Vuetify docs所示)。然而，当我试图在我的应用程序中实现它时，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>

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

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

它们甚至不能放在一行上：