可拉伸的面板 splitPane_splitpanes

vue3 中使用SplitPane

// 安装 vue2 的话去掉@next
npm i splitpanes@next
1
2

// horizontal 控制 纵向还是横向
// resize resized 一个是进入页面触发，一个是拉伸的时候触发
 <Splitpanes 
      horizontal
      style="height: calc(100vh - 122px);width: calc(100% - 18px);"
      @resize=""
      @resized=""
    >
    // 需要多个可以嵌套
    <Pane class="pane-left">
    </Pane>
    <Pane class="pane-right">
    </Pane>
</Splitpanes>
<scrupt lang="ts">
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { defineComponent } from 'vue'
export default defineComponent({
	components:{
		Splitpanes,Pane 
	}
})
</script>
// 详细参考 https://antoniandre.github.io/splitpanes/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25