如何在vuetify的模式对话框中添加垂直滚动条? [英] How can I add scrollbar vertical in the modal dialog on the vuetify?

问题描述

我的代码是这样的:

<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

我希望有很多时间，滚动条会自动出现在模式对话框中

I want when there is a lot of time, scrollbar automatically appears in the modal dialog

我该怎么办?

推荐答案

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

Added a v-flex wrapper around content area inside v-dialog, then set width limit for row to restrict, Now its working as expected

添加CSS

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

此处更新了代码笔: 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>

这篇关于如何在vuetify的模式对话框中添加垂直滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！