vue iframe 分屏

你可以使用 Vue 和 iframe 元素来实现分屏效果。下面是一个简单的示例：

首先，你需要在 Vue 组件中定义两个 iframe 元素，分别用于左右两个屏幕：

<template>
  <div>
    <iframe ref="leftIframe" src="left.html"></iframe>
    <iframe ref="rightIframe" src="right.html"></iframe>
  </div>
</template>

然后，在组件的 mounted 钩子函数中，你可以获取到 iframe 元素的引用，并设置它们的样式，使它们占据适当的屏幕空间：

<script>
export default {
  mounted() {
    const leftIframe = this.$refs.leftIframe;
    const rightIframe = this.$refs.rightIframe;

    leftIframe.style.width = "50%";
    leftIframe.style.height = "100%";
    leftIframe.style.float = "left";

    rightIframe.style.width = "50%";
    rightIframe.style.height = "100%";
    rightIframe.style.float = "right";
  },
};
</script>

在这个示例中，我们将左边的 iframe 的宽度设置为 50%，右边的 iframe 的宽度也设置为 50%。它们都占据了整个父容器的高度，并通过 float 属性使它们水平排列。

你可以将 "left.html" 和 "right.html" 替换为你实际想要显示的页面的 URL。这样，左右两个屏幕就可以同时显示两个不同的页面了。

希望这个示例对你有所帮助！