1.0.1 • Published 2 years ago

vue-x-split-panel v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

vue-x-split-panel

一个简单使用的分割器工具

  • 支持横向、纵向分隔
  • 支持被分隔状态保存
  • 支持分隔栏自定义
  • 支持分区域样式自定义
  • 支持一键收起分隔区域

用法示例

有两个元素的分割，分别占25%和75%的宽度,分隔栏距离两侧被分隔区域距离为20px，并自定义分隔栏的生程、自定义分隔区域的样式

<x-split style="height: 500px;" :sizes="[25,75]"
         :gutter-interval="20"
         debug
         :gutter="handleGutter"
         :gutter-color="'#eee'"
         :element-style="handleElementStyle"
         :gutter-style="handleGutterStyle">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel right
    </x-split-area>
</x-split>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            handleGutter(index, direction, pairElement) {
                const gutter = document.createElement('div')
                gutter.className = `gutter gutter-${direction}`
                return gutter
            },
            handleElementStyle(dimension, elementSize, gutterSize, index) {
                return {
                    'flex-basis': 'calc(' + elementSize + '% - ' + gutterSize + 'px)',
                }
            },
            handleGutterStyle(dimension, gutterSize, index) {
                return {
                    'flex-basis': gutterSize + 'px',
                }
            }
        }
    }
</script>

有两个元素的分割，分别占25%和75%的宽度。

<x-split style="height: 500px;" :sizes="[25,75]">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel right
    </x-split-area>
</x-split>

或

<x-split style="height: 500px;">
    <x-split-area :size="25">
        panel left
    </x-split-area>
    <x-split-area :size="75">
        panel right
    </x-split-area>
</x-split>

由三个元素组成的拆分，从偶数宽度开始，最小宽度分别为100px、100px和300px。

<x-split style="height: 500px;" :sizes="[33,33,33]" :minSizes="[100,100,100]">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel center
    </x-split-area>
    <x-split-area>
        panel right
    </x-split-area>
</x-split>

或

<x-split style="height: 500px;">
    <x-split-area :size="33" :minSize="100">
        panel left
    </x-split-area>
    <x-split-area :size="33" :minSize="100">
        panel center
    </x-split-area>
    <x-split-area :size="33" :minSize="300">
        panel right
    </x-split-area>
</x-split>

有两个元素的垂直拆分。

<x-split style="height: 500px;" :direction="vertical">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel center
    </x-split-area>
</x-split>

A将分隔栏大小设置为20px。

<x-split style="height: 500px;" :gutterSize="20">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel center
    </x-split-area>
</x-split>

事件触发

<x-split style="height: 500px;" @onDragEnd="onDragEnd" @onDragStart="onDragStart" onDrag="onDrag">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel center
    </x-split-area>
</x-split>
methods: {
    onDragStart (size) {
        console.log('Drag Start', size) // callback existing size
    },
    onDrag (size) {
        console.log('on Drag', size) // callback new size
    },
    onDragEnd (size) {
        console.log('Drag End', size) // callback new size
    }
}

重置面板并获取重置后的新尺寸

<x-split style="height: 500px;" ref="mySplit">
    <x-split-area>
        panel left
    </x-split-area>
    <x-split-area>
        panel center
    </x-split-area>
</x-split>
methods: {
    Reset () {
        console.log(this.$refs.mySplit.reset())
    }
    getSizes () {
        console.log(this.$refs.mySplit.getSizes())
    }
}

API

Split 属性

属性名类型默认值描述
debugBooleanfalse是否是是否调试模式，设置为true控制台将会打印一些必要的信息
storeKeyFunction() => 'x-split_' + btoa(window.location.href)分隔器的key，可用来缓存位置
autoSaveSizeBooleantrue是否自动保存拖动后各个分隔区域的最后的大小
storeSizesFunction(key, sizes) => { localStorage.setItem(key, JSON.stringify(sizes)) }调用这个函数来存储拖动后各个分隔区域的最后的大小
getStoreSizesFunctionkey => JSON.parse(localStorage.getItem(key))调用这个函数来获取存储拖动后各个分隔区域的最后的大小
removeStoreSizesFunctionkey => localStorage.removeItem(key)调用这个函数来删除存储拖动后各个分隔区域的最后的大小
directionStringhorizontal拆分方向：水平:horizontal、垂直:vertical
cursorString\|Functiondirection => direction === 'horizontal' ? 'col-resize' : 'row-resize'拖动时要显示的光标
elementStyleFunction调用这个函数来设置每个被分割的区间的样式
gutterFunction调用这个函数来创建分隔栏
gutterColorString#eee分隔栏颜色
gutterIntervalNUmber分隔栏与分隔区域之间的间隔（以像素为单位），水平分隔则是分别距离上下两侧分隔区域的间隔，垂直分隔则是分别距离左右两侧分隔区域的间隔
gutterStyleFunction调用这个函数来设置分隔栏的样式
gutterSizeNumber8分隔栏大小（以像素为单位）
gutterAlignStringcenter分隔栏在各个分割区域的对齐方式。start：收缩第一个分隔区域时适合； end：收缩最后一个分隔区域时适合；center：可动态调节各分隔区域时适合
snapOffsetNumber30捕捉到以像素为单位的最小大小偏移
dragIntervalNumber1每次拖动递增的像素值
sizesArray[]每个分割区域的初始大小（以百分比或CSS值为单位）
minSizesArray[]每个分割区域的最小大小（单位为像素）
maxSizeArray[]每个分割区域的最大大（单位为像素）
expandToMinArray[]将分割区域初始大小设置为minSize

Split 事件

事件名称描述返回值
onDrag拖动过程中回调当前的 size
onDragStart拖动开始回调.新的 size
onDragEnd拖动结束基调新的 size

Split 方法

方法名称描述参数
reset重置none
setSizes设置分隔各个分割区域的大小，参数sizes代表各分隔区域大小分布数组sizes
getSizes获取当前各个分割区域的百分比数对应的数组,convertPercentageToSpecificValue 决定是否将百分比转化为具体值convertPercentageToSpecificValue
collapsecollapse将下标“index”处分隔区域的大小更改为“minSize”。除最后一个元素外，所有元素都向前（左侧或顶部）折叠。最后一个倒在后面index
destroy销毁none

SplitArea 属性（优先于Split属性中的sizes、minSizes、maxSizes）

属性名类型默认值描述
sizeArray50当前分割区域的初始大小（以百分比或CSS值为单位）
minSizeNumber100当前分割区域的最小大小
maxSizeNumberInfinity当前分割区域的最大大小
vuesplitsplitArea
1.0.1

2 years ago

1.0.0

2 years ago