当前位置：首页 > VUE

vue页面实现窗格

2026-01-22 11:10:36VUE

vue页面实现窗格的方法

使用vue-grid-layout库

vue-grid-layout是一个基于Vue.js的响应式网格布局系统，支持拖拽和调整大小。安装后可以通过简单的配置实现窗格功能。

安装命令：

npm install vue-grid-layout --save

基本使用示例：

<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      {{item.i}}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        {x: 0, y: 0, w: 2, h: 2, i: '0'},
        {x: 2, y: 0, w: 2, h: 4, i: '1'}
      ]
    }
  }
}
</script>

使用CSS Grid布局

Vue可以结合CSS Grid实现简单的窗格布局，不需要额外依赖。

示例代码：

<template>
  <div class="grid-container">
    <div class="grid-item" v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['窗格1', '窗格2', '窗格3', '窗格4']
    }
  }
}
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  background: #eee;
  padding: 20px;
  border-radius: 4px;
}
</style>

使用Splitpanes组件

Splitpanes是一个轻量级的Vue窗格分割组件，适合需要可调整大小的窗格场景。

安装命令：

npm install splitpanes

使用示例：

<template>
  <splitpanes>
    <pane min-size="20">左侧窗格</pane>
    <pane>中间窗格</pane>
    <pane min-size="20">右侧窗格</pane>
  </splitpanes>
</template>

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

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

自定义可拖动窗格实现

通过监听鼠标事件和计算位置，可以实现自定义的窗格拖动功能。

基本实现思路：

<template>
  <div class="container">
    <div 
      class="pane" 
      v-for="(pane, index) in panes" 
      :key="index"
      :style="{ width: pane.width + 'px' }"
    >
      <div class="handle" @mousedown="startDrag(index, $event)"></div>
      {{ pane.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      panes: [
        { width: 200, content: '窗格1' },
        { width: 200, content: '窗格2' }
      ],
      dragging: false,
      currentIndex: null,
      startX: 0,
      startWidth: 0
    }
  },
  methods: {
    startDrag(index, e) {
      this.dragging = true
      this.currentIndex = index
      this.startX = e.clientX
      this.startWidth = this.panes[index].width
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    onDrag(e) {
      if (this.dragging) {
        const diff = e.clientX - this.startX
        this.panes[this.currentIndex].width = this.startWidth + diff
      }
    },
    stopDrag() {
      this.dragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

<style>
.container {
  display: flex;
}
.pane {
  position: relative;
  border: 1px solid #ccc;
}
.handle {
  width: 5px;
  height: 100%;
  background: #eee;
  position: absolute;
  right: 0;
  cursor: col-resize;
}
</style>

使用第三方UI框架

Element UI、Ant Design Vue等主流UI框架都提供布局组件，可以快速实现窗格效果。

以Element UI为例：

<template>
  <el-container>
    <el-aside width="200px">左侧窗格</el-aside>
    <el-container>
      <el-header>顶部窗格</el-header>
      <el-main>主内容窗格</el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ElContainer, ElAside, ElHeader, ElMain } from 'element-plus'

export default {
  components: {
    ElContainer,
    ElAside,
    ElHeader,
    ElMain
  }
}
</script>

vue页面实现窗格