可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。
左右分割
<div class="split">
<SplitPane v-model="split1">
<template #left>
<div class="split-pane">Left Pane</div>
</template>
<template #right>
<div class="split-pane">Right Pane</div>
</template>
</SplitPane>
</div>
data() {
return {
split1: 0.5
}
}
.split {
height: 200px;
border: 1px solid #dcdee2;
}
.split-pane {
padding: 20px;
}
上下分割
<div class="split" mode="vertical">
<SplitPane v-model="split2">
<template #top>
<div class="split-pane">Left Pane</div>
</template>
<template #bottom>
<div class="split-pane">Right Pane</div>
</template>
</SplitPane>
</div>
data() {
return {
split2: 0.5
}
}
.split {
height: 200px;
border: 1px solid #dcdee2;
}
.split-pane {
padding: 20px;
}
嵌套使用
<div class="split">
<SplitPane v-model="split3">
<template #left>
<div class="split-pane no-padding">
<SplitPane v-model="split4" mode="vertical">
<template #top>
<div class="split-pane">Top Pane</div>
</template>
<template #bottom>
<div class="split-pane">Bottom Pane</div>
</template>
</SplitPane>
</div>
</template>
<template #right>
<div class="split-pane">Right Pane</div>
</template>
</SplitPane>
</div>
data() {
return {
split3: 0.5,
split4: 0.5
}
}
.split {
height: 200px;
border: 1px solid #dcdee2;
}
.split-pane {
padding: 20px;
}
.split-pane.no-padding {
height: 200px;
padding: 0;
}
API
SplitPane Props
SplitPane Events
SplitPane Slots