1.0.6 • Published 2 months ago
vue3 分屏滑动组件
使用
全局引入
import divider form 'v-divider'
app.use(divider)
按需引入
// js
import { VDivider } from 'v-divider'
// template
<v-divider></v-divider>
组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|
| vertical | boolean | false | 是否垂直方向, true:垂直 |
| transfer | boolean | false | 是否拖动传递, true:传递, 即拖动的分屏的宽度已经达到最小宽度, 是否传递压缩下一个分屏 |
| splitSize | number | 10 | 拖动器宽度 |
| splitColor | string | #eee | 拖动器背景色 |
| splitIconColor | string | #475669 | 拖动器图标色 |
| panes | array | [] | 分屏配置Pane |
分屏配置Pane
| 属性 | 类型 | 默认值 | 说明 |
|---|
| size | number | 100 | 单位px, 每个分屏的初始宽度 |
| min | number | 0 | 单位px, 每个分屏的最小宽度 |
Slot说明
每个分屏都会给出一个slot, slot的名字为 divider_
| 属性 | 类型 | 说明 |
|---|
| pane | Pane | 分屏配置Pane |
| index | number | slot所属index |
| size | number | 单位px, 当前宽度 |
使用Sample
<template>
<div class="main">
<divider vertical transfer :panes="[{ size: 30, min: 30 }, { size: 500 }, { min: 30 }]" :split-size="10">
<template #divider_0="{ pane, size, index }"><div class="pane p1">pane1</div></template>
<template #divider_1="{ pane, size, index }">
<divider transfer :panes="[{ size: 200, min: 100 }, {}]" :split-size="10" class="pane_container">
<template #divider_0="{ pane, size, index }"><div class="pane p2">pane2_1</div></template>
<template #divider_1="{ pane, size, index }"><div class="pane p2">pane2_2</div></template>
</divider>
</template>
<template #divider_2="{ pane, size, index }">
<div class="pane p1">pane3</div>
</template>
</divider>
</div>
</template>
<script setup>
import divider from './divider.vue'
</script>
<style scoped>
.main {
width: 800px;
height: 600px;
margin: 50px auto 0;
}
.main .pane_container {
width: 100%;
height: 100%;
}
.main .pane {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.main .pane.p1 {
background: lightblue;
}
.main .pane.p2 {
background: lightgreen;
}
</style>