目录

基本用法

纵向排列

遍历渲染

动态拆分宽度

---

项目开发中用到了拆分窗格(就是下面的效果，可以拆分网页，我们项目通常都是用左右两块拆分，可以通过拖动图标进行左右拖动)，于是就发现了一个很好用的插件：Splitpanes

官网地址：Splitpanes (antoniandre.github.io)

适用于Vue2，Vue3。安装对应的版本即可

npm i splitpanes      # Vue3

npm i splitpanes@legacy     # Vue2

基本用法

• size指定初始化宽度(页面一进来显示的宽度)，总和不要超过100%，值是百分比。可以不指定，默认会平分总宽度
• minsize指定最小宽度，取值也是百分比
• 记得一定加default-theme的类名，不然拖动图标会很小
• 要给一个初始高度

<template><div style="width: 100%;height: 100%;"><splitpanes class="default-theme" style="height: 100%"><pane min-size="20" size="30">左</pane><pane min-size="20" size="70">右</pane></splitpanes></div>
</template><script setup lang='ts'>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script><style scoped>
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
</style>

如果感觉组件引入比较麻烦，可以直接进行全局注册。就不用逐个引入了

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
// 可以把组件进行全局注册并引入样式
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'const app = createApp(App)app.component('Splitpanes', Splitpanes)
app.component('Pane', Pane)app.use(createPinia())
app.use(router)app.mount('#app')

纵向排列

• 只需要传入horizontal属性即可

<template><div style="width: 100%;height: 100%;"><splitpanes horizontal class="default-theme" style="height: 100%"><pane min-size="20" size="30">左</pane><pane min-size="20" size="70">右</pane></splitpanes></div>
</template><style scoped>
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
</style>

遍历渲染

• 直接v-for遍历循环即可

<template><div style="width: 100%;height: 100%;"><splitpanes class="default-theme" style="height: 100%"><pane v-for="i in 8" :key="i" min-size="5"><span>{{ i }}</span></pane></splitpanes></div>
</template><style scoped>
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
</style>

动态拆分宽度

<template><div style="width: 100%;height: 100%;"><button @click="panesNumber++">Add pane</button><button @click="panesNumber--">Remove pane</button><splitpanes class="default-theme" style="height: 400px"><pane v-for="i in panesNumber" :key="i"><span>{{ i }}</span></pane></splitpanes></div>
</template><script lang="ts" setup>
import { ref } from 'vue';const panesNumber = ref(3);
</script><style scoped>
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
</style>

更多效果可以查看文档，只列举了一些常用的