我在 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没有区别。
最佳答案
您可以尝试将 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>
关于javascript - Vuetify 中大尺寸 v-checkbox 元素的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56066320/