Как добавить вертикальную полосу прокрутки в модальном диалоговом окне vuetify? - PullRequest
Новая
       59

Как добавить вертикальную полосу прокрутки в модальном диалоговом окне vuetify?

1 голос
/ 16 октября 2019

Мой код такой: 

<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

Я хочу, когда много времени, автоматически появляется полоса прокруткив модальном диалоге

как я могу это сделать?

1 Ответ

1 голос
/ 17 октября 2019

Добавлена ​​оболочка v-flex вокруг области содержимого внутри v-диалогового окна, затем установлен предел ширины для ограничения строки. Теперь она работает, как и ожидалось

add 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>
...