fast-divider

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/string	0	每个分屏的初始宽度, number型默认单位px, 1.1.0新增支持百分比设置, 例：'10%' 注意：最右或最下的分屏设置无效, 自动计算。
min	number/string	0	每个分屏的最小宽度, number型默认单位px, 1.1.0新增支持百分比设置, 例：'10%'
props	Object	null	1.1.0新增, 每个分屏的父DOM的属性, 可以设置class, style等属性

Slot说明

每个分屏都会给出一个slot, slot的名字为 divider_

属性	类型	说明
pane	Pane	分屏配置Pane
index	number	slot所属index
size	number	单位px, 当前宽度

使用Sample

<template>
  <div class="main">
    <divider vertical transfer :panes="[{ size: '20%', min: '10%', props: { class: ['c1', 'c2'], style: ['color: red', { 'background':'blue' }] } }, { size: 50 }, { 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: '50%', min: '30%', props: { class: 'c3', style: 'color: green' } }, {}]" :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 '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>