vue3 iframe

<template>
  <div>
    <!-- 使用 iframe 标签嵌入外部网页 -->
    <iframe 
      :src="iframeSrc" 
      width="100%" 
      height="600px" 
      title="Embedded Page"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'IframeComponent',
  data() {
    return {
      // 设置 iframe 的 src 属性，可以是动态的 URL
      iframeSrc: 'https://www.example.com'
    };
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
iframe {
  border-radius: 8px;
}
</style>

解释说明：

• <iframe> 标签：用于在当前页面中嵌入另一个 HTML 页面。通过 :src 动态绑定 Vue 数据属性 iframeSrc，可以根据需要动态更改嵌入的页面。
• width 和 height：设置 iframe 的宽度和高度，这里使用了固定值，也可以根据需求调整为响应式布局。
• title 属性：提供 iframe 的描述性文本，有助于提高可访问性。
• frameborder 属性：设置为 0 以移除 iframe 边框，默认情况下 iframe 会有边框。
• data() 函数：在 Vue 组件中定义了一个 iframeSrc 数据属性，用于存储 iframe 的源 URL。