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 属性

| 属性名 | 类型 | 默认值 | 描述 | |--------------------|--------------------|-------------------------------------------------------------------------|----------------------------------------------------------------------------------| | debug | Boolean | false | 是否是是否调试模式，设置为true控制台将会打印一些必要的信息 | | storeKey | Function | () => 'x-split_' + btoa(window.location.href) | 分隔器的key，可用来缓存位置 | | autoSaveSize | Boolean | true | 是否自动保存拖动后各个分隔区域的最后的大小 | | storeSizes | Function | (key, sizes) => { localStorage.setItem(key, JSON.stringify(sizes)) } | 调用这个函数来存储拖动后各个分隔区域的最后的大小 | | getStoreSizes | Function | key => JSON.parse(localStorage.getItem(key)) | 调用这个函数来获取存储拖动后各个分隔区域的最后的大小 | | removeStoreSizes | Function | key => localStorage.removeItem(key) | 调用这个函数来删除存储拖动后各个分隔区域的最后的大小 | | direction | String | horizontal | 拆分方向：水平:horizontal、垂直:vertical | | cursor | String\|Function | direction => direction === 'horizontal' ? 'col-resize' : 'row-resize' | 拖动时要显示的光标 | | elementStyle | Function | | 调用这个函数来设置每个被分割的区间的样式 | | gutter | Function | | 调用这个函数来创建分隔栏 | | gutterColor | String | #eee | 分隔栏颜色 | | gutterInterval | NUmber | | 分隔栏与分隔区域之间的间隔（以像素为单位），水平分隔则是分别距离上下两侧分隔区域的间隔，垂直分隔则是分别距离左右两侧分隔区域的间隔 | | gutterStyle | Function | | 调用这个函数来设置分隔栏的样式 | | gutterSize | Number | 8 | 分隔栏大小（以像素为单位） | | gutterAlign | String | center | 分隔栏在各个分割区域的对齐方式。start：收缩第一个分隔区域时适合； end：收缩最后一个分隔区域时适合；center：可动态调节各分隔区域时适合 | | snapOffset | Number | 30 | 捕捉到以像素为单位的最小大小偏移 | | dragInterval | Number | 1 | 每次拖动递增的像素值 | | sizes | Array | [] | 每个分割区域的初始大小（以百分比或CSS值为单位） | | minSizes | Array | [] | 每个分割区域的最小大小（单位为像素） | | maxSize | Array | [] | 每个分割区域的最大大（单位为像素） | | expandToMin | Array | [] | 将分割区域初始大小设置为minSize |

Split 事件

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

Split 方法

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

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

| 属性名 | 类型 | 默认值 | 描述 | |-----------|----------|----------|---------------------------| | size | Array | 50 | 当前分割区域的初始大小（以百分比或CSS值为单位） | | minSize | Number | 100 | 当前分割区域的最小大小 | | maxSize | Number | Infinity | 当前分割区域的最大大小 |