九宫格--自定义比例划分页面视口

初衷

当时实现这个功能很头疼，根本没有思路，也查不到对应相关的文章，当时也很希望有这样的文章能够帮助到，写这篇文章一方面记录一下难点，一方面希望能够帮助到大家！

九宫窗格

实现如下图所示功能：
鼠标在窗格上移动，选择（2×2，2×3，3×3...等）比例后点击最后选中的窗格，目标视口或容器划分为对应比例的窗口

示例框架

Vue3+ts+tailwindcss

公共的窗格组件

*可根据自己需要更改窗格比例，使用时只需要引入组件

<LayoutSelector  :onSelection="selectHandler"
      />

const selectHandler = ({ numRows, numCols }) => {
  //拿到比例
  console.log('row--',numRows,'col--',numCols)
}

拿到比例值后，划分对应比例的窗口或视口

划分视口使用过一个插件:
splitpanes 兼容性很好，还可以实现单个窗口的拖拽
splitpanes - npm (npmjs.com)

//这里只是一个简单的例子，因为我项目的内容比较复杂，所以是罗列了几种比例的可能，根据style去划分单个窗口的大小
 <Splitpanes v-if="rate.cols == 1 && rate.rows == 1">
      <Pane
        v-for="(item, index) in render"
        :key="item.id"
        :style="{ width: '100%', height: '100%' }"
      >
        <div>窗口内容{{item}}</div>
      </Pane>
 </Splitpanes>
  <Splitpanes v-if="rate.cols == 2 && rate.rows == 1">
      <Pane
        v-for="(item, index) in render"
        :key="item.id"
        :style="{ width: '50%', height: '100%' }"
      >
        <div>窗口内容{{item}}</div>
      </Pane>
 </Splitpanes>
 <Splitpanes v-if="rate.cols == 3 && rate.rows == 2" class="flex-wrap">
      <Pane
        v-for="(item, index) in render"
        :key="item.id"
        :style="{ width: '33.3%', height: '50%' }"
        >
        <div>窗口内容{{item}}</div>
      </Pane>
 </Splitpanes>
 ...
 ...
 ...

大概内容就是这些，欢迎补充...