当前位置：首页 > VUE

vue实现分屏

2026-03-06 22:15:58VUE

使用 CSS Grid 布局实现分屏

Vue 中可以通过 CSS Grid 布局快速实现分屏效果。在模板中定义多个区域，通过 grid-template-columns 或 grid-template-rows 控制分屏比例。

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

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

动态调整分屏比例

通过 Vue 的响应式特性，可以实现动态调整分屏比例。使用 v-model 绑定分割线位置，结合计算属性动态计算样式。

<template>
  <div class="dynamic-split" :style="gridStyle">
    <div class="panel">面板一</div>
    <div class="divider" @mousedown="startDrag"></div>
    <div class="panel">面板二</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      splitPosition: 50,
      isDragging: false
    }
  },
  computed: {
    gridStyle() {
      return {
        'grid-template-columns': `${this.splitPosition}% 5px ${100 - this.splitPosition}%`
      }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      document.addEventListener('mousemove', this.handleDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    handleDrag(e) {
      if (this.isDragging) {
        const container = this.$el.getBoundingClientRect()
        this.splitPosition = ((e.clientX - container.left) / container.width) * 100
      }
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.handleDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

使用第三方库 vue-splitpanes

对于更复杂的分屏需求，可以使用专门的分屏组件库如 vue-splitpanes。该库提供了丰富的 API 和交互功能。

vue实现分屏

安装依赖：

npm install vue-splitpanes

基础用法示例：

vue实现分屏

<template>
  <splitpanes>
    <pane min-size="20">面板一</pane>
    <pane>面板二</pane>
    <pane max-size="60">面板三</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'vue-splitpanes'
import 'vue-splitpanes/dist/vue-splitpanes.css'

export default {
  components: { Splitpanes, Pane }
}
</script>

垂直与水平分屏结合

通过嵌套分屏容器可以实现复杂的布局组合。以下示例展示垂直分屏内嵌套水平分屏。

<template>
  <splitpanes horizontal>
    <pane>
      <splitpanes>
        <pane>左上区域</pane>
        <pane>右上区域</pane>
      </splitpanes>
    </pane>
    <pane>
      <splitpanes>
        <pane>左下区域</pane>
        <pane>右下区域</pane>
      </splitpanes>
    </pane>
  </splitpanes>
</template>

响应式分屏布局

结合媒体查询实现响应式分屏，在不同屏幕尺寸下自动调整布局方式。

.split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .split-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

标签: vue