vuetify框架下的Vue项目弹窗留白

在使用vuetify框架的v-dialog时,点击侧边栏,弹出弹框,因内容过长,所以留白。
vuetify框架下的Vue项目弹窗留白_第1张图片

Q:猜测可能的原因:
----1、document.body.clientHeight监听的是屏幕可视高度

<v-dialog  v-model="dialog7" fullscreen transition="dialog-bottom-transition">
	<layout column fill-height>
		<v-card :height="displayHeight"></v-card>
	</layout>
</v-dialog>
data(){displayHeight: 0}
mounted(){this.displayHeight = document.body.clientHeight}

----2、布局问题

<v-dialog>
	<v-layout> <!--此处导致上图问题-->
		<v-flex xs12>  <!--此处导致下图一问题-->
			<v-toolbar></v-toolbar>
		</v-flex>
		<v-flex xs12>
			<v-card>
			</v-card>
		</v-flex>
	</v-layout>
</v-dialog>

vuetify框架下的Vue项目弹窗留白_第2张图片
A:删除 得以下效果,内容加长,则背景也加长,不会留白
vuetify框架下的Vue项目弹窗留白_第3张图片

你可能感兴趣的:(vuetify框架下的Vue项目弹窗留白)