Question

我有一个表单，该表单当前包含用于图片的缩略图上传器的V-CARD（200像素乘200像素是缩略图预览的大小）。但是，由于我使用的是Vuetify和flex，因此我的缩略图查看器所占据的行定义了“行的宽度”。因此，如果我尝试减小缩略图选择器的大小（即从md12到md4），则我的其他字段将能够适合缩略图所在的空白区域，但是，文本之间将存在巨大的空白区域-field和下一行，我可以在下面容纳另一个文本字段。我有一个突出显示我的问题的codepen：https://codepen.io/lec_m/pen/xooPBB

如您所见，v卡占据了整行，而我无法将文本字段环绕在v卡上。

顺便说一句，这个Codepen没有像我的代码那样的动态组件，但是我假设它应该相对相同。

我尝试使用md大小。我尝试使用<v-layout row wrap>也不起作用。我还尝试将缩略图选择器的大小减小为md2，并以编程方式设置其他v-text-field的高度，但两者均无济于事。缩略图行的高度仍为200px。

我的整个表单创建如下：

 <template>
  <v-container fluid>
   <v-card>
    <b-form-editing-toolbar
      :heading="title"
    />
    <myComponent
      test-id="Fields"
      :namespace="'fieldForForm'"
    />
  </v-card>
 </v-container>
</template>`

然后，myComponent如下：

  <template>
   <v-flex>
    <v-form>
     <v-container>
      <v-layout row wrap>
       <customField
         v-for="field of template"
         :key="field.id"
       />
     </v-layout>
    </v-container>
   </v-form>
 </v-flex>
</template>`

现在customField：

<template>
  <v-flex > --> CSS class is loaded from JSON file
    <component
      :key="field.name"
      :is="field.component"
    />
  </v-flex>
</template>

因此，事情的流程是这样的：fieldsForForm只是我们的命名空间，其中myComponent将使用命名空间名称从正确的模板加载字段。这些字段均在JSON文件中定义，其中包含1）组件名称和2）css名称。再次，我的codepen解决了这个问题：

https://codepen.io/lec_m/pen/xooPBB

但是，此Codepen不包括组件的动态加载

如果更改组件的高度，这些字段将彼此折叠，但是图片高度必须为200 x200。我希望缩略图右侧的所有空白都用{{1}填充}

用动态组件将文本字段环绕在v卡周围

0 个答案: