当前位置：首页 > news >正文

Splitpanes （可调整大小的面板分割布局）插件应用

news 来源：原创 2025/5/21 9:35:25

技术概述

Splitpanes 是一个 Vue.js 组件，用于创建可调整大小的面板分割布局。它允许用户通过拖动分隔条来动态调整相邻面板的大小，非常适合需要灵活布局的应用场景。

官网地址：Splitpanes

主要特性

支持水平和垂直分割
响应式设计
触摸屏友好
支持嵌套分割
可自定义分隔条样式
支持 Vue 2 和 Vue 3

应用场景

代码编辑器：如 VS Code 的编辑器/文件树分割布局
数据分析工具：同时查看数据和可视化结果
仪表盘：灵活调整各个监控面板大小
文档对比工具：并排查看两个文档
图像处理软件：同时查看原图和效果图
在线 IDE：调整编辑器、终端和预览窗口的大小

Vue 2 示例代码

安装

npm i splitpanes@legacy

基本使用

<template><splitpanes class="default-theme"><pane min-size="20">左侧面板</pane><pane>中间面板</pane><pane min-size="15">右侧面板</pane></splitpanes>
</template><script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'export default {components: { Splitpanes, Pane }
}
</script><style>
.default-theme {height: 500px;border: 1px solid #ddd;
}
</style>

垂直分割

<template><splitpanes horizontal class="default-theme"><pane min-size="20">顶部面板</pane><pane>中间面板</pane><pane min-size="15">底部面板</pane></splitpanes>
</template>

嵌套分割

<template><splitpanes class="default-theme"><pane min-size="20"><splitpanes horizontal><pane>顶部子面板</pane><pane>底部子面板</pane></splitpanes></pane><pane>右侧主面板</pane></splitpanes>
</template>

Vue 3 示例代码

安装

npm i splitpanes

基本使用

<template><Splitpanes class="default-theme"><Pane min-size="20">左侧面板</Pane><Pane>中间面板</Pane><Pane min-size="15">右侧面板</Pane></Splitpanes>
</template><script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script><style>
.default-theme {height: 500px;border: 1px solid #ddd;
}
</style>

响应式布局

<template><Splitpanes :horizontal="isMobile" class="default-theme"><Pane :min-size="isMobile ? 30 : 20">导航</Pane><Pane>内容</Pane></Splitpanes>
</template><script setup>
import { ref, onMounted } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'const isMobile = ref(false)function checkMobile() {isMobile.value = window.innerWidth < 768
}onMounted(() => {checkMobile()window.addEventListener('resize', checkMobile)
})
</script>

自定义分隔条

<template><Splitpanes class="custom-theme"><Pane>左侧</Pane><Pane>右侧</Pane></Splitpanes>
</template><script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script><style>
.custom-theme {height: 500px;
}.custom-theme .splitpanes__splitter {background-color: #f0f0f0;position: relative;
}.custom-theme .splitpanes__splitter:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #6200ee;opacity: 0;transition: opacity 0.3s;
}.custom-theme .splitpanes__splitter:hover:before {opacity: 0.3;
}
</style>

高级用法

保存和恢复布局

<template><Splitpanes @resized="saveLayout" class="default-theme"><Pane v-for="(pane, index) in panes" :key="index" :size="pane.size">面板 {{ index + 1 }}</Pane></Splitpanes>
</template><script setup>
import { ref, onMounted } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'const panes = ref([{ size: 30 },{ size: 40 },{ size: 30 }
])function saveLayout(sizes) {panes.value = panes.value.map((pane, index) => ({...pane,size: sizes[index].size}))localStorage.setItem('splitpanes-layout', JSON.stringify(panes.value))
}onMounted(() => {const savedLayout = localStorage.getItem('splitpanes-layout')if (savedLayout) {panes.value = JSON.parse(savedLayout)}
})
</script>

动态添加/移除面板

<template><div><button @click="addPane">添加面板</button><button @click="removePane" :disabled="panes.length <= 1">移除面板</button><Splitpanes class="default-theme"><Pane v-for="(pane, index) in panes" :key="index" :size="100 / panes.length">面板 {{ index + 1 }}</Pane></Splitpanes></div>
</template><script setup>
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'const panes = ref([{}, {}])function addPane() {panes.value.push({})
}function removePane() {if (panes.value.length > 1) {panes.value.pop()}
}
</script>