可拉伸的面板 splitPane

最新推荐文章于 2025-11-12 15:29:04 发布

原创最新推荐文章于 2025-11-12 15:29:04 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli3 #vue

SplitPane 使用小结专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue3项目中集成和使用SplitPane组件。通过npm安装splitpanes库，并设置horizontal属性来控制分隔条的方向。SplitPane支持多个嵌套，提供了@resize和@resized事件来监听窗口大小变化和拖动时的事件。示例代码展示了SplitPane的基本用法，并引用了相应的typescript定义文件。详细信息可参考官方文档。

vue3 中使用SplitPane

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

// 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/