介绍

官网和文档
https://github.com/antoniandre/splitpanes
https://antoniandre.github.io/splitpanes/

这个组件能实现上面效果，窗口任意拆分，拆分完还可以拖动来改变每个布局的大小。
还是响应式的
类似android中的weight布局方式，甚至更好用一些

安装

npm i splitpanes

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

使用

安装好之后就可以直接import使用了

<template>  
  <splitpanes class="default-theme full-height">  
    <pane size="1">  
      <span>1</span>  
    </pane>    <pane size="1">  
      <span>2</span>  
    </pane>    <pane size="1">  
      <span>3</span>  
    </pane>  </splitpanes></template>  
  
<script setup>  
import { Splitpanes, Pane } from 'splitpanes'  
import 'splitpanes/dist/splitpanes.css'  
  
  
</script>  
  
<style scoped>  
.full-height {  
  height: 100vh; /* 设置高度为100%视口高度 */}  
</style>

这是一个将窗口平均分成三列的例子，刚好是我需要的布局