vxe-table 3.8.24 → 3.9.0-rc.0

package/es/table/module/keyboard/mixin.js

@@ -0,0 +1,376 @@
+import XEUtils from 'xe-utils';
+import { browse, hasClass, getAbsolutePos, addClass, removeClass, getEventTargetNode } from '../../../ui/src/dom';
+function getTargetOffset(target, container) {
+    let offsetTop = 0;
+    let offsetLeft = 0;
+    const triggerCheckboxLabel = !browse.firefox && hasClass(target, 'vxe-checkbox--label');
+    if (triggerCheckboxLabel) {
+        const checkboxLabelStyle = getComputedStyle(target);
+        offsetTop -= XEUtils.toNumber(checkboxLabelStyle.paddingTop);
+        offsetLeft -= XEUtils.toNumber(checkboxLabelStyle.paddingLeft);
+    }
+    while (target && target !== container) {
+        offsetTop += target.offsetTop;
+        offsetLeft += target.offsetLeft;
+        target = target.offsetParent;
+        if (triggerCheckboxLabel) {
+            const checkboxStyle = getComputedStyle(target);
+            offsetTop -= XEUtils.toNumber(checkboxStyle.paddingTop);
+            offsetLeft -= XEUtils.toNumber(checkboxStyle.paddingLeft);
+        }
+    }
+    return { offsetTop, offsetLeft };
+}
+function getCheckboxRangeRows(_vm, params, targetTrElem, moveRange) {
+    let countHeight = 0;
+    let rangeRows = [];
+    const isDown = moveRange > 0;
+    const moveSize = moveRange > 0 ? moveRange : (Math.abs(moveRange) + targetTrElem.offsetHeight);
+    const { afterFullData, scrollYStore, scrollYLoad } = _vm;
+    if (scrollYLoad) {
+        const _rowIndex = _vm.getVTRowIndex(params.row);
+        if (isDown) {
+            rangeRows = afterFullData.slice(_rowIndex, _rowIndex + Math.ceil(moveSize / scrollYStore.rowHeight));
+        }
+        else {
+            rangeRows = afterFullData.slice(_rowIndex - Math.floor(moveSize / scrollYStore.rowHeight) + 1, _rowIndex + 1);
+        }
+    }
+    else {
+        const siblingProp = isDown ? 'next' : 'previous';
+        while (targetTrElem && countHeight < moveSize) {
+            rangeRows.push(_vm.getRowNode(targetTrElem).item);
+            countHeight += targetTrElem.offsetHeight;
+            targetTrElem = targetTrElem[`${siblingProp}ElementSibling`];
+        }
+    }
+    return rangeRows;
+}
+export default {
+    methods: {
+        // 处理 Tab 键移动
+        moveTabSelected(args, isLeft, evnt) {
+            const { afterFullData, visibleColumn, editConfig, editOpts } = this;
+            let targetRow;
+            let targetRowIndex;
+            let targetColumnIndex;
+            const params = Object.assign({}, args);
+            const _rowIndex = this.getVTRowIndex(params.row);
+            const _columnIndex = this.getVTColumnIndex(params.column);
+            evnt.preventDefault();
+            if (isLeft) {
+                // 向左
+                if (_columnIndex <= 0) {
+                    // 如果已经是第一列，则移动到上一行
+                    if (_rowIndex > 0) {
+                        targetRowIndex = _rowIndex - 1;
+                        targetRow = afterFullData[targetRowIndex];
+                        targetColumnIndex = visibleColumn.length - 1;
+                    }
+                }
+                else {
+                    targetColumnIndex = _columnIndex - 1;
+                }
+            }
+            else {
+                if (_columnIndex >= visibleColumn.length - 1) {
+                    // 如果已经是第一列，则移动到上一行
+                    if (_rowIndex < afterFullData.length - 1) {
+                        targetRowIndex = _rowIndex + 1;
+                        targetRow = afterFullData[targetRowIndex];
+                        targetColumnIndex = 0;
+                    }
+                }
+                else {
+                    targetColumnIndex = _columnIndex + 1;
+                }
+            }
+            const targetColumn = visibleColumn[targetColumnIndex];
+            if (targetColumn) {
+                if (targetRow) {
+                    params.rowIndex = targetRowIndex;
+                    params.row = targetRow;
+                }
+                else {
+                    params.rowIndex = _rowIndex;
+                }
+                params.columnIndex = targetColumnIndex;
+                params.column = targetColumn;
+                params.cell = this.getCellElement(params.row, params.column);
+                if (editConfig) {
+                    if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
+                        if (editOpts.mode === 'row') {
+                            this.handleEdit(params, evnt);
+                        }
+                        else {
+                            this.scrollToRow(params.row, params.column)
+                                .then(() => this.handleSelected(params, evnt));
+                        }
+                    }
+                }
+                else {
+                    this.scrollToRow(params.row, params.column)
+                        .then(() => this.handleSelected(params, evnt));
+                }
+            }
+        },
+        // 处理当前行方向键移动
+        moveCurrentRow(isUpArrow, isDwArrow, evnt) {
+            const { currentRow, treeConfig, treeOpts, afterFullData } = this;
+            const childrenField = treeOpts.children || treeOpts.childrenField;
+            let targetRow;
+            evnt.preventDefault();
+            if (currentRow) {
+                if (treeConfig) {
+                    const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField });
+                    if (isUpArrow && index > 0) {
+                        targetRow = items[index - 1];
+                    }
+                    else if (isDwArrow && index < items.length - 1) {
+                        targetRow = items[index + 1];
+                    }
+                }
+                else {
+                    const _rowIndex = this.getVTRowIndex(currentRow);
+                    if (isUpArrow && _rowIndex > 0) {
+                        targetRow = afterFullData[_rowIndex - 1];
+                    }
+                    else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
+                        targetRow = afterFullData[_rowIndex + 1];
+                    }
+                }
+            }
+            else {
+                targetRow = afterFullData[0];
+            }
+            if (targetRow) {
+                const params = { $table: this, row: targetRow };
+                this.scrollToRow(targetRow)
+                    .then(() => this.triggerCurrentRowEvent(evnt, params));
+            }
+        },
+        // 处理可编辑方向键移动
+        moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+            const { afterFullData, visibleColumn } = this;
+            const params = Object.assign({}, args);
+            const _rowIndex = this.getVTRowIndex(params.row);
+            const _columnIndex = this.getVTColumnIndex(params.column);
+            evnt.preventDefault();
+            if (isUpArrow && _rowIndex > 0) {
+                // 移动到上一行
+                params.rowIndex = _rowIndex - 1;
+                params.row = afterFullData[params.rowIndex];
+            }
+            else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
+                // 移动到下一行
+                params.rowIndex = _rowIndex + 1;
+                params.row = afterFullData[params.rowIndex];
+            }
+            else if (isLeftArrow && _columnIndex) {
+                // 移动到左侧单元格
+                params.columnIndex = _columnIndex - 1;
+                params.column = visibleColumn[params.columnIndex];
+            }
+            else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+                // 移动到右侧单元格
+                params.columnIndex = _columnIndex + 1;
+                params.column = visibleColumn[params.columnIndex];
+            }
+            this.scrollToRow(params.row, params.column).then(() => {
+                params.cell = this.getCellElement(params.row, params.column);
+                this.handleSelected(params, evnt);
+            });
+        },
+        /**
+         * 表头单元格按下事件
+         */
+        triggerHeaderCellMousedownEvent(evnt, params) {
+            const { mouseConfig, mouseOpts } = this;
+            if (mouseConfig && mouseOpts.area && this.handleHeaderCellAreaEvent) {
+                const cell = evnt.currentTarget;
+                const triggerSort = getEventTargetNode(evnt, cell, 'vxe-cell--sort').flag;
+                const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag;
+                this.handleHeaderCellAreaEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params));
+            }
+            this.focus();
+            this.closeMenu();
+        },
+        /**
+         * 单元格按下事件
+         */
+        triggerCellMousedownEvent(evnt, params) {
+            const cell = evnt.currentTarget;
+            params.cell = cell;
+            this.handleCellMousedownEvent(evnt, params);
+            this.focus();
+            this.closeFilter();
+            this.closeMenu();
+        },
+        handleCellMousedownEvent(evnt, params) {
+            const { editConfig, editOpts, handleSelected, checkboxConfig, checkboxOpts, mouseConfig, mouseOpts } = this;
+            if (mouseConfig && mouseOpts.area && this.handleCellAreaEvent) {
+                return this.handleCellAreaEvent(evnt, params);
+            }
+            else {
+                if (checkboxConfig && checkboxOpts.range) {
+                    this.handleCheckboxRangeEvent(evnt, params);
+                }
+                if (mouseConfig && mouseOpts.selected) {
+                    if (!editConfig || editOpts.mode === 'cell') {
+                        handleSelected(params, evnt);
+                    }
+                }
+            }
+        },
+        handleCheckboxRangeEvent(evnt, params) {
+            const { column, cell } = params;
+            if (column.type === 'checkbox') {
+                const { $el, elemStore } = this;
+                const disX = evnt.clientX;
+                const disY = evnt.clientY;
+                const bodyWrapperElem = elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper'];
+                const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range');
+                const domMousemove = document.onmousemove;
+                const domMouseup = document.onmouseup;
+                const trElem = cell.parentNode;
+                const selectRecords = this.getCheckboxRecords();
+                let lastRangeRows = [];
+                const marginSize = 1;
+                const offsetRest = getTargetOffset(evnt.target, bodyWrapperElem);
+                const startTop = offsetRest.offsetTop + evnt.offsetY;
+                const startLeft = offsetRest.offsetLeft + evnt.offsetX;
+                const startScrollTop = bodyWrapperElem.scrollTop;
+                const rowHeight = trElem.offsetHeight;
+                let mouseScrollTimeout = null;
+                let isMouseScrollDown = false;
+                let mouseScrollSpaceSize = 1;
+                const triggerEvent = (type, evnt) => {
+                    this.emitEvent(`checkbox-range-${type}`, { records: this.getCheckboxRecords(), reserves: this.getCheckboxReserveRecords() }, evnt);
+                };
+                const handleChecked = (evnt) => {
+                    const { clientX, clientY } = evnt;
+                    const offsetLeft = clientX - disX;
+                    const offsetTop = clientY - disY + (bodyWrapperElem.scrollTop - startScrollTop);
+                    let rangeHeight = Math.abs(offsetTop);
+                    let rangeWidth = Math.abs(offsetLeft);
+                    let rangeTop = startTop;
+                    let rangeLeft = startLeft;
+                    if (offsetTop < marginSize) {
+                        // 向上
+                        rangeTop += offsetTop;
+                        if (rangeTop < marginSize) {
+                            rangeTop = marginSize;
+                            rangeHeight = startTop;
+                        }
+                    }
+                    else {
+                        // 向下
+                        rangeHeight = Math.min(rangeHeight, bodyWrapperElem.scrollHeight - startTop - marginSize);
+                    }
+                    if (offsetLeft < marginSize) {
+                        // 向左
+                        rangeLeft += offsetLeft;
+                        if (rangeWidth > startLeft) {
+                            rangeLeft = marginSize;
+                            rangeWidth = startLeft;
+                        }
+                    }
+                    else {
+                        // 向右
+                        rangeWidth = Math.min(rangeWidth, bodyWrapperElem.clientWidth - startLeft - marginSize);
+                    }
+                    checkboxRangeElem.style.height = `${rangeHeight}px`;
+                    checkboxRangeElem.style.width = `${rangeWidth}px`;
+                    checkboxRangeElem.style.left = `${rangeLeft}px`;
+                    checkboxRangeElem.style.top = `${rangeTop}px`;
+                    checkboxRangeElem.style.display = 'block';
+                    const rangeRows = getCheckboxRangeRows(this, params, trElem, offsetTop < marginSize ? -rangeHeight : rangeHeight);
+                    // 至少滑动 10px 才能有效匹配
+                    if (rangeHeight > 10 && rangeRows.length !== lastRangeRows.length) {
+                        lastRangeRows = rangeRows;
+                        if (evnt.ctrlKey) {
+                            rangeRows.forEach((row) => {
+                                this.handleSelectRow({ row }, selectRecords.indexOf(row) === -1);
+                            });
+                        }
+                        else {
+                            this.setAllCheckboxRow(false);
+                            this.handleCheckedCheckboxRow(rangeRows, true, false);
+                        }
+                        triggerEvent('change', evnt);
+                    }
+                };
+                // 停止鼠标滚动
+                const stopMouseScroll = () => {
+                    clearTimeout(mouseScrollTimeout);
+                    mouseScrollTimeout = null;
+                };
+                // 开始鼠标滚动
+                const startMouseScroll = (evnt) => {
+                    stopMouseScroll();
+                    mouseScrollTimeout = setTimeout(() => {
+                        if (mouseScrollTimeout) {
+                            const { scrollLeft, scrollTop, clientHeight, scrollHeight } = bodyWrapperElem;
+                            const topSize = Math.ceil(mouseScrollSpaceSize * 50 / rowHeight);
+                            if (isMouseScrollDown) {
+                                if (scrollTop + clientHeight < scrollHeight) {
+                                    this.scrollTo(scrollLeft, scrollTop + topSize);
+                                    startMouseScroll(evnt);
+                                    handleChecked(evnt);
+                                }
+                                else {
+                                    stopMouseScroll();
+                                }
+                            }
+                            else {
+                                if (scrollTop) {
+                                    this.scrollTo(scrollLeft, scrollTop - topSize);
+                                    startMouseScroll(evnt);
+                                    handleChecked(evnt);
+                                }
+                                else {
+                                    stopMouseScroll();
+                                }
+                            }
+                        }
+                    }, 50);
+                };
+                addClass($el, 'drag--range');
+                document.onmousemove = evnt => {
+                    evnt.preventDefault();
+                    evnt.stopPropagation();
+                    const { clientY } = evnt;
+                    const { boundingTop } = getAbsolutePos(bodyWrapperElem);
+                    // 如果超过可视区，触发滚动
+                    if (clientY < boundingTop) {
+                        isMouseScrollDown = false;
+                        mouseScrollSpaceSize = boundingTop - clientY;
+                        if (!mouseScrollTimeout) {
+                            startMouseScroll(evnt);
+                        }
+                    }
+                    else if (clientY > boundingTop + bodyWrapperElem.clientHeight) {
+                        isMouseScrollDown = true;
+                        mouseScrollSpaceSize = clientY - boundingTop - bodyWrapperElem.clientHeight;
+                        if (!mouseScrollTimeout) {
+                            startMouseScroll(evnt);
+                        }
+                    }
+                    else if (mouseScrollTimeout) {
+                        stopMouseScroll();
+                    }
+                    handleChecked(evnt);
+                };
+                document.onmouseup = (evnt) => {
+                    stopMouseScroll();
+                    removeClass($el, 'drag--range');
+                    checkboxRangeElem.removeAttribute('style');
+                    document.onmousemove = domMousemove;
+                    document.onmouseup = domMouseup;
+                    triggerEvent('end', evnt);
+                };
+                triggerEvent('start', evnt);
+            }
+        }
+    }
+};

package/es/table/module/menu/mixin.js

@@ -0,0 +1,282 @@
+import XEUtils from 'xe-utils';
+import { VxeUI } from '../../../ui';
+import { getDomNode, getAbsolutePos, getEventTargetNode } from '../../../ui/src/dom';
+import { isEnableConf, hasChildrenList } from '../../../ui/src/utils';
+import { warnLog } from '../../../ui/src/log';
+const { menus } = VxeUI;
+export default {
+    methods: {
+        /**
+         * 关闭快捷菜单
+         */
+        _closeMenu() {
+            Object.assign(this.ctxMenuStore, {
+                visible: false,
+                selected: null,
+                selectChild: null,
+                showChild: false
+            });
+            return this.$nextTick();
+        },
+        // 处理菜单的移动
+        moveCtxMenu(evnt, keyCode, ctxMenuStore, property, operKey, operRest, menuList) {
+            let selectItem;
+            const selectIndex = XEUtils.findIndexOf(menuList, item => ctxMenuStore[property] === item);
+            if (keyCode === operKey) {
+                if (operRest && hasChildrenList(ctxMenuStore.selected)) {
+                    ctxMenuStore.showChild = true;
+                }
+                else {
+                    ctxMenuStore.showChild = false;
+                    ctxMenuStore.selectChild = null;
+                }
+            }
+            else if (keyCode === 38) {
+                for (let len = selectIndex - 1; len >= 0; len--) {
+                    if (menuList[len].visible !== false) {
+                        selectItem = menuList[len];
+                        break;
+                    }
+                }
+                ctxMenuStore[property] = selectItem || menuList[menuList.length - 1];
+            }
+            else if (keyCode === 40) {
+                for (let index = selectIndex + 1; index < menuList.length; index++) {
+                    if (menuList[index].visible !== false) {
+                        selectItem = menuList[index];
+                        break;
+                    }
+                }
+                ctxMenuStore[property] = selectItem || menuList[0];
+            }
+            else if (ctxMenuStore[property] && (keyCode === 13 || keyCode === 32)) {
+                this.ctxMenuLinkEvent(evnt, ctxMenuStore[property]);
+            }
+        },
+        /**
+         * 快捷菜单事件处理
+         */
+        handleGlobalContextmenuEvent(evnt) {
+            const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this;
+            const { selected } = editStore;
+            const layoutList = ['header', 'body', 'footer'];
+            if (isEnableConf(menuConfig) || contextMenu) {
+                if (ctxMenuStore.visible && $refs.ctxWrapper && getEventTargetNode(evnt, $refs.ctxWrapper.$el).flag) {
+                    evnt.preventDefault();
+                    return;
+                }
+                if (this._keyCtx) {
+                    const type = 'body';
+                    const params = { type, $grid: this.$xegrid, $table: this, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt };
+                    // 如果开启单元格区域
+                    if (mouseConfig && mouseOpts.area) {
+                        const activeArea = this.getActiveCellArea();
+                        if (activeArea && activeArea.row && activeArea.column) {
+                            params.row = activeArea.row;
+                            params.column = activeArea.column;
+                            this.handleOpenMenuEvent(evnt, type, params);
+                            return;
+                        }
+                    }
+                    else if (mouseConfig && mouseOpts.selected) {
+                        // 如果启用键盘导航且已选中单元格
+                        if (selected.row && selected.column) {
+                            params.row = selected.row;
+                            params.column = selected.column;
+                            this.handleOpenMenuEvent(evnt, type, params);
+                            return;
+                        }
+                    }
+                }
+                // 分别匹配表尾、内容、表尾的快捷菜单
+                for (let index = 0; index < layoutList.length; index++) {
+                    const layout = layoutList[index];
+                    const columnTargetNode = getEventTargetNode(evnt, this.$el, `vxe-${layout}--column`, (target) => {
+                        // target=td|th，直接向上找 table 去匹配即可
+                        return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId;
+                    });
+                    const params = { type: layout, $grid: this.$xegrid, $table: this, columns: this.visibleColumn.slice(0), $event: evnt };
+                    if (columnTargetNode.flag) {
+                        const cell = columnTargetNode.targetElem;
+                        const column = this.getColumnNode(cell).item;
+                        let typePrefix = `${layout}-`;
+                        Object.assign(params, { column, columnIndex: this.getColumnIndex(column), cell });
+                        if (layout === 'body') {
+                            const row = this.getRowNode(cell.parentNode).item;
+                            typePrefix = '';
+                            params.row = row;
+                            params.rowIndex = this.getRowIndex(row);
+                        }
+                        this.handleOpenMenuEvent(evnt, layout, params);
+                        // 在 v4 中废弃事件 cell-context-menu、header-cell-context-menu、footer-cell-context-menu
+                        if (this.$listeners[`${typePrefix}cell-context-menu`]) {
+                            if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                warnLog('vxe.error.delEvent', [`${typePrefix}cell-context-menu`, `${typePrefix}cell-menu`]);
+                            }
+                            this.emitEvent(`${typePrefix}cell-context-menu`, params, evnt);
+                        }
+                        else {
+                            this.emitEvent(`${typePrefix}cell-menu`, params, evnt);
+                        }
+                        return;
+                    }
+                    else if (getEventTargetNode(evnt, this.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === tId).flag) {
+                        if (ctxMenuOpts.trigger === 'cell') {
+                            evnt.preventDefault();
+                        }
+                        else {
+                            this.handleOpenMenuEvent(evnt, layout, params);
+                        }
+                        return;
+                    }
+                }
+            }
+            if ($refs.filterWrapper && !getEventTargetNode(evnt, $refs.filterWrapper.$el).flag) {
+                this.closeFilter();
+            }
+            this.closeMenu();
+        },
+        /**
+         * 显示快捷菜单
+         */
+        handleOpenMenuEvent(evnt, type, params) {
+            const { isCtxMenu, ctxMenuStore, ctxMenuOpts } = this;
+            const config = ctxMenuOpts[type];
+            const visibleMethod = ctxMenuOpts.visibleMethod;
+            if (config) {
+                const { options, disabled } = config;
+                if (disabled) {
+                    evnt.preventDefault();
+                }
+                else if (isCtxMenu && options && options.length) {
+                    params.options = options;
+                    this.preventEvent(evnt, 'event.showMenu', params, () => {
+                        if (!visibleMethod || visibleMethod(params)) {
+                            evnt.preventDefault();
+                            this.updateZindex();
+                            const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
+                            let top = evnt.clientY + scrollTop;
+                            let left = evnt.clientX + scrollLeft;
+                            const handleVisible = () => {
+                                Object.assign(ctxMenuStore, {
+                                    args: params,
+                                    visible: true,
+                                    list: options,
+                                    selected: null,
+                                    selectChild: null,
+                                    showChild: false,
+                                    style: {
+                                        zIndex: this.tZindex,
+                                        top: `${top}px`,
+                                        left: `${left}px`
+                                    }
+                                });
+                                this.$nextTick(() => {
+                                    const ctxElem = this.$refs.ctxWrapper.$el;
+                                    const clientHeight = ctxElem.clientHeight;
+                                    const clientWidth = ctxElem.clientWidth;
+                                    const { boundingTop, boundingLeft } = getAbsolutePos(ctxElem);
+                                    const offsetTop = boundingTop + clientHeight - visibleHeight;
+                                    const offsetLeft = boundingLeft + clientWidth - visibleWidth;
+                                    if (offsetTop > -10) {
+                                        ctxMenuStore.style.top = `${Math.max(scrollTop + 2, top - clientHeight - 2)}px`;
+                                    }
+                                    if (offsetLeft > -10) {
+                                        ctxMenuStore.style.left = `${Math.max(scrollLeft + 2, left - clientWidth - 2)}px`;
+                                    }
+                                });
+                            };
+                            const { keyboard, row, column } = params;
+                            if (keyboard && row && column) {
+                                this.scrollToRow(row, column).then(() => {
+                                    const cell = this.getCellElement(row, column);
+                                    const { boundingTop, boundingLeft } = getAbsolutePos(cell);
+                                    top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2);
+                                    left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2);
+                                    handleVisible();
+                                });
+                            }
+                            else {
+                                handleVisible();
+                            }
+                        }
+                        else {
+                            this.closeMenu();
+                        }
+                    });
+                }
+            }
+            this.closeFilter();
+        },
+        ctxMenuMouseoverEvent(evnt, item, child) {
+            const menuElem = evnt.currentTarget;
+            const ctxMenuStore = this.ctxMenuStore;
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            ctxMenuStore.selected = item;
+            ctxMenuStore.selectChild = child;
+            if (!child) {
+                ctxMenuStore.showChild = hasChildrenList(item);
+                if (ctxMenuStore.showChild) {
+                    this.$nextTick(() => {
+                        const childWrapperElem = menuElem.nextElementSibling;
+                        if (childWrapperElem) {
+                            const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(menuElem);
+                            const posTop = boundingTop + menuElem.offsetHeight;
+                            const posLeft = boundingLeft + menuElem.offsetWidth;
+                            let left = '';
+                            let right = '';
+                            // 是否超出右侧
+                            if (posLeft + childWrapperElem.offsetWidth > visibleWidth - 10) {
+                                left = 'auto';
+                                right = `${menuElem.offsetWidth}px`;
+                            }
+                            // 是否超出底部
+                            let top = '';
+                            let bottom = '';
+                            if (posTop + childWrapperElem.offsetHeight > visibleHeight - 10) {
+                                top = 'auto';
+                                bottom = '0';
+                            }
+                            childWrapperElem.style.left = left;
+                            childWrapperElem.style.right = right;
+                            childWrapperElem.style.top = top;
+                            childWrapperElem.style.bottom = bottom;
+                        }
+                    });
+                }
+            }
+        },
+        ctxMenuMouseoutEvent(evnt, item) {
+            const ctxMenuStore = this.ctxMenuStore;
+            if (!item.children) {
+                ctxMenuStore.selected = null;
+            }
+            ctxMenuStore.selectChild = null;
+        },
+        /**
+         * 快捷菜单点击事件
+         */
+        ctxMenuLinkEvent(evnt, menu) {
+            // 如果一级菜单有配置 code 则允许点击，否则不能点击
+            if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
+                const gMenuOpts = menus.get(menu.code);
+                const params = Object.assign({ menu, $grid: this.$xegrid, $table: this, $event: evnt }, this.ctxMenuStore.args);
+                if (gMenuOpts && gMenuOpts.menuMethod) {
+                    gMenuOpts.menuMethod(params, evnt);
+                }
+                // 在 v4 中废弃事件 context-menu-click
+                if (this.$listeners['context-menu-click']) {
+                    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                        warnLog('vxe.error.delEvent', ['context-menu-click', 'menu-click']);
+                    }
+                    this.emitEvent('context-menu-click', params, evnt);
+                }
+                else {
+                    this.emitEvent('menu-click', params, evnt);
+                }
+                this.closeMenu();
+            }
+        }
+    }
+};