【问题标题】:How can I set layout row in dialog vuetify?如何在对话框 vuetify 中设置布局行?
【发布时间】:2020-02-10 02:34:05
【问题描述】:

我的布局有问题。看看这个:

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

当对话框出现时,它看起来很奇怪。因为row(<v-row justify="center">) 的宽度大于dialog 的宽度。所以当模态对话框出现时就像有2个阴影。

我希望行的宽度(<v-row justify="center">)与对话框的宽度相同

我试过了。但我没有找到解决办法。希望有人帮助

【问题讨论】:

  • 如果有帮助,这里有一个替代解决方案。添加以下 CSS 以隐藏 v-dialog 阴影 - .v-dialog { box-shadow: none!important; }

标签: css vue.js datepicker vue-component vuetify.js


【解决方案1】:

将对话框设置为使用自动宽度

.v-dialog {
 width:unset;
}

在你的行中使用无排水沟

<v-row no-gutters justify="center">

在右侧列中添加 x 填充并删除 row=2 属性

<v-col class='px-3' v-show="foo.date !== null" 

【讨论】:

    【解决方案2】:

    在 v-col 上使用 v-card

    <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"
                max-width="500px"
                min-width="500px"
                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-card class="py-2">
                  <v-card-text>
                    <v-row justify="center" no-gutters align-content="center">
                      <v-col md="auto" justify-self="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-col>
                      <v-slide-y-transition>
                        <v-col
                          sm="3"
                          xs="12"
                          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-card-text>
                </v-card>
              </v-dialog>
            </v-container>
          </v-content>
        </v-app>
      </div>
    

    【讨论】:

    • 好的。我先试试
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多