vue iframe 分屏

你可以使用 `<iframe>` 标签来实现 Vue 的分屏效果。首先，你需要在 Vue 组件中添加一个 `<iframe>` 元素，并设置它的 `src` 属性为要加载的网页链接。然后，你可以使用 CSS 来控制 `<iframe>` 的样式和大小，以实现分屏的效果。

下面是一个简单的示例代码：

<template>
  <div class="split-screen">
    <iframe class="left-panel" :src="leftPage"></iframe>
    <iframe class="right-panel" :src="rightPage"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftPage: "https://www.example.com/page1",
      rightPage: "https://www.example.com/page2"
    };
  }
};
</script>

<style>
.split-screen {
  display: flex;
}

.left-panel,
.right-panel {
  flex: 1;
  height: 100vh;
}

.left-panel {
  border-right: 1px solid #ccc;
}
</style>

在上面的示例中，我们使用了一个 `split-screen` 的 CSS 类来创建一个分屏的效果。两个 `<iframe>` 元素分别位于左侧和右侧，通过设置 `flex: 1` 来让它们平分父容器的宽度。通过设置左侧面板的 `border-right` 样式，我们创建了一个分割线。

你可以根据自己的需求修改代码中的 `leftPage` 和 `rightPage` 数据属性来加载不同的网页链接。希望这个示例能帮助到你实现 Vue 的分屏效果。