vue 实现分屏

Vue 实现分屏的方法

使用 CSS Grid 布局

通过 CSS Grid 可以轻松实现分屏效果。定义一个包含多个区域的网格容器，每个区域对应一个分屏部分。

<template>
  <div class="split-screen">
    <div class="left-pane">左屏内容</div>
    <div class="right-pane">右屏内容</div>
  </div>
</template>

<style>
.split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}
.left-pane, .right-pane {
  padding: 20px;
}
</style>

使用 Flexbox 布局

Flexbox 是另一种实现分屏的灵活方式，适合需要动态调整大小的场景。

<template>
  <div class="split-screen">
    <div class="left-pane">左屏内容</div>
    <div class="right-pane">右屏内容</div>
  </div>
</template>

<style>
.split-screen {
  display: flex;
  height: 100vh;
}
.left-pane, .right-pane {
  flex: 1;
  padding: 20px;
}
</style>

使用第三方库

如果需要更复杂的分屏功能（如拖拽调整大小），可以使用第三方库如 split.js 或 vue-split-panel。

安装 vue-split-panel：

npm install vue-split-panel

示例代码：

<template>
  <split-panel>
    <split-panel-item>左屏内容</split-panel-item>
    <split-panel-item>右屏内容</split-panel-item>
  </split-panel>
</template>

<script>
import { SplitPanel, SplitPanelItem } from 'vue-split-panel';
export default {
  components: { SplitPanel, SplitPanelItem }
};
</script>

动态分屏

通过 Vue 的数据绑定和计算属性，可以实现动态分屏效果。

<template>
  <div class="split-screen">
    <div 
      class="pane" 
      :style="{ width: leftWidth + '%' }"
    >左屏内容</div>
    <div 
      class="pane" 
      :style="{ width: (100 - leftWidth) + '%' }"
    >右屏内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 50
    };
  }
};
</script>

<style>
.split-screen {
  display: flex;
  height: 100vh;
}
.pane {
  padding: 20px;
}
</style>

响应式分屏

结合媒体查询，可以在不同屏幕尺寸下调整分屏布局。

<template>
  <div class="split-screen">
    <div class="left-pane">左屏内容</div>
    <div class="right-pane">右屏内容</div>
  </div>
</template>

<style>
.split-screen {
  display: flex;
  height: 100vh;
}
.left-pane, .right-pane {
  flex: 1;
  padding: 20px;
}
@media (max-width: 768px) {
  .split-screen {
    flex-direction: column;
  }
}
</style>