vue3 监听ifram加载完成

在Vue 3中，你可以使用v-if指令来条件性地渲染iframe，并使用@load事件监听iframe的加载完成。

首先，在Vue模板中，使用v-if指令来根据条件渲染iframe：

<template>
  <div>
    <button @click="loadIframe">Load Iframe</button>
    <iframe v-if="showIframe" :src="iframeSrc" @load="iframeLoaded"></iframe>
  </div>
</template>

然后，在Vue组件中，定义相关的数据和方法：

<script>
export default {
  data() {
    return {
      showIframe: false,
      iframeSrc: ''
    };
  },
  methods: {
    loadIframe() {
      this.showIframe = true;
      this.iframeSrc = 'https://example.com'; // 替换为实际的iframe链接
    },
    iframeLoaded() {
      console.log('Iframe loaded');
      // 在这里可以执行一些加载完成后的操作
    }
  }
};
</script>

上述代码中，loadIframe方法用于设置showIframe为true，从而渲染iframe，并将iframeSrc设置为实际的iframe链接。当iframe加载完成时，iframeLoaded方法会被调用，你可以在此方法中执行一些加载完成后的操作。

这样，当你点击"Load Iframe"按钮时，会渲染并加载iframe，当iframe加载完成时，会在控制台输出"Iframe loaded"