vue3+ts iframe标签的ref 我应该定义什么类型并且可以使用 contentWindow

在 Vue 3 + TypeScript 中，你可以定义一个 `Ref<HTMLIFrameElement | null>` 类型的 `ref`，来引用一个 `iframe` 标签。这个 `Ref` 类型同时支持 `null` 和 `HTMLIFrameElement` 类型，即可以在 `mounted` 阶段初始化为 `null`，然后在 `onload` 事件中更新为 `HTMLIFrameElement`。

例如：

<template>
  <iframe ref="myIframe" src="https://www.example.com"></iframe>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const myIframe = ref<HTMLIFrameElement | null>(null);

    const handleIframeLoad = () => {
      if (myIframe.value) {
        const contentWindow = myIframe.value.contentWindow;
        // 在这里可以使用 contentWindow 对象
      }
    };

    return {
      myIframe,
      handleIframeLoad,
    };
  },
  mounted() {
    // 在这里添加 onload 事件监听器
    if (this.myIframe) {
      this.myIframe.addEventListener('load', this.handleIframeLoad);
    }
  },
  beforeUnmount() {
    // 在这里移除 onload 事件监听器
    if (this.myIframe) {
      this.myIframe.removeEventListener('load', this.handleIframeLoad);
    }
  },
});
</script>

在 `handleIframeLoad` 回调函数中，你可以使用 `myIframe.value.contentWindow` 访问 `iframe` 的 `contentWindow` 对象。同时，在 `mounted` 和 `beforeUnmount` 生命周期中，你可以添加和移除 `load` 事件监听器来处理 `iframe` 的加载事件。