当前位置：首页 > VUE

vue页面实现窗格

2026-02-23 02:11:12VUE

实现窗格的基本结构

在Vue中实现窗格（Panels）通常使用<div>结合CSS布局或第三方组件库。以下是一个基础实现示例：

<template>
  <div class="panel-container">
    <div class="panel" v-for="(panel, index) in panels" :key="index">
      <div class="panel-header" @click="togglePanel(index)">
        {{ panel.title }}
      </div>
      <div class="panel-content" v-show="panel.isOpen">
        {{ panel.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      panels: [
        { title: '窗格1', content: '内容1', isOpen: true },
        { title: '窗格2', content: '内容2', isOpen: false }
      ]
    }
  },
  methods: {
    togglePanel(index) {
      this.panels[index].isOpen = !this.panels[index].isOpen;
    }
  }
}
</script>

<style>
.panel-container {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.panel-header {
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
}
.panel-content {
  padding: 15px;
  border-top: 1px solid #eee;
}
</style>

使用第三方组件库

对于更复杂的窗格需求，推荐使用现成的UI库：

Element UI 的折叠面板：

<el-collapse v-model="activePanel">
<el-collapse-item title="窗格1" name="1">
 内容1
</el-collapse-item>
<el-collapse-item title="窗格2" name="2">
 内容2
</el-collapse-item>
</el-collapse>

Ant Design Vue 的折叠面板：

<a-collapse v-model:activeKey="activeKey">
<a-collapse-panel key="1" header="窗格1">
 内容1
</a-collapse-panel>
</a-collapse>

可拖拽窗格实现

实现可调整大小的窗格需要结合拖拽事件：

<template>
  <div class="resizable-panel">
    <div class="panel-left" :style="{ width: leftWidth + 'px' }">
      左侧内容
    </div>
    <div class="divider" @mousedown="startDrag"></div>
    <div class="panel-right">
      右侧内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      isDragging: false
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(e) {
      if (this.isDragging) {
        this.leftWidth = e.clientX;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
    }
  }
}
</script>

<style>
.resizable-panel {
  display: flex;
  height: 100vh;
}
.panel-left {
  background: #f0f0f0;
}
.divider {
  width: 5px;
  background: #ccc;
  cursor: col-resize;
}
.panel-right {
  flex: 1;
  background: #fff;
}
</style>

嵌套窗格布局

实现类似IDE的多层级窗格系统：

<template>
  <div class="nested-panels">
    <div class="horizontal-panel">
      <div class="vertical-panel">
        <div class="panel">面板A</div>
        <div class="panel">面板B</div>
      </div>
      <div class="panel main-panel">主面板</div>
    </div>
</template>

<style>
.nested-panels {
  height: 100vh;
  display: flex;
}
.horizontal-panel {
  display: flex;
  flex: 1;
}
.vertical-panel {
  display: flex;
  flex-direction: column;
  width: 250px;
}
.panel {
  border: 1px solid #ddd;
  margin: 4px;
  padding: 8px;
}
.main-panel {
  flex: 1;
}
</style>

动态窗格管理

通过动态组件实现可配置的窗格系统：

<template>
  <div>
    <button @click="addPanel">添加窗格</button>
    <div class="dynamic-panels">
      <component 
        v-for="(panel, index) in panelList"
        :key="panel.id"
        :is="panel.component"
        @close="removePanel(index)"
      />
    </div>
  </div>
</template>

<script>
import PanelA from './PanelA.vue';
import PanelB from './PanelB.vue';

export default {
  components: { PanelA, PanelB },
  data() {
    return {
      panelList: [],
      panelTypes: ['PanelA', 'PanelB'],
      nextId: 0
    }
  },
  methods: {
    addPanel() {
      const type = this.panelTypes[Math.floor(Math.random() * 2)];
      this.panelList.push({
        id: this.nextId++,
        component: type
      });
    },
    removePanel(index) {
      this.panelList.splice(index, 1);
    }
  }
}
</script>

vue页面实现窗格