Vue-leaflet 和 vuetify

Question

我对 vue-leaflet 和 vuetyfy 有疑问。我有一个简单的模板，它显示不同的布局取决于移动设备与否。如果应用程序检测到移动设备，我想制作 2 行布局，第一个地图，第二个用于输入表单。但是该地图占据了该地图上方显示的所有屏幕空间和输入表单。我的桌面屏幕的第二个布局工作正常，我只是将 w-50 类设置为 map 等等。我试图将 h-50 设置为地图，但它没有按预期工作。如何解决这个问题？

我的布局是这样的：

<template>
  <v-container fluid v-if="mobile">
    <v-row class="mb-5">
      <v-col class="pl-0">
        <Map marker="true" />
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <AddPlaceDescription />
      </v-col>
    </v-row>
    <Footer />
  </v-container>

  <v-container fluid v-else>
    <v-row>
      <v-col class="px-0">
        <Map class_attr="w-50" marker="true" />
      </v-col>
      <v-col>
        <AddPlaceDescription />
      </v-col>
    </v-row>
    <Footer />
  </v-container>
</template>

这是我的地图组件

<template>
  <l-map
    id="themap"
    :class="class_attr"
    :zoom="zoom"
    :center="center"
    @update:zoom="zoomUpdated"
    @update:center="centerUpdated"
    @update:bounds="boundsUpdated"
  >
    <l-tile-layer :url="url" ></l-tile-layer>

    <v-marker-cluster>
      <l-marker
        v-if="marker"
        ref="marker"
        draggable
        @dragend="onDragEnd"
        :latLng="center"
      ></l-marker>
      <l-marker
        v-for="marker in markersData"
        :key="marker['latLng'][0]"
        :lat-lng="marker['latLng']"
      >
        <l-popup><a href="#">{{marker['description']}}</a></l-popup>
      </l-marker>
    </v-marker-cluster>
  </l-map>
</template>

AddPlaceDescription 组件

<template>
  <v-row>
    <v-col class="ml-3">
      <v-alert
        v-if="showMsg"
        border="left"
        :color="msgColor"
        outlined
        text
        type="error"
        >{{ msg }} {{countDown}} </v-alert
      >
      <form action="">
        {{ this.$store.state.Map.markerLatLng }}
        <v-textarea
          outlined
          name="place-description"
          label="Description"
          v-model="description"
          :disabled='showMsg'
        ></v-textarea>
        <v-btn @click="sendPoint" :disabled='showMsg'>Send</v-btn>
        <v-btn @click="clearForm" :disabled='showMsg'>Clear</v-btn>
      </form>
    </v-col>
  </v-row>
</template>

这样的结果

Answer 1

所以我打破了它yahoooo））我只是交换组件的位置，它按预期工作。我当然想在地图下方描述组件，但总比没有好。