vue3 分屏滑动组件

使用

全局引入

import 'fast-divider/lib/style.css'
import fastDivider from 'fast-divider'

const app = createApp(App)
app.use(fastDivider)

按需引入

// js
import 'fast-divider/lib/style.css'
import { FastDivider } from 'fast-divider'

// template
<fast-divider></fast-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">
    <fast-divider vertical transfer :panes="[{ size: 50, min: 30 }, { size: 400 }, {}]" :split-size="10">
      <template #divider_0="{ pane, size, index }"><div class="pane p1">纵向分屏, 最小高度30, 拖动传递</div></template>
      <template #divider_1="{ pane, size, index }">
        <fast-divider :panes="[{ size: 200, min: 100 }, { size: 300, min: 60 }, {}]" :split-size="10" class="pane_container">
          <template #divider_0="{ pane, size, index }"><div class="pane p2">横向分屏<br />最小宽度100</div></template>
          <template #divider_1="{ pane, size, index }"><div class="pane p2">横向分屏<br />最小宽度60<br />拖动不传递</div></template>
          <template #divider_2="{ pane, size, index }"><div class="pane p2">横向分屏<br />没有最小宽度</div></template>
        </fast-divider>
      </template>
      <template #divider_2="{ pane, size, index }">
        <div class="pane p1">纵向分屏, 没有最小高度, 拖动传递</div>
      </template>
    </fast-divider>
  </div>
</template>

<script setup>
import 'fast-divider/lib/style.css'
import { FastDivider } from 'fast-divider'
</script>

<style scoped>
.main {
  width: 100%;
  height: 500px;
  margin: 0;
}
.main .pane_container {
  width: 100%;
  height: 100%;
}
.main .pane {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.main .pane.p1 {
  background: lightblue;
}
.main .pane.p2 {
  background: lightgreen;
}
</style>