窗口拆分可拖动布局组件splitpanes

2024年05月22日 编程 暂无评论 阅读16 次
[收起]文章目录

介绍

官网和文档
https://github.com/antoniandre/splitpanes
https://antoniandre.github.io/splitpanes/

这个组件能实现上面效果,窗口任意拆分,拆分完还可以拖动来改变每个布局的大小。
还是响应式的
类似android中的weight布局方式,甚至更好用一些

安装

npm i splitpanes

import { Splitpanes, Pane } from 'splitpanes'  
import 'splitpanes/dist/splitpanes.css'  

使用

安装好之后就可以直接import使用了

<template>  
  <splitpanes class="default-theme full-height">  
    <pane size="1">  
      <span>1</span>  
    </pane>    <pane size="1">  
      <span>2</span>  
    </pane>    <pane size="1">  
      <span>3</span>  
    </pane>  </splitpanes></template>  
  
<script setup>  
import { Splitpanes, Pane } from 'splitpanes'  
import 'splitpanes/dist/splitpanes.css'  
  
  
</script>  
  
<style scoped>  
.full-height {  
  height: 100vh; /* 设置高度为100%视口高度 */}  
</style>

这是一个将窗口平均分成三列的例子,刚好是我需要的布局

标签:

给我留言

切换注册

登录

忘记密码 ?

切换登录

注册