当前位置：首页 > VUE

vue 实现分屏

2026-02-10 09:12:36VUE

Vue 实现分屏的方法

使用 CSS Flexbox 或 Grid 布局

通过 CSS 的 Flexbox 或 Grid 布局可以轻松实现分屏效果。在 Vue 的模板中定义两个或多个容器，并通过 CSS 控制它们的排列方式。

<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>

使用第三方库（如 Split.js）

Split.js 是一个轻量级的分屏库，支持拖拽调整分屏大小。在 Vue 项目中引入 Split.js 可以快速实现分屏功能。

安装 Split.js：

npm install split.js

在 Vue 组件中使用：

<template>
  <div class="split-container">
    <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,
    });
  },
};
</script>

<style>
.split-container {
  display: flex;
  height: 100vh;
}

#left-pane, #right-pane {
  overflow: auto;
}
</style>

动态分屏布局

如果需要动态调整分屏的数量或方向，可以通过 Vue 的动态组件和数据绑定实现。

<template>
  <div class="dynamic-split-screen">
    <div 
      v-for="(pane, index) in panes" 
      :key="index" 
      class="pane" 
      :style="{ width: pane.width }"
    >
      {{ pane.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      panes: [
        { width: '50%', content: '左侧内容' },
        { width: '50%', content: '右侧内容' },
      ],
    };
  },
};
</script>

<style>
.dynamic-split-screen {
  display: flex;
  height: 100vh;
}

.pane {
  overflow: auto;
}
</style>

响应式分屏

通过 Vue 的响应式特性和 CSS 媒体查询，可以实现分屏在不同屏幕尺寸下的自适应布局。

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

<style>
.responsive-split-screen {
  display: flex;
  height: 100vh;
}

.left-pane, .right-pane {
  flex: 1;
}

@media (max-width: 768px) {
  .responsive-split-screen {
    flex-direction: column;
  }
}
</style>