当前位置：首页 > VUE

vue页面实现分屏

2026-01-19 00:19:51VUE

Vue 页面实现分屏的方法

使用 CSS Flexbox 布局

通过 Flexbox 可以轻松实现分屏效果。创建一个父容器，设置 display: flex，子元素根据需要设置宽度或比例。

<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 {
  flex: 1;
  background: #f0f0f0;
}
.right-pane {
  flex: 1;
  background: #e0e0e0;
}
</style>

使用 CSS Grid 布局

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 {
  background: #f0f0f0;
}
.right-pane {
  background: #e0e0e0;
}
</style>

动态调整分屏比例

结合 Vue 的响应式特性，可以实现动态调整分屏比例。

<template>
  <div class="split-screen">
    <div class="left-pane" :style="{ flex: leftRatio }">左侧内容</div>
    <div class="right-pane" :style="{ flex: rightRatio }">右侧内容</div>
  </div>
  <button @click="adjustRatio">调整比例</button>
</template>

<script>
export default {
  data() {
    return {
      leftRatio: 1,
      rightRatio: 1
    };
  },
  methods: {
    adjustRatio() {
      this.leftRatio = 2;
      this.rightRatio = 1;
    }
  }
};
</script>

<style>
.split-screen {
  display: flex;
  height: 100vh;
}
.left-pane, .right-pane {
  transition: flex 0.3s ease;
}
</style>

使用第三方库

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

安装 split.js：

npm install split.js

在 Vue 中使用：

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

<script>
import Split from 'split.js';

export default {
  mounted() {
    Split(['#left-pane', '#right-pane'], {
      sizes: [50, 50],
      minSize: 100,
      gutterSize: 8,
    });
  }
};
</script>

<style>
.split-screen {
  display: flex;
  height: 100vh;
}
#left-pane, #right-pane {
  overflow: auto;
}
.gutter {
  background-color: #ddd;
}
</style>

垂直分屏

将布局方向改为垂直分屏，只需调整 Flexbox 或 Grid 的方向。

<template>
  <div class="split-screen">
    <div class="top-pane">顶部内容</div>
    <div class="bottom-pane">底部内容</div>
  </div>
</template>

<style>
.split-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top-pane {
  flex: 1;
  background: #f0f0f0;
}
.bottom-pane {
  flex: 1;
  background: #e0e0e0;
}
</style>

vue页面实现分屏