vue3在项目中嵌入别的项目—Iframe

2,913 阅读1分钟

使用的框架和组件: vue3 ant组件

// 引用嵌入组件
 <Iframe :src="state.src"></Iframe>
// 嵌入项目 组件 
<template>     
     <a-spin :tip="tip" :spinning="state.spinning" wrapperClassName="iframe_warp">         
          <iframe :src="src" frameborder="0" class="my_iframe" id="_iframe"></iframe>     
     </a-spin> 
</template>  
<script setup>    
import { reactive, onMounted, nextTick } from "vue"      
const props = defineProps({ 
     src:String,
     tip:{ 
         type:String,
         default: ""
     }     
})      
const state = reactive({
         spinning:true
})
function init(){
     const iframe = document.getElementById('_iframe');
     if (!iframe) return false; 
     iframe.onload = () => { 
        state.spinning = false; 
      };
}       
onMounted(()=>
   nextTick(()=>init())
) 
</script>  

<style lang="less">     
.iframe_warp{         
   width: 100%;
   height: 100%;
   .ant-spin-container,.my_iframe{
      width: 100%;
      height: 100%;
   }     
} 
</style>