视图尺寸

默认尺寸

弹出层的视图默认会自动根据内部视图组件的内容 自动适配 ，因此大部分情况下你无需手动设置，只需要在弹出的组件内设置好尺寸即可。

HelloPopup.vue

<style scoped>
.hello-popup {
	width: 300px;
	height: 300px;
}
</style>

这样渲染的弹出层视图尺寸就会自动适配为 300 * 300。

手动指定尺寸

虽然弹出层的视图尺寸默认情况下会根据内容 自动适配 ，但是在一些场景下，我们可能需要手动指定弹出层的视图尺寸。

关于尺寸支持的渲染选项包括：

• width：宽度，默认值为 'auto'。
• height：高度，默认值为 'auto'。

下面的示例将演示如何手动指定弹出层的视图尺寸。

popup.render({
	component: () => import('./HelloPopup.vue'),
	width: '50%',
	height: 600,
})

这里的 '50%' 和 600 都是尺寸的合法值，事实上对于 string 类型的尺寸值，我们可以使用任何合法的 CSS 尺寸值，例如 '50%'、'100px' 、 '10rem' 、 '50vh' 等，甚至包括 'inherit' 、 'auto' 这些自动计算的尺寸值。同时为了方便计算，我们还支持直接使用 number 类型的尺寸值，单位为 像素(px)。

设置最大最小尺寸

有些复杂场景下，我们可能无法预估弹出层的视图尺寸，但是我们可以通过设置 最大最小尺寸 来限制弹出层的视图尺寸，从而避免出现超出屏幕范围的情况。

支持的渲染选项包括：

• maxWidth：最大宽度，默认值为 'none'。
• maxHeight：最大高度，默认值为 'none'。
• minWidth：最小宽度，默认值为 'none'。
• minHeight：最小高度，默认值为 0。

例如这里的 height: 1000，理论上对于窗口足够高的情况下是没有问题的，但是因为无法预估用户窗口的实际尺寸，所以添加 maxHeight: '90%' 来确保不会超出 90% 的窗口高度。

popup.render({
	component: () => import('./HelloPopup.vue'),
	height: 1000,
	maxHeight: '90%',
})

同样的还可以设置最小尺寸，这里不再赘述。通过这些设置，我们能够确保弹出层无论在任何的场景下，都能够正常显示，从而提供 更好的用户体验。