vue3+ts iframe标签的ref 我应该定义什么类型并且可以使用 contentWindow里的自定挂在属性不报错
时间: 2024-03-09 14:44:57 浏览: 307
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
5星 · 资源好评率100%
在 Vue 3 + TypeScript 中,你可以使用 `Ref<HTMLIFrameElement | null>` 类型的 `ref` 引用一个 `iframe` 元素,并在 `mounted` 阶段设置一个 `onload` 事件监听器,等待 `iframe` 加载完成后,再访问 `contentWindow` 对象中的自定义挂载属性。
你可以将 `contentWindow` 强制转换为一个 `Window` 类型,并在其上使用 `declare module` 语法,声明该类型中包含的自定义挂载属性。
例如:
```typescript
<template>
<iframe ref="myIframe" src="https://www.example.com"></iframe>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
declare module 'window' {
interface Window {
myCustomProperty: string;
}
}
export default defineComponent({
setup() {
const myIframe = ref<HTMLIFrameElement | null>(null);
const handleIframeLoad = () => {
if (myIframe.value) {
const contentWindow = myIframe.value.contentWindow as Window;
console.log(contentWindow.myCustomProperty); // 不会报错,因为已经声明了该属性
}
};
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>
```
在这个例子中,我们使用 `declare module` 语法声明 `Window` 接口,并在其中添加一个自定义属性 `myCustomProperty`。然后,在 `handleIframeLoad` 回调函数中,我们将 `contentWindow` 强制转换为 `Window` 类型,并访问其中的自定义属性 `myCustomProperty`,不会报错。
阅读全文