大屏中缩放做了屏幕自适应,为解决地图使用缩放后点位偏移使用ifarem , 使用iframe 通信又成问题,改一个来一个,没玩没了
<template>
<div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" width='100%' height='100%' ref="myIframe" @load="onLoadIframe" src="/#/maps"></iframe>
</div>
</template>
<script setup>
import { ref , nextTick} from 'vue'
const myIframe = ref()
//1父组件 向iframe 里面传值
function onLoadIframe(){
nextTick(()=>{
myIframe.value.contentWindow.postMessage({name:‘测试’}, '*')
})
}
//2 父接收子的数据
window.addEventListener('message', function (message) {
if (message?.data&& message?.data?.name) {
//TODO:
}
})
<script setup>
//1子组件 接收参数
window.addEventListener('message', function (message) {
console.log(message)
if(message?.data && message?.data?.name){
//TODO:
}
}
//2 子传父
window.parent.postMessage({name:'测试'})