当前位置：首页 > VUE

vue如何实现分屏

2026-01-19 16:21:21VUE

Vue 实现分屏的方法

在 Vue 中实现分屏效果可以通过多种方式，以下是一些常见的方法：

使用 CSS Grid 或 Flexbox 布局

通过 CSS Grid 或 Flexbox 布局可以轻松实现分屏效果。在 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：

npm install split.js

在 Vue 中使用：

<template>
  <div id="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,
      gutterSize: 8,
    })
  }
}
</script>

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

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

使用 Vue 组件

可以创建一个可复用的分屏组件，通过 props 控制分屏的方向和比例。

<template>
  <div class="split-screen" :class="direction">
    <div class="pane" :style="{ flex: ratio[0] }">
      <slot name="left"></slot>
    </div>
    <div class="pane" :style="{ flex: ratio[1] }">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    direction: {
      type: String,
      default: 'horizontal',
      validator: value => ['horizontal', 'vertical'].includes(value)
    },
    ratio: {
      type: Array,
      default: () => [1, 1]
    }
  }
}
</script>

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

.split-screen.horizontal {
  flex-direction: row;
}

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

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

动态调整分屏比例

通过 Vue 的数据绑定和事件处理，可以实现动态调整分屏比例的功能。

<template>
  <div class="split-screen">
    <div class="left-pane" :style="{ width: leftWidth + '%' }">
      <!-- 左侧内容 -->
    </div>
    <div class="gutter" @mousedown="startDrag"></div>
    <div class="right-pane" :style="{ width: (100 - leftWidth) + '%' }">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 50,
      isDragging: false
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      document.addEventListener('mousemove', this.drag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    drag(e) {
      if (this.isDragging) {
        const containerWidth = this.$el.clientWidth
        const newWidth = (e.clientX / containerWidth) * 100
        this.leftWidth = Math.max(10, Math.min(90, newWidth))
      }
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

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

.left-pane, .right-pane {
  overflow: auto;
}

.gutter {
  width: 8px;
  background: #ccc;
  cursor: col-resize;
}
</style>