如何在 vuetify 的模态对话框中添加垂直滚动条？

Question

我的代码是这样的：

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-dialog
            v-for='foo, k in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            :return-value.sync="foo.date"
            min-width="290px" 
            v-model="modal[k]"
            :ref="'dialog' + k"
        >
            <template v-slot:activator="{ on }">
                <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn>
            </template>

            <v-row justify="center">
            <v-date-picker v-model="foo.date" @input="changeHours">
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modal[k] = false">Cancel</v-btn>
                <v-btn text color="primary" @click="$refs['dialog' + k][0].save(foo.date)">OK</v-btn>
            </v-date-picker>
            <v-slide-y-transition>
            <v-col cols=2 v-show="foo.date !== null"  :style="{'background-color':'white'}">
              <template v-for="allowedTime in allowedTimes">
                <v-btn
                  @click="setTime(allowedTime)"
                  class="my-2"
                  :outlined="allowedTime !== time"
                  block
                  x-large
                  color="primary"
                >{{ allowedTime }}</v-btn>
              </template>
            </v-col>
            </v-slide-y-transition>
            </v-row>
        </v-dialog>    
      </v-container>
    </v-content>
  </v-app>
</div>

演示是这样的：

https://codepen.io/positivethinking639/pen/YzzwYZq

我想当有很多时间时，滚动条自动出现在模态对话框中

我该怎么做？

Answer 1

在 v-dialog 内的内容区域周围添加了一个 v-flex 包装器，然后为要限制的行设置宽度限制，现在它按预期工作

添加CSS

.row {
margin-right: 0 !important;
}

在此处更新 codepen：https://codepen.io/chansv/pen/GRRqLyp

    <div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-dialog
            v-for='foo, k in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            :return-value.sync="foo.date"
            v-model="modal[k]"
             max-width="390px"
            :ref="'dialog' + k"
        >
            <template v-slot:activator="{ on }">
                <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn>
            </template>

          <v-flex row-wrap justify-center>
            <v-row>
            <v-date-picker v-model="foo.date" @input="changeHours">
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modal[k] = false">Cancel</v-btn>
                <v-btn text color="primary" @click="$refs['dialog' + k][0].save(foo.date)">OK</v-btn>
            </v-date-picker>
            <v-col class="col-3" v-show="foo.date !== null"  :style="{'background-color':'white'}">
              <template v-for="allowedTime in allowedTimes">
                <div>
                <v-btn
                  @click="setTime(allowedTime)"
                  class="my-2"
                  :outlined="allowedTime !== time"
                         large
                  color="primary"
                       >{{ allowedTime }}</v-btn></div>
              </template>
            </v-col>
            </v-row>
            <v-flex>
        </v-dialog>    
      </v-container>
    </v-content>
  </v-app>
</div>