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

原创于 2019-01-11 15:30:48 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

本文探讨了在Vuetify框架中遇到的Vue项目弹窗留白现象，当使用v-dialog组件且内容过长时，会存在背景留白的情况。分析可能的原因包括document.body.clientHeight监听的屏幕可视高度以及布局问题。通过调整布局或监听事件，可以避免弹窗内容加长时背景留白的现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vuetify框架的v-dialog时，点击侧边栏，弹出弹框，因内容过长，所以留白。
在这里插入图片描述

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>