Splitpanes拆分窗格插件使用

目录

基本用法

纵向排列

遍历渲染

动态拆分宽度

---

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

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