vxe-pc-ui 3.16.0 → 3.16.2

package/es/splitter/src/splitter.js

@@ -0,0 +1,1002 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, createEvent, globalEvents, globalMixins, globalResize, renderEmptyElement } from '../../ui';
+import { getSlotVNs } from '../../ui/src/vn';
+import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom';
+import { getGlobalDefaultConfig } from '../../ui/src/utils';
+import { createComponentLog } from '../../ui/src/log';
+const { warnLog, errLog } = createComponentLog('splitter');
+export default {
+    name: 'VxeSplitter',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        width: [Number, String],
+        height: [Number, String],
+        vertical: {
+            type: Boolean,
+            default: () => getConfig().splitter.vertical
+        },
+        border: {
+            type: Boolean,
+            default: () => getConfig().splitter.border
+        },
+        padding: {
+            type: Boolean,
+            default: () => getConfig().splitter.padding
+        },
+        resize: {
+            type: Boolean,
+            default: () => getConfig().splitter.resize
+        },
+        items: Array,
+        itemConfig: Object,
+        barConfig: Object,
+        resizeConfig: Object,
+        actionConfig: Object,
+        size: {
+            type: String,
+            default: () => getConfig().splitter.size || getConfig().size
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            staticItems: [],
+            itemList: [],
+            barWidth: 0,
+            barHeight: 0,
+            resizeFlag: 0
+        };
+        const internalData = {
+            wrapperWidth: 0,
+            wrapperHeight: 0
+        };
+        return {
+            xID,
+            reactData,
+            internalData,
+            reFlag: 0
+        };
+    },
+    provide() {
+        const $xeSplitter = this;
+        return {
+            $xeSplitter
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeItemOpts() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            return Object.assign({}, getConfig().splitter.itemConfig, props.itemConfig);
+        },
+        computeBarOpts() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            return Object.assign({}, getConfig().splitter.barConfig, props.barConfig);
+        },
+        computeResizeOpts() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            return Object.assign({}, getConfig().splitter.resizeConfig, props.resizeConfig);
+        },
+        computeActionOpts() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            return Object.assign({}, getConfig().splitter.actionConfig, props.actionConfig);
+        },
+        computeIsFoldNext() {
+            const $xeSplitter = this;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            return actionOpts.direction === 'next';
+        },
+        computeVisibleItems() {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            return reactData.itemList.filter(item => item.isExpand);
+        },
+        computeAutoItems() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const { vertical } = props;
+            const autoItems = [];
+            reactData.itemList.forEach(vertical
+                ? item => {
+                    if (!item.height) {
+                        autoItems.push(item);
+                    }
+                }
+                : item => {
+                    if (!item.width) {
+                        autoItems.push(item);
+                    }
+                });
+            return {
+                autoItems
+            };
+        },
+        computeBarStyle() {
+            const $xeSplitter = this;
+            const barOpts = $xeSplitter.computeBarOpts;
+            const { width, height } = barOpts;
+            const stys = {};
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
+        },
+        computeSItemSize() {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            return reactData.staticItems.length;
+        } }),
+    watch: {
+        items(val) {
+            const $xeSplitter = this;
+            $xeSplitter.loadItem(val || []);
+        },
+        computeSItemSize() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const { showPrevButton, showNextButton } = actionOpts;
+            if (props.items && props.items.length) {
+                errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
+            }
+            reactData.itemList = reactData.staticItems || [];
+            if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+                errLog('vxe.error.modelConflicts', ['action-config.showPrevButton | action-config.showNextButton', '<vxe-splitter-panel ...> Only supports 2 panel']);
+            }
+            reactData.itemList.forEach(item => {
+                if (item.showAction) {
+                    warnLog('vxe.error.removeProp', ['show-action']);
+                }
+            });
+            $xeSplitter.recalculate();
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeSplitter = this;
+            $xeSplitter.$emit(type, createEvent(evnt, { $splitter: $xeSplitter }, params));
+        },
+        callSlot(slotFunc, params) {
+            const $xeSplitter = this;
+            const slots = $xeSplitter.$scopedSlots;
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        },
+        reset() {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            const { itemList } = reactData;
+            itemList.forEach(item => {
+                item.isExpand = true;
+                item.foldHeight = 0;
+                item.foldWidth = 0;
+                item.resizeHeight = 0;
+                item.resizeWidth = 0;
+            });
+            return $xeSplitter.$nextTick();
+        },
+        handleLoadItem(list, isReset) {
+            const $xeSplitter = this;
+            const slots = $xeSplitter.$scopedSlots;
+            const reactData = $xeSplitter.reactData;
+            const { staticItems } = reactData;
+            const itemDef = {
+                isExpand: true,
+                renderWidth: 0,
+                resizeWidth: 0,
+                foldWidth: 0,
+                renderHeight: 0,
+                resizeHeight: 0,
+                foldHeight: 0
+            };
+            reactData.itemList = list.map(item => {
+                if (item.slots) {
+                    XEUtils.each(item.slots, (func) => {
+                        if (!XEUtils.isFunction(func)) {
+                            if (!slots[func]) {
+                                errLog('vxe.error.notSlot', [func]);
+                            }
+                        }
+                    });
+                }
+                return Object.assign({}, isReset ? null : itemDef, item, isReset ? itemDef : null, {
+                    id: XEUtils.uniqueId()
+                });
+            });
+            if (staticItems.length) {
+                errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
+            }
+            return $xeSplitter.recalculate();
+        },
+        loadItem(list) {
+            const $xeSplitter = this;
+            return $xeSplitter.handleLoadItem(list || [], false);
+        },
+        reloadItem(list) {
+            const $xeSplitter = this;
+            return $xeSplitter.handleLoadItem(list || [], true);
+        },
+        handleItemByName(name) {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            const { itemList } = reactData;
+            let index = -1;
+            let currItem = null;
+            let prevItem = null;
+            let nextItem = null;
+            for (let i = 0; i < itemList.length; i++) {
+                const item = itemList[i];
+                if (item.name === name) {
+                    index = i;
+                    currItem = item;
+                    prevItem = itemList[i - 1] || null;
+                    nextItem = itemList[i + 1] || null;
+                    break;
+                }
+            }
+            return {
+                index,
+                currItem,
+                prevItem,
+                nextItem
+            };
+        },
+        setItemExpand(name, expanded) {
+            const $xeSplitter = this;
+            const restItem = $xeSplitter.handleItemByName(name);
+            if (restItem) {
+                const { currItem, prevItem, nextItem } = restItem;
+                if (currItem) {
+                    if (expanded ? !currItem.isExpand : currItem.isExpand) {
+                        if (nextItem) {
+                            if (nextItem.isExpand) {
+                                $xeSplitter.handleItemActionEvent(null, currItem, nextItem, false);
+                            }
+                        }
+                        else if (prevItem) {
+                            if (prevItem.isExpand) {
+                                $xeSplitter.handleItemActionEvent(null, prevItem, currItem, true);
+                            }
+                        }
+                    }
+                }
+            }
+            return $xeSplitter.$nextTick();
+        },
+        toggleItemExpand(name) {
+            const $xeSplitter = this;
+            const restItem = $xeSplitter.handleItemByName(name);
+            if (restItem) {
+                const { currItem } = restItem;
+                if (currItem) {
+                    return $xeSplitter.setItemExpand(name, !currItem.isExpand);
+                }
+            }
+            return $xeSplitter.$nextTick();
+        },
+        getItemVisible(name) {
+            const $xeSplitter = this;
+            const restItem = $xeSplitter.handleItemByName(name);
+            if (restItem) {
+                const { currItem } = restItem;
+                if (currItem) {
+                    return $xeSplitter.setItemExpand(name, !currItem.isExpand);
+                }
+            }
+            return false;
+        },
+        recalculate() {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const internalData = $xeSplitter.internalData;
+            return $xeSplitter.$nextTick().then(() => {
+                const { vertical } = props;
+                const { itemList } = reactData;
+                const el = $xeSplitter.$refs.refElem;
+                const barInfoElem = $xeSplitter.$refs.refBarInfoElem;
+                if (!el) {
+                    return;
+                }
+                const wWidth = el.clientWidth;
+                const wHeight = el.clientHeight;
+                if (!wWidth || !wHeight) {
+                    return;
+                }
+                if (barInfoElem) {
+                    reactData.barWidth = barInfoElem.offsetWidth;
+                    reactData.barHeight = barInfoElem.offsetHeight;
+                }
+                const contentWidth = wWidth - (vertical ? 0 : reactData.barWidth * (itemList.length - 1));
+                const contentHeight = wHeight - (vertical ? reactData.barHeight * (itemList.length - 1) : 0);
+                const itemOpts = $xeSplitter.computeItemOpts;
+                const allMinWidth = XEUtils.toNumber(itemOpts.minWidth);
+                const allMinHeight = XEUtils.toNumber(itemOpts.minHeight);
+                const residueItems = [];
+                if (vertical) {
+                    let countHeight = 0;
+                    itemList.forEach(item => {
+                        const { height } = item;
+                        let itemHeight = 0;
+                        if (height) {
+                            if (isScale(height)) {
+                                itemHeight = contentHeight * XEUtils.toNumber(height) / 100;
+                            }
+                            else {
+                                itemHeight = XEUtils.toNumber(height);
+                            }
+                            item.renderHeight = itemHeight;
+                        }
+                        else {
+                            residueItems.push(item);
+                        }
+                        countHeight += itemHeight;
+                    });
+                    if (residueItems.length) {
+                        const reMeanHeight = (contentHeight - countHeight) / residueItems.length;
+                        residueItems.forEach(item => {
+                            item.renderHeight = Math.max(XEUtils.toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight)), reMeanHeight);
+                        });
+                    }
+                }
+                else {
+                    let countWidth = 0;
+                    itemList.forEach(item => {
+                        const { width } = item;
+                        let itemWidth = 0;
+                        if (width) {
+                            if (isScale(width)) {
+                                itemWidth = contentWidth * XEUtils.toNumber(width) / 100;
+                            }
+                            else {
+                                itemWidth = XEUtils.toNumber(width);
+                            }
+                            item.renderWidth = itemWidth;
+                        }
+                        else {
+                            residueItems.push(item);
+                        }
+                        countWidth += itemWidth;
+                    });
+                    if (residueItems.length) {
+                        const reMeanWidth = (contentWidth - countWidth) / residueItems.length;
+                        residueItems.forEach(item => {
+                            item.renderWidth = Math.max(XEUtils.toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth)), reMeanWidth);
+                        });
+                    }
+                }
+                internalData.wrapperWidth = contentWidth;
+                internalData.wrapperHeight = contentHeight;
+            });
+        },
+        dragEvent(evnt) {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const { resize, vertical } = props;
+            const { itemList } = reactData;
+            if (!resize) {
+                return;
+            }
+            evnt.preventDefault();
+            const barEl = evnt.currentTarget;
+            const handleEl = barEl.parentElement;
+            const el = $xeSplitter.$refs.refElem;
+            if (!el) {
+                return;
+            }
+            const prevEl = handleEl.previousElementSibling;
+            const nextEl = handleEl.nextElementSibling;
+            if (!prevEl || !nextEl) {
+                return;
+            }
+            const prevId = prevEl.getAttribute('itemid');
+            const nextId = nextEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (!prevItem || !nextItem) {
+                return;
+            }
+            const containerRect = el.getBoundingClientRect();
+            const barRect = barEl.getBoundingClientRect();
+            const rsSplitterLineEl = $xeSplitter.$refs.refResizableSplitterTip;
+            const rsSplitterTipEl = rsSplitterLineEl ? rsSplitterLineEl.children[0] : null;
+            const itemOpts = $xeSplitter.computeItemOpts;
+            const resizeOpts = $xeSplitter.computeResizeOpts;
+            const { immediate } = resizeOpts;
+            const allMinWidth = XEUtils.toNumber(itemOpts.minWidth);
+            const allMinHeight = XEUtils.toNumber(itemOpts.minHeight);
+            const barOffsetX = Math.ceil(barRect.width - (evnt.clientX - barRect.left));
+            const barOffsetY = Math.ceil(evnt.clientY - barRect.top);
+            const prevWidth = prevEl.offsetWidth;
+            const nextWidth = nextEl.offsetWidth;
+            const prevMinWidth = XEUtils.toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minWidth, allMinWidth) : allMinWidth);
+            const nextMinWidth = XEUtils.toNumber(nextItem ? getGlobalDefaultConfig(nextItem.minWidth, allMinWidth) : allMinWidth);
+            const minOffsetLeft = prevEl.offsetLeft + prevMinWidth - barOffsetX;
+            const maxOffsetLeft = nextEl.offsetLeft + nextEl.offsetWidth - nextMinWidth - barOffsetX;
+            const startOffsetLeft = evnt.clientX - containerRect.left;
+            let targetOffsetWidth = -1;
+            let prevResizeWidth = 0;
+            let nextResizeWidth = 0;
+            let offsetLeft = startOffsetLeft;
+            const prevHeight = prevEl.offsetHeight;
+            const nextHeight = nextEl.offsetHeight;
+            const prevMinHeight = XEUtils.toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minHeight, allMinHeight) : allMinHeight);
+            const nextMinHeight = XEUtils.toNumber(nextItem ? getGlobalDefaultConfig(nextItem.minHeight, allMinHeight) : allMinHeight);
+            const minOffsetTop = prevEl.offsetTop + prevMinHeight + barOffsetY;
+            const maxOffsetTop = nextEl.offsetTop + nextEl.offsetHeight - nextMinHeight + barOffsetY;
+            const startOffsetTop = evnt.clientY - containerRect.top;
+            let targetOffsetHeight = -1;
+            let prevResizeHeight = 0;
+            let nextResizeHeight = 0;
+            let offsetTop = startOffsetTop;
+            const handleReStyle = (evnt) => {
+                if (!rsSplitterLineEl) {
+                    return;
+                }
+                const rsNumPrevEl = rsSplitterTipEl ? rsSplitterTipEl.children[0] : null;
+                const rsNumNextEl = rsSplitterTipEl ? rsSplitterTipEl.children[1] : null;
+                if (vertical) {
+                    let tipWidth = 0;
+                    if (rsNumPrevEl) {
+                        if (targetOffsetHeight < 0) {
+                            rsNumPrevEl.style.display = 'none';
+                        }
+                        else {
+                            rsNumPrevEl.textContent = `${Math.floor(prevResizeHeight)}px`;
+                            rsNumPrevEl.style.display = 'block';
+                            tipWidth = rsNumPrevEl.offsetWidth;
+                        }
+                    }
+                    if (rsNumNextEl) {
+                        if (targetOffsetHeight < 0) {
+                            rsNumNextEl.textContent = `${Math.floor(nextResizeHeight)}px`;
+                            rsNumNextEl.style.display = 'block';
+                            tipWidth = rsNumNextEl.offsetWidth;
+                        }
+                        else {
+                            rsNumNextEl.style.display = 'none';
+                        }
+                    }
+                    let rsLeft = Math.max(1, evnt.clientX - containerRect.left - tipWidth / 2);
+                    if (rsLeft > containerRect.width - tipWidth - 1) {
+                        rsLeft = containerRect.width - tipWidth - 1;
+                    }
+                    rsSplitterLineEl.style.left = '0';
+                    rsSplitterLineEl.style.top = `${offsetTop}px`;
+                    if (rsSplitterTipEl) {
+                        rsSplitterTipEl.style.left = `${rsLeft}px`;
+                    }
+                }
+                else {
+                    let tipHeight = 0;
+                    if (rsNumPrevEl) {
+                        if (targetOffsetWidth < 0) {
+                            rsNumPrevEl.style.display = 'none';
+                        }
+                        else {
+                            rsNumPrevEl.textContent = `${Math.floor(prevResizeWidth)}px`;
+                            rsNumPrevEl.style.display = 'block';
+                            tipHeight = rsNumPrevEl.offsetHeight;
+                        }
+                    }
+                    if (rsNumNextEl) {
+                        if (targetOffsetWidth < 0) {
+                            rsNumNextEl.textContent = `${Math.floor(nextResizeWidth)}px`;
+                            rsNumNextEl.style.display = 'block';
+                            tipHeight = rsNumNextEl.offsetHeight;
+                        }
+                        else {
+                            rsNumNextEl.style.display = 'none';
+                        }
+                    }
+                    let rsTop = Math.max(1, evnt.clientY - containerRect.top - tipHeight / 2);
+                    if (rsTop > containerRect.height - tipHeight - 1) {
+                        rsTop = containerRect.height - tipHeight - 1;
+                    }
+                    rsSplitterLineEl.style.top = '0';
+                    rsSplitterLineEl.style.left = `${offsetLeft}px`;
+                    if (rsSplitterTipEl) {
+                        rsSplitterTipEl.style.top = `${rsTop}px`;
+                    }
+                }
+            };
+            const handleUpdate = () => {
+                if (vertical) {
+                    prevItem.resizeHeight = prevResizeHeight;
+                    nextItem.resizeHeight = nextResizeHeight;
+                }
+                else {
+                    prevItem.resizeWidth = prevResizeWidth;
+                    nextItem.resizeWidth = nextResizeWidth;
+                }
+            };
+            const handleDrag = (evnt) => {
+                if (vertical) {
+                    offsetTop = evnt.clientY - containerRect.top;
+                    if (offsetTop < minOffsetTop) {
+                        offsetTop = minOffsetTop;
+                    }
+                    if (offsetTop > maxOffsetTop) {
+                        offsetTop = maxOffsetTop;
+                    }
+                    targetOffsetHeight = offsetTop - startOffsetTop;
+                    prevResizeHeight = prevHeight + targetOffsetHeight;
+                    nextResizeHeight = nextHeight - targetOffsetHeight;
+                }
+                else {
+                    offsetLeft = evnt.clientX - containerRect.left;
+                    if (offsetLeft < minOffsetLeft) {
+                        offsetLeft = minOffsetLeft;
+                    }
+                    if (offsetLeft > maxOffsetLeft) {
+                        offsetLeft = maxOffsetLeft;
+                    }
+                    targetOffsetWidth = offsetLeft - startOffsetLeft;
+                    prevResizeWidth = prevWidth + targetOffsetWidth;
+                    nextResizeWidth = nextWidth - targetOffsetWidth;
+                }
+                if (immediate) {
+                    if (vertical) {
+                        prevEl.style.height = toCssUnit(prevResizeHeight);
+                        nextEl.style.height = toCssUnit(nextResizeHeight);
+                    }
+                    else {
+                        prevEl.style.width = toCssUnit(prevResizeWidth);
+                        nextEl.style.width = toCssUnit(nextResizeWidth);
+                    }
+                }
+                if (rsSplitterLineEl) {
+                    handleReStyle(evnt);
+                }
+                $xeSplitter.dispatchEvent('resize-drag', { prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
+            };
+            document.onmousemove = (evnt) => {
+                evnt.preventDefault();
+                handleDrag(evnt);
+                reactData.resizeFlag++;
+            };
+            document.onmouseup = (evnt) => {
+                document.onmousemove = null;
+                document.onmouseup = null;
+                if (rsSplitterLineEl) {
+                    rsSplitterLineEl.style.display = '';
+                }
+                handleUpdate();
+                removeClass(el, 'is--drag');
+                $xeSplitter.dispatchEvent('resize-end', { prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
+                $xeSplitter.recalculate();
+                reactData.resizeFlag++;
+            };
+            if (rsSplitterLineEl) {
+                rsSplitterLineEl.style.display = 'block';
+                handleReStyle(evnt);
+            }
+            handleDrag(evnt);
+            addClass(el, 'is--drag');
+            $xeSplitter.dispatchEvent('resize-start', { prevItem, nextItem }, evnt);
+        },
+        handleItemActionEvent(evnt, prevItem, nextItem, isNext) {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const { vertical } = props;
+            let expanded = false;
+            let item = prevItem;
+            if (isNext) {
+                item = nextItem;
+                expanded = !nextItem.isExpand;
+                nextItem.isExpand = expanded;
+            }
+            else {
+                expanded = !prevItem.isExpand;
+                prevItem.isExpand = expanded;
+            }
+            if (vertical) {
+                if (prevItem.isExpand && nextItem.isExpand) {
+                    prevItem.foldHeight = 0;
+                    nextItem.foldHeight = 0;
+                }
+                else if (prevItem.isExpand) {
+                    nextItem.foldHeight = 0;
+                    prevItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+                }
+                else {
+                    prevItem.foldHeight = 0;
+                    nextItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+                }
+            }
+            else {
+                if (prevItem.isExpand && nextItem.isExpand) {
+                    prevItem.foldWidth = 0;
+                    nextItem.foldWidth = 0;
+                }
+                else if (prevItem.isExpand) {
+                    nextItem.foldWidth = 0;
+                    prevItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+                }
+                else {
+                    prevItem.foldWidth = 0;
+                    nextItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+                }
+            }
+            if (evnt) {
+                $xeSplitter.dispatchEvent('toggle-expand', { prevItem, nextItem, expanded, item }, evnt);
+            }
+            $xeSplitter.recalculate();
+            reactData.resizeFlag++;
+        },
+        handlePrevActionDblclickEvent(evnt) {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            const { itemList } = reactData;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const btnEl = evnt.currentTarget;
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (actionOpts.trigger === 'dblclick') {
+                if (prevItem && nextItem && nextItem.isExpand) {
+                    $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, false);
+                }
+            }
+            $xeSplitter.dispatchEvent('action-dblclick', { prevItem, nextItem }, evnt);
+        },
+        handlePrevActionClickEvent(evnt) {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            const { itemList } = reactData;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const btnEl = evnt.currentTarget;
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (actionOpts.trigger !== 'dblclick') {
+                if (prevItem && nextItem && nextItem.isExpand) {
+                    $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, false);
+                }
+            }
+            $xeSplitter.dispatchEvent('action-click', { prevItem, nextItem }, evnt);
+        },
+        handleNextActionDblclickEvent(evnt) {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            const { itemList } = reactData;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const btnEl = evnt.currentTarget;
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (actionOpts.trigger === 'dblclick') {
+                if (prevItem && nextItem && prevItem.isExpand) {
+                    $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, true);
+                }
+            }
+            $xeSplitter.dispatchEvent('action-dblclick', { prevItem, nextItem }, evnt);
+        },
+        handleNextActionClickEvent(evnt) {
+            const $xeSplitter = this;
+            const reactData = $xeSplitter.reactData;
+            const { itemList } = reactData;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const btnEl = evnt.currentTarget;
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (actionOpts.trigger !== 'dblclick') {
+                if (prevItem && nextItem && prevItem.isExpand) {
+                    $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, true);
+                }
+            }
+            $xeSplitter.dispatchEvent('action-click', { prevItem, nextItem }, evnt);
+        },
+        handleGlobalResizeEvent() {
+            const $xeSplitter = this;
+            $xeSplitter.recalculate();
+        },
+        getActionIcon(prevItem, nextItem, isNext) {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const { vertical } = props;
+            const topIcon = 'SPLIT_TOP_ACTION';
+            const bottomIcon = 'SPLIT_BOTTOM_ACTION';
+            const leftIcon = 'SPLIT_LEFT_ACTION';
+            const rightIcon = 'SPLIT_RIGHT_ACTION';
+            let iconName = '';
+            if (vertical) {
+                if (isNext) {
+                    iconName = nextItem.isExpand ? bottomIcon : topIcon;
+                }
+                else {
+                    iconName = prevItem.isExpand ? topIcon : bottomIcon;
+                }
+            }
+            else {
+                if (isNext) {
+                    iconName = nextItem.isExpand ? rightIcon : leftIcon;
+                }
+                else {
+                    iconName = prevItem.isExpand ? leftIcon : rightIcon;
+                }
+            }
+            if (iconName) {
+                return getIcon()[iconName];
+            }
+            return '';
+        },
+        //
+        // Render
+        //
+        renderHandleBar(h, prevItem, nextItem) {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const { border, resize, vertical } = props;
+            const { itemList } = reactData;
+            const barStyle = $xeSplitter.computeBarStyle;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const { direction } = actionOpts;
+            const showPrevButton = XEUtils.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : (itemList.some(item => item.showAction));
+            const showNextButton = XEUtils.isBoolean(actionOpts.showNextButton) ? actionOpts.showNextButton : (direction === 'next' && itemList.some(item => item.showAction));
+            const resizeOpts = $xeSplitter.computeResizeOpts;
+            const { immediate } = resizeOpts;
+            return h('div', {
+                class: ['vxe-splitter-panel-handle', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                        'is--resize': resize,
+                        'is--border': border
+                    }]
+            }, [
+                h('div', {
+                    class: 'vxe-splitter-panel-handle-bar',
+                    style: barStyle,
+                    on: {
+                        mousedown: $xeSplitter.dragEvent
+                    }
+                }),
+                itemList.length === 2
+                    ? h('div', {
+                        class: 'vxe-splitter-panel-action-btn-wrapper'
+                    }, [
+                        showPrevButton && nextItem.isExpand
+                            ? h('div', {
+                                class: 'vxe-splitter-panel-action-btn',
+                                on: {
+                                    dblclick: $xeSplitter.handlePrevActionDblclickEvent,
+                                    click: $xeSplitter.handlePrevActionClickEvent
+                                }
+                            }, [
+                                h('i', {
+                                    class: $xeSplitter.getActionIcon(prevItem, nextItem, false)
+                                })
+                            ])
+                            : renderEmptyElement($xeSplitter),
+                        showNextButton && prevItem.isExpand
+                            ? h('div', {
+                                class: 'vxe-splitter-panel-action-btn',
+                                on: {
+                                    dblclick: $xeSplitter.handleNextActionDblclickEvent,
+                                    click: $xeSplitter.handleNextActionClickEvent
+                                }
+                            }, [
+                                h('i', {
+                                    class: $xeSplitter.getActionIcon(prevItem, nextItem, true)
+                                })
+                            ])
+                            : renderEmptyElement($xeSplitter)
+                    ])
+                    : renderEmptyElement($xeSplitter)
+            ]);
+        },
+        renderItems(h) {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const reactData = $xeSplitter.reactData;
+            const { border, padding, resize, vertical } = props;
+            const { itemList } = reactData;
+            const vSize = $xeSplitter.computeSize;
+            const resizeOpts = $xeSplitter.computeResizeOpts;
+            const { immediate } = resizeOpts;
+            const visibleItems = $xeSplitter.computeVisibleItems;
+            const { autoItems } = $xeSplitter.computeAutoItems;
+            const itemVNs = [];
+            itemList.forEach((prevItem, index) => {
+                const { id, name, slots, renderHeight, resizeHeight, foldHeight, renderWidth, resizeWidth, foldWidth, isExpand } = prevItem;
+                const nextItem = itemList[index + 1];
+                const defaultSlot = slots ? slots.default : null;
+                const stys = {};
+                let itemWidth = isExpand ? (foldWidth || resizeWidth || renderWidth) : 0;
+                let itemHeight = isExpand ? (foldHeight || resizeHeight || renderHeight) : 0;
+                // 至少存在一个自适应
+                if (autoItems.length === 1) {
+                    if (vertical) {
+                        if (!prevItem.height) {
+                            itemHeight = 0;
+                        }
+                    }
+                    else {
+                        if (!prevItem.width) {
+                            itemWidth = 0;
+                        }
+                    }
+                }
+                let isFill = true;
+                if (vertical) {
+                    if (itemHeight && visibleItems.length > 1) {
+                        isFill = false;
+                        stys.height = toCssUnit(itemHeight);
+                    }
+                }
+                else {
+                    if (itemWidth && visibleItems.length > 1) {
+                        isFill = false;
+                        stys.width = toCssUnit(itemWidth);
+                    }
+                }
+                itemVNs.push(h('div', {
+                    attrs: {
+                        itemid: id
+                    },
+                    class: ['vxe-splitter-panel', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                            [`size--${vSize}`]: vSize,
+                            'is--resize': resize,
+                            'is--padding': padding,
+                            'is--border': border,
+                            'is--height': itemHeight,
+                            'is--width': itemWidth,
+                            'is--visible': isExpand,
+                            'is--hidden': !isExpand,
+                            'is--fill': isExpand && isFill
+                        }],
+                    style: stys
+                }, [
+                    h('div', {
+                        attrs: {
+                            itemid: id
+                        },
+                        class: 'vxe-splitter-panel--wrapper'
+                    }, [
+                        h('div', {
+                            class: 'vxe-splitter-panel--inner'
+                        }, defaultSlot ? $xeSplitter.callSlot(defaultSlot, { name, isExpand }) : [])
+                    ])
+                ]));
+                if (nextItem) {
+                    itemVNs.push($xeSplitter.renderHandleBar(h, prevItem, nextItem));
+                }
+            });
+            return h('div', {
+                class: 'vxe-splitter-wrapper'
+            }, itemVNs);
+        },
+        renderVN(h) {
+            const $xeSplitter = this;
+            const props = $xeSplitter;
+            const slots = $xeSplitter.$scopedSlots;
+            const { vertical, width, height } = props;
+            const vSize = $xeSplitter.computeSize;
+            const resizeOpts = $xeSplitter.computeResizeOpts;
+            const { immediate, showTip } = resizeOpts;
+            const defaultSlot = slots.default;
+            const stys = {};
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-splitter', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                        [`size--${vSize}`]: vSize
+                    }],
+                style: stys
+            }, [
+                h('div', {
+                    class: 'vxe-splitter-slots'
+                }, defaultSlot ? defaultSlot({}) : []),
+                $xeSplitter.renderItems(h),
+                h('div', {
+                    ref: 'refResizableSplitterTip',
+                    class: ['vxe-splitter--resizable-splitter-tip', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy']
+                }, showTip
+                    ? [
+                        h('div', {
+                            class: 'vxe-splitter--resizable-splitter-tip-number'
+                        }, [
+                            h('div', {
+                                class: 'vxe-splitter--resizable-splitter-number-prev'
+                            }),
+                            h('div', {
+                                class: 'vxe-splitter--resizable-splitter-number-next'
+                            })
+                        ])
+                    ]
+                    : []),
+                h('div', {
+                    class: 'vxe-splitter--render-vars'
+                }, [
+                    h('div', {
+                        ref: 'refBarInfoElem',
+                        class: 'vxe-splitter--handle-bar-info'
+                    })
+                ])
+            ]);
+        }
+    },
+    created() {
+        const $xeSplitter = this;
+        globalEvents.on($xeSplitter, 'resize', $xeSplitter.handleGlobalResizeEvent);
+    },
+    mounted() {
+        const $xeSplitter = this;
+        const props = $xeSplitter;
+        const el = $xeSplitter.$refs.refElem;
+        if (el) {
+            const resizeObserver = globalResize.create(() => {
+                $xeSplitter.recalculate();
+            });
+            resizeObserver.observe(el);
+            this.$resize = resizeObserver;
+        }
+        if (props.items) {
+            $xeSplitter.loadItem(props.items);
+        }
+        const actionOpts = $xeSplitter.computeActionOpts;
+        if (actionOpts.direction) {
+            errLog('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+        }
+        $xeSplitter.$nextTick(() => {
+            $xeSplitter.recalculate();
+        });
+    },
+    beforeDestroy() {
+        const $xeSplitter = this;
+        if (this.$resize) {
+            this.$resize.disconnect();
+        }
+        globalEvents.off($xeSplitter, 'resize');
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};