可拉伸的面板 splitPane

最新推荐文章于 2024-08-09 07:57:01 发布

GITAA

最新推荐文章于 2024-08-09 07:57:01 发布

阅读量1.3k

点赞数

分类专栏： SplitPane 使用小结文章标签： vue-cli3 vue

本文链接：https://blog.csdn.net/GITAA/article/details/121018869

版权

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

1 篇文章 0 订阅

订阅专栏

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/