Vue项目使用splitpanes插件（垂直水平分割窗口）

需求：实现可调节的窗口面板。

先安装splitpanes插件

npm i splitpanes //For Vue 2.x.
 
​​​​​​​npm i splitpanes@next //For Vue 3.

// In your Vue component.
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
 
export default {
  components: { Splitpanes, Pane },
  ...
}

min-size="0" max-size="35"设置左边窗口可调节的最大百分比和最小百分比

html:

<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 400px">
  <pane :size="paneSize" min-size="0" max-size="35">
    <span>{
  { paneSize }}%</span>
  </pane>
  <pane :size="100 - paneSize">
    <span>{
  { 100 - paneSize }}%</span>
  </p