<template>
	<div>
		<el-button @click="openIframe()">iframe</el-button>
		<el-dialog title="dfs" class="iframeDialog" v-model="iframe_show">
			<iframe id="bdIframe" class="iframe" src="http://localhost:5174/#/login" width="100%" height="100%"
				scrolling="auto"></iframe>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue'
	let iframe_show = ref(false);
	const openIframe = () => {
		iframe_show.value = true
		nextTick(() => {
			const oIframe = document.getElementById('bdIframe');
			const deviceWidth = document.documentElement.clientWidth;
			const deviceHeight = document.documentElement.clientHeight;
			oIframe.style.width = (Number(deviceWidth) - 50) + 'px'; //数字是页面布局宽度差值
			oIframe.style.height = (Number(deviceHeight) - 320) + 'px'; //数字是页面布局高度差
		})

	}
</script>

<style>
	.iframe {
		border: 0px;
	}

	.iframeDialog {
		margin-top: 40px;
		height: 90%;
		/* 设置iframe高度 */
		width: 90%;
		/* 设置iframe宽度 */
		overflow: auto;
	}
</style>