Question

我有一个问题，我想堆叠一个v工具栏和一个v日历，我希望日历占用剩余的空间。如果我仅添加日历，效果很好，但是如果我在上面添加其他内容，则日历会溢出屏幕。（参见图片底部的空白）

截屏： https://drive.google.com/open?id=1dOU6IMzWHUqZk5H2e-2-zTez-l17FLG5

我确定问题出在填充高度属性的问题上，但是我不知道如何解决。请问有人知道吗？

<template>
  <v-container fill-height fluid ma-0 pa-0>
    <v-layout row wrap align-content-start>
      <v-flex xs12>
        <v-toolbar flat>
          <v-flex shrink>
            <for-and-backward-arrows v-model="selectedDate" />
          </v-flex>
        </v-toolbar>
      </v-flex>
      <v-flex shrink>
        <MonthOverView @click="setDate" />
      </v-flex>

      <v-flex fill-height>
        <v-calendar
          ref="calendar"
          type="month"
          color="primary"
          :start="selectedDate.format('YYYY-MM-DD')"
        >
          <template v-slot:day="day">
            <v-sheet class="d-flex px-1 caption" :color="color"
              >day slot</v-sheet
            >
          </template>
        </v-calendar>
      </v-flex>
    </v-layout>
    <AddButtons></AddButtons>
  </v-container>
</template>

<script>
import MonthOverView from '@/plugins/Goole-Calendar/src/components/MonthOverView.vue'
import AddButtons from '@/plugins/Goole-Calendar/src/components/AddButtons.vue'
import ForAndBackwardArrows from '@/plugins/Goole-Calendar/src/components/ForAndBackwardArrows.vue'
import moment from 'moment'
export default {
  props: {
    color: {
      type: String,
      default: 'primary lighten-3'
    }
  },
  data() {
    return {
      selectedDate: moment()
    }
  },
  methods: {
    setDate(date) {
      log.debug(date)
      this.selectedDate = date
    }
  },
  components: {
    MonthOverView,
    AddButtons,
    ForAndBackwardArrows
  }
}
</script>

Answer 1

我自己碰到了这个。解决方案是使用flex-column。

<v-content>
  <v-row no-gutters class="fill-height">
    <v-col class="d-flex flex-column">
      <v-toolbar></v-toolbar>
      <v-calendar></v-calendar>
    </v-col>
  </v-row>
</v-content>

如果我添加第二个元素（例如v-card或v-toolbar），则具有fill-height的v-layout v-flex会使屏幕溢出

1 个答案: