iframe添加loading效果

问题：当一个页面嵌入iframe时，iframe加载会有延迟。即在iframe元素展现前，嵌入iframe的父页面会有一段白屏情况，用户感知不到iframe页面在加载，体验效果不是很好。

解决方法：为了提升用户体验，让用户感知到当前页面在加载iframe，在iframe加载完成前添加loading效果，替代原有的白屏情况，样式大致如下图，可以参考element ui中的loading效果，Loading组件。

具体代码实现：采用的技术栈是vue3+composition api，iframe中@load事件，在iframe页面加载完成后触发，即如下的handleIframeLoad函数。

 <div class="iframe-wrap">
    <loading v-if="isLoading"></loading>
    <iframe
        ref="iframeRef"
        class="iframe-wrap__iframe"
        allow="clipboard-read; clipboard-write"
        :src="iframeSrc"
        @load="handleIframeLoad"
    ></iframe>
</div>

通过isLoading变量变化来控制Loading图标是否展示。初始化定义isLoading变量为true，当iframe加载完成时，将isLoading变量置为false，在页面关闭函数中将isLoading变量再置为true。具体如下：

const isLoading = ref(true);
function handleIframeLoad() {
    isLoading.value = false;
}
function close() {
    isLoading.value = true;
}