<script lang="ts" setup>

import { ElDialog } from 'element-plus';

const props = withDefaults(defineProps<{
  url:string,   
  closeFunc:()=>void,  //父级只需销毁组件
}>(),{})

onMounted(()=>{})

</script>

<template>
  <el-dialog  :model-value="true" :style="{height: '90%',width:'90%'}" v-on:close="closeFunc()">
    <template #default>
        <iframe id="preivew" width="100%" height="100%" :src="props.url"></iframe>
    </template>
   
  </el-dialog>
</template>
<style>
    /* dialog的body内容样式设置*/
    .el-dialog__body{
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .el-dialog{
      /* 让整个弹出窗口位置更高一些*/
      --el-dialog-margin-top:7vh; 
    }
    
</style>