当前位置：首页 > VUE

vue 实现分屏

2026-01-07 22:49:03VUE

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 可以快速实现分屏功能。

npm install split.js

<template>
  <div ref="splitContainer" class="split-container">
    <div class="left-pane">
      <!-- 左侧内容 -->
    </div>
    <div class="right-pane">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

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

export default {
  mounted() {
    Split([this.$refs.splitContainer], {
      sizes: [50, 50],
      minSize: 100,
      gutterSize: 8,
    });
  },
};
</script>

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

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

动态调整分屏比例

通过 Vue 的数据绑定和计算属性，可以动态调整分屏比例。结合 CSS 变量或内联样式，实现灵活的分屏控制。

<template>
  <div class="split-screen">
    <div class="left-pane" :style="{ width: leftWidth + '%' }">
      <!-- 左侧内容 -->
    </div>
    <div class="right-pane" :style="{ width: rightWidth + '%' }">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

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

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

.left-pane, .right-pane {
  height: 100%;
}
</style>

使用 Vue 组件实现嵌套分屏

通过嵌套 Vue 组件，可以实现更复杂的分屏布局。例如，在左右分屏的基础上，进一步上下分屏。

<template>
  <div class="split-screen">
    <div class="left-pane">
      <split-screen-vertical />
    </div>
    <div class="right-pane">
      <split-screen-vertical />
    </div>
  </div>
</template>

<script>
import SplitScreenVertical from './SplitScreenVertical.vue';

export default {
  components: {
    SplitScreenVertical,
  },
};
</script>

响应式分屏设计

通过媒体查询或 Vue 的计算属性，可以根据屏幕尺寸调整分屏布局。例如，在小屏幕设备上切换为垂直分屏。

<template>
  <div class="split-screen" :class="{ 'vertical': isVertical }">
    <div class="left-pane">
      <!-- 左侧内容 -->
    </div>
    <div class="right-pane">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    isVertical() {
      return window.innerWidth < 768;
    },
  },
};
</script>

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

.split-screen.vertical {
  flex-direction: column;
}

.left-pane, .right-pane {
  flex: 1;
}
</style>

以上方法可以根据实际需求选择或组合使用，实现灵活的分屏效果。

vue 实现分屏