我在布局上有问题。看这个:
https://codepen.io/positivethinking639/pen/YzzwYZq。
对话框出现时,看起来很奇怪。因为row(<v-row justify="center">
的宽度大于dialog
的宽度。因此,当模态对话框出现时,有2个阴影。
我希望行(<v-row justify="center">
)的宽度与对话框的宽度相同
我尝试过。但是我没有找到解决方案。希望有人帮助
答案 0 :(得分:0)
将对话框设置为使用自动宽度
.v-dialog {
width:unset;
}
在您的行上使用无檐槽
<v-row no-gutters justify="center">
在右侧列中添加x填充并删除row=2
属性
<v-col class='px-3' v-show="foo.date !== null"
答案 1 :(得分:0)
在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>