vxe-pc-ui 3.17.7 → 3.17.8

package/es/table-select/src/table-select.js

@@ -1,7 +1,7 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI, getConfig, getIcon, globalEvents, getI18n, createEvent, renderEmptyElement, globalMixins } from '../../ui';
-import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom';
+import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupAppendElement } from '../../ui/src/dom';
 import { getOnName } from '../../ui/src/vn';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { createComponentLog } from '../../ui/src/log';
@@ -464,7 +464,7 @@ export default {
                     if (btnTransfer) {
                         if (panelElem) {
                             const { appendTo } = popupOpts;
-                            getPopupContainer(appendTo).appendChild(panelElem);
+                            getPopupAppendElement(appendTo).appendChild(panelElem);
                         }
                     }
                 }

package/es/tooltip/src/tooltip.js

@@ -2,7 +2,7 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, createEvent, globalMixins } from '../../ui';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
-import { toCssUnit } from '../../ui/src/dom';
+import { getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 function createReactData() {
     return {
@@ -108,6 +108,10 @@ export default {
         leaveDelay: {
             type: Number,
             default: () => getConfig().tooltip.leaveDelay
+        },
+        appendTo: {
+            type: [String, Function],
+            default: () => getConfig().tooltip.appendTo
         }
     },
     data() {
@@ -202,24 +206,55 @@ export default {
             const $xeTooltip = this;
             return $xeTooltip.handleVisible(target, content);
         },
-        updatePlacement() {
+        updateTipStyle() {
             const $xeTooltip = this;
+            const props = $xeTooltip;
             const reactData = $xeTooltip.reactData;
-            const { visible, tipTarget } = reactData;
-            let el = $xeTooltip.$refs.refElem;
-            if (visible && tipTarget && el) {
-                $xeTooltip.updateTipStyle();
+            const { placement, defaultPlacement, isArrow } = props;
+            const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData;
+            const panelElem = $xeTooltip.$refs.refElem;
+            if (!targetElem || !panelElem) {
+                return;
             }
-            return $xeTooltip.$nextTick().then(() => {
-                const { tipTarget } = reactData;
-                el = $xeTooltip.$refs.refElem;
-                if (tipTarget && el) {
-                    $xeTooltip.updateTipStyle();
-                    return $xeTooltip.$nextTick().then(() => {
-                        $xeTooltip.updateTipStyle();
-                    });
+            const targetRect = targetElem.getBoundingClientRect();
+            const targetWidth = targetElem.offsetWidth;
+            const targetHeight = targetElem.offsetHeight;
+            const panelWidth = panelElem.offsetWidth;
+            const targetLeft = targetRect.left;
+            const targetTop = targetRect.top;
+            // 支持特殊定位逻辑
+            let left = targetLeft;
+            let top = targetTop + targetHeight;
+            if (tipPos && (tipPos.oLeft || tipPos.oTop)) {
+                if (isArrow) {
+                    left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2;
                 }
+                else {
+                    left = tipPos.x + 1;
+                    top = tipPos.y + 1;
+                }
+            }
+            else {
+                left = targetLeft + (targetWidth - panelWidth) / 2;
+            }
+            const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                defaultTop: top,
+                defaultLeft: left,
+                placement: placement,
+                defaultPlacement: defaultPlacement,
+                teleportTo: true
+            });
+            const panelStyle = Object.assign(ppObj.style, {
+                zIndex: tipZindex
             });
+            tipStore.placement = ppObj.placement;
+            tipStore.style = panelStyle;
+            tipStore.arrowStyle.left = `${ppObj.arrowLeft}px`;
+        },
+        updatePlacement() {
+            const $xeTooltip = this;
+            $xeTooltip.updateTipStyle();
+            return $xeTooltip.$nextTick().then(() => $xeTooltip.updateTipStyle());
         },
         isActived() {
             const $xeTooltip = this;
@@ -231,102 +266,6 @@ export default {
             const reactData = $xeTooltip.reactData;
             reactData.tipActive = !!active;
         },
-        updateTipStyle() {
-            const $xeTooltip = this;
-            const props = $xeTooltip;
-            const reactData = $xeTooltip.reactData;
-            const { isArrow, placement, defaultPlacement } = props;
-            const { tipTarget: targetElem, tipStore, tipPos } = reactData;
-            let top = '';
-            let left = '';
-            let panelPlacement = 'bottom';
-            let arrowLeft = '';
-            const panelElem = $xeTooltip.$refs.refElem;
-            if (panelElem && targetElem) {
-                const documentElement = document.documentElement;
-                const bodyElem = document.body;
-                const targetWidth = targetElem.offsetWidth;
-                const targetHeight = targetElem.offsetHeight;
-                const panelHeight = panelElem.offsetHeight;
-                const panelWidth = panelElem.offsetWidth;
-                const targetRect = targetElem.getBoundingClientRect();
-                const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight;
-                const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth;
-                const marginSize = 6;
-                left = targetRect.left;
-                top = targetRect.top + targetHeight;
-                if (tipPos && (tipPos.oLeft || tipPos.oTop)) {
-                    if (isArrow) {
-                        left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2;
-                    }
-                    else {
-                        left = tipPos.x + 1;
-                        top = tipPos.y + 1;
-                    }
-                }
-                else {
-                    left = targetRect.left + (targetWidth - panelWidth) / 2;
-                }
-                if (placement === 'top') {
-                    panelPlacement = 'top';
-                    top = targetRect.top - panelHeight;
-                }
-                else if (!placement) {
-                    if (defaultPlacement === 'top') {
-                        panelPlacement = 'top';
-                        top = targetRect.top - panelHeight;
-                        // 如果上面不够放，则向下
-                        if (top < marginSize) {
-                            panelPlacement = 'bottom';
-                            top = targetRect.top + targetHeight;
-                        }
-                        // 如果下面不够放，则向上（优先）
-                        if (top + panelHeight + marginSize > visibleHeight) {
-                            panelPlacement = 'top';
-                            top = targetRect.top - panelHeight;
-                        }
-                    }
-                    else {
-                        // 如果下面不够放，则向上
-                        if (top + panelHeight + marginSize > visibleHeight) {
-                            panelPlacement = 'top';
-                            top = targetRect.top - panelHeight;
-                        }
-                        // 如果上面不够放，则向下（优先）
-                        if (top < marginSize) {
-                            panelPlacement = 'bottom';
-                            top = targetRect.top + targetHeight;
-                        }
-                    }
-                }
-                // 如果溢出右边
-                if (left + panelWidth + marginSize > visibleWidth) {
-                    left -= left + panelWidth + marginSize - visibleWidth;
-                }
-                // 如果溢出左边
-                if (left < marginSize) {
-                    left = marginSize;
-                }
-                // 箭头
-                if (left === targetRect.left) {
-                    if (targetWidth <= panelWidth) {
-                        arrowLeft = targetWidth / 2;
-                    }
-                }
-                else if (left < targetRect.left) {
-                    if (left + panelWidth > targetRect.left + targetWidth) {
-                        arrowLeft = (targetRect.left - left) + targetWidth / 2;
-                    }
-                    else {
-                        arrowLeft = (targetRect.left - left) + (panelWidth - (targetRect.left - left)) / 2;
-                    }
-                }
-                tipStore.placement = panelPlacement;
-                tipStore.style.top = `${top}px`;
-                tipStore.style.left = `${left}px`;
-                tipStore.arrowStyle.left = `${arrowLeft}px`;
-            }
-        },
         updateValue(value) {
             const $xeTooltip = this;
             const reactData = $xeTooltip.reactData;
@@ -336,10 +275,15 @@ export default {
                 $xeTooltip.emitModel(value);
             }
         },
-        updateZindex() {
+        updateZIndex() {
             const $xeTooltip = this;
+            const props = $xeTooltip;
             const reactData = $xeTooltip.reactData;
-            if (reactData.tipZindex < getLastZIndex()) {
+            const { zIndex } = props;
+            if (zIndex) {
+                reactData.tipZindex = XEUtils.toNumber(zIndex);
+            }
+            else if (reactData.tipZindex < getLastZIndex()) {
                 reactData.tipZindex = nextZIndex();
             }
         },
@@ -400,16 +344,17 @@ export default {
             const $xeTooltip = this;
             const props = $xeTooltip;
             const reactData = $xeTooltip.reactData;
+            const { appendTo } = props;
             const { tipStore } = reactData;
-            const el = $xeTooltip.$refs.refElem;
-            if (el) {
-                const parentNode = el.parentNode;
+            const panelElem = $xeTooltip.$refs.refElem;
+            if (panelElem) {
+                const parentNode = panelElem.parentNode;
                 if (!parentNode) {
-                    document.body.appendChild(el);
+                    getPopupAppendElement(appendTo).appendChild(panelElem);
                 }
             }
             $xeTooltip.updateValue(true);
-            $xeTooltip.updateZindex();
+            $xeTooltip.updateZIndex();
             tipStore.placement = 'top';
             tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex };
             tipStore.arrowStyle = { left: '50%' };
@@ -591,21 +536,21 @@ export default {
         }
         $xeTooltip.$nextTick(() => {
             const { trigger, content } = props;
-            const wrapperElem = $xeTooltip.$refs.refElem;
-            if (wrapperElem) {
-                const parentNode = wrapperElem.parentNode;
+            const panelElem = $xeTooltip.$refs.refElem;
+            if (panelElem) {
+                const parentNode = panelElem.parentNode;
                 if (parentNode) {
                     reactData.tipContent = content;
                     reactData.tipZindex = nextZIndex();
-                    XEUtils.arrayEach(wrapperElem.children, (elem, index) => {
+                    XEUtils.arrayEach(panelElem.children, (elem, index) => {
                         if (index) {
-                            parentNode.insertBefore(elem, wrapperElem);
+                            parentNode.insertBefore(elem, panelElem);
                             if (!reactData.target) {
                                 reactData.target = elem;
                             }
                         }
                     });
-                    parentNode.removeChild(wrapperElem);
+                    parentNode.removeChild(panelElem);
                     const { target } = reactData;
                     if (target) {
                         if (trigger === 'hover') {
@@ -627,7 +572,7 @@ export default {
         const $xeTooltip = this;
         const reactData = $xeTooltip.reactData;
         const { target } = reactData;
-        const wrapperElem = $xeTooltip.$refs.refElem;
+        const panelElem = $xeTooltip.$refs.refElem;
         if (target) {
             target.onmouseenter = null;
             target.onmouseleave = null;
@@ -637,10 +582,10 @@ export default {
         if (contentWrapperfEl) {
             contentWrapperfEl.removeEventListener('wheel', $xeTooltip.wheelEvent);
         }
-        if (wrapperElem) {
-            const parentNode = wrapperElem.parentNode;
+        if (panelElem) {
+            const parentNode = panelElem.parentNode;
             if (parentNode) {
-                parentNode.removeChild(wrapperElem);
+                parentNode.removeChild(panelElem);
             }
         }
     },

package/es/tree/src/tree.js

@@ -3413,11 +3413,11 @@ export default {
             const props = $xeTree;
             const slots = $xeTree.$scopedSlots;
             const internalData = $xeTree.internalData;
-            const { transform, emptyText } = props;
+            const { loading, transform, emptyText } = props;
             const { treeExpandedMaps } = internalData;
             const childrenField = $xeTree.computeChildrenField;
             const emptySlot = slots.empty;
-            if (!treeList.length) {
+            if (!loading && !treeList.length) {
                 return [
                     h('div', {
                         class: 'vxe-tree--empty-placeholder'

package/es/tree-select/src/tree-select.js

@@ -1,7 +1,7 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getI18n, getIcon, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui';
-import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom';
+import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupAppendElement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, deModelValue } from '../../ui/src/utils';
 import { createComponentLog } from '../../ui/src/log';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -548,7 +548,7 @@ export default {
                     if (btnTransfer) {
                         if (panelElem) {
                             const { appendTo } = popupOpts;
-                            getPopupContainer(appendTo).appendChild(panelElem);
+                            getPopupAppendElement(appendTo).appendChild(panelElem);
                         }
                     }
                 }

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "3.17.7";
+export const version = "3.17.8";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {
@@ -418,7 +418,8 @@ setConfig({
         theme: 'dark',
         enterDelay: 500,
         leaveDelay: 300,
-        isArrow: true
+        isArrow: true,
+        defaultPlacement: 'top'
     },
     transfer: {},
     tree: {
@@ -432,8 +433,7 @@ setConfig({
         tooltipConfig: {
             mode: 'tooltip',
             enterable: true,
-            leaveDelay: 300,
-            defaultPlacement: 'top'
+            leaveDelay: 300
         },
         dragConfig: {
             showIcon: true,

package/es/ui/src/dom.js

@@ -148,121 +148,154 @@ export function triggerEvent(targetElem, type) {
 export function isNodeElement(elem) {
     return elem && elem.nodeType === 1;
 }
+/**
+ * 通用定位计算
+ */
 export function updatePanelPlacement(targetElem, panelElem, options) {
-    const { placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({ teleportTo: false, marginSize: 18, isMinWidth: true }, options);
+    const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+        teleportTo: false,
+        marginSize: 18,
+        isMinWidth: true
+    }, options);
     let panelPlacement = 'bottom';
     let top = '';
     let bottom = '';
-    let left = '';
-    const right = '';
+    let left = 0;
     let minWidth = '';
+    let arrowLeft = '';
     const stys = {};
     if (panelElem && targetElem) {
-        const documentElement = document.documentElement;
-        const bodyElem = document.body;
-        const targetHeight = targetElem.offsetHeight;
-        const panelHeight = panelElem.offsetHeight;
-        const panelWidth = panelElem.offsetWidth;
-        const panelRect = panelElem.getBoundingClientRect();
-        const targetRect = targetElem.getBoundingClientRect();
-        const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight;
-        const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth;
-        minWidth = targetElem.offsetWidth;
-        if (teleportTo) {
-            left = targetRect.left;
-            top = targetRect.top + targetHeight;
-            if (placement === 'top') {
-                panelPlacement = 'top';
-                top = targetRect.top - panelHeight;
-            }
-            else if (!placement) {
-                if (defaultPlacement === 'top') {
+        const parentEl = panelElem.parentElement;
+        const parentWrapperEl = parentEl === document.body ? document.documentElement : parentEl;
+        if (parentWrapperEl) {
+            const targetWidth = targetElem.offsetWidth;
+            const targetHeight = targetElem.offsetHeight;
+            const panelHeight = panelElem.offsetHeight;
+            const panelWidth = panelElem.offsetWidth;
+            const parentWrapperRect = parentWrapperEl.getBoundingClientRect();
+            const panelRect = panelElem.getBoundingClientRect();
+            const targetRect = targetElem.getBoundingClientRect();
+            const visibleHeight = parentWrapperEl.clientHeight;
+            const visibleWidth = parentWrapperEl.clientWidth;
+            const offsetLeft = parentWrapperRect.left;
+            const offsetTop = parentWrapperRect.top;
+            const targetLeft = targetRect.left;
+            const targetTop = targetRect.top;
+            minWidth = targetElem.offsetWidth;
+            if (teleportTo) {
+                left = defaultLeft || (targetLeft);
+                top = defaultTop || (targetTop + targetHeight);
+                if (placement === 'top') {
                     panelPlacement = 'top';
-                    top = targetRect.top - panelHeight;
-                    // 如果上面不够放，则向下
-                    if (top < marginSize) {
-                        panelPlacement = 'bottom';
-                        top = targetRect.top + targetHeight;
-                    }
-                    // 如果下面不够放，则向上（优先）
-                    if (top + panelHeight + marginSize > visibleHeight) {
+                    top = targetTop - panelHeight;
+                }
+                else if (!placement) {
+                    if (defaultPlacement === 'top') {
                         panelPlacement = 'top';
-                        top = targetRect.top - panelHeight;
+                        top = targetTop - panelHeight;
+                        // 如果上面不够放，则向下
+                        if (top < marginSize) {
+                            panelPlacement = 'bottom';
+                            top = targetTop + targetHeight;
+                        }
+                        // 如果下面不够放，则向上（优先）
+                        if (top + panelHeight + marginSize > visibleHeight) {
+                            panelPlacement = 'top';
+                            top = targetTop - panelHeight;
+                        }
+                    }
+                    else {
+                        // 如果下面不够放，则向上
+                        if (top + panelHeight + marginSize > visibleHeight) {
+                            panelPlacement = 'top';
+                            top = targetTop - panelHeight;
+                        }
+                        // 如果上面不够放，则向下（优先）
+                        if (top < marginSize) {
+                            panelPlacement = 'bottom';
+                            top = targetTop + targetHeight;
+                        }
                     }
                 }
-                else {
+                // 如果溢出右边
+                if (left + panelWidth + marginSize > visibleWidth) {
+                    left -= left + panelWidth + marginSize - visibleWidth;
+                }
+                // 如果溢出左边
+                if (left < marginSize) {
+                    left = marginSize;
+                }
+                // 偏移
+                top -= offsetTop;
+                left -= offsetLeft;
+            }
+            else {
+                if (placement === 'top') {
+                    panelPlacement = 'top';
+                    bottom = targetHeight;
+                }
+                else if (!placement) {
                     // 如果下面不够放，则向上
-                    if (top + panelHeight + marginSize > visibleHeight) {
-                        panelPlacement = 'top';
-                        top = targetRect.top - panelHeight;
-                    }
-                    // 如果上面不够放，则向下（优先）
-                    if (top < marginSize) {
-                        panelPlacement = 'bottom';
-                        top = targetRect.top + targetHeight;
+                    top = targetHeight;
+                    if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
+                        // 如果上面不够放，则向下（优先）
+                        if (targetTop - targetHeight - panelHeight > marginSize) {
+                            panelPlacement = 'top';
+                            top = '';
+                            bottom = targetHeight;
+                        }
                     }
                 }
+                // 是否超出右侧
+                if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
+                    left = -(panelRect.left + panelRect.width + marginSize - visibleWidth);
+                }
             }
-            // 如果溢出右边
-            if (left + panelWidth + marginSize > visibleWidth) {
-                left -= left + panelWidth + marginSize - visibleWidth;
+            if (XEUtils.isNumber(top)) {
+                stys.top = toCssUnit(top);
             }
-            // 如果溢出左边
-            if (left < marginSize) {
-                left = marginSize;
+            if (XEUtils.isNumber(bottom)) {
+                stys.bottom = toCssUnit(bottom);
             }
-        }
-        else {
-            if (placement === 'top') {
-                panelPlacement = 'top';
-                bottom = targetHeight;
+            if (XEUtils.isNumber(left)) {
+                stys.left = toCssUnit(left);
             }
-            else if (!placement) {
-                // 如果下面不够放，则向上
-                top = targetHeight;
-                if (targetRect.top + targetHeight + panelHeight + marginSize > visibleHeight) {
-                    // 如果上面不够放，则向下（优先）
-                    if (targetRect.top - targetHeight - panelHeight > marginSize) {
-                        panelPlacement = 'top';
-                        top = '';
-                        bottom = targetHeight;
-                    }
+            if (isMinWidth && XEUtils.isNumber(minWidth)) {
+                stys.minWidth = toCssUnit(minWidth);
+            }
+            // 箭头
+            if (left === targetLeft) {
+                if (targetWidth <= panelWidth) {
+                    arrowLeft = targetWidth / 2;
                 }
             }
-            // 是否超出右侧
-            if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
-                left = -(panelRect.left + panelRect.width + marginSize - visibleWidth);
+            else if (left < targetLeft) {
+                if (left + panelWidth > targetLeft + targetWidth) {
+                    arrowLeft = (targetLeft - left) + targetWidth / 2;
+                }
+                else {
+                    arrowLeft = (targetLeft - left) + (panelWidth - (targetLeft - left)) / 2;
+                }
             }
         }
-        if (XEUtils.isNumber(top)) {
-            stys.top = toCssUnit(top);
-        }
-        if (XEUtils.isNumber(bottom)) {
-            stys.bottom = toCssUnit(bottom);
-        }
-        if (XEUtils.isNumber(left)) {
-            stys.left = toCssUnit(left);
-        }
-        if (XEUtils.isNumber(right)) {
-            stys.right = toCssUnit(right);
-        }
-        if (isMinWidth && XEUtils.isNumber(minWidth)) {
-            stys.minWidth = toCssUnit(minWidth);
-        }
     }
     return {
         top: top || 0,
         bottom: bottom || 0,
         left: left || 0,
-        right: right || 0,
+        arrowLeft: arrowLeft || 0,
         style: stys,
         placement: panelPlacement
     };
 }
 export function getPopupContainer(appendTo) {
     const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo;
+    return selectElem || 'body';
+}
+export function getPopupAppendElement(appendTo) {
+    const selectElem = getPopupContainer(appendTo);
     if (XEUtils.isString(selectElem)) {
         return document.querySelector(selectElem) || document.body;
     }
-    return selectElem || document.body;
+    return selectElem;
 }

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const uiVersion = `ui v${"3.17.7"}`;
+const uiVersion = `ui v${"3.17.8"}`;
 export function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';

package/es/vxe-button-group/style.css

@@ -22,6 +22,6 @@
 .vxe-button-group.is--vertical > .vxe-button.type--button, .vxe-button-group.is--vertical > .vxe-button--dropdown {
   margin-right: 0;
 }
-.vxe-button-group.is--vertical > .vxe-button + .vxe-button--dropdown, .vxe-button-group.is--vertical > .vxe-button--dropdown + .vxe-button {
+.vxe-button-group.is--vertical > .vxe-button.type--button + .vxe-button.type--button, .vxe-button-group.is--vertical > .vxe-button.type--button + .vxe-button--dropdown, .vxe-button-group.is--vertical > .vxe-button--dropdown + .vxe-button.type--button, .vxe-button-group.is--vertical > .vxe-button--dropdown + .vxe-button--dropdown {
   margin-left: 0;
 }

package/es/vxe-button-group/style.min.css

@@ -1 +1 @@
-.vxe-button-group{display:inline-flex}.vxe-button-group.is--vertical{flex-direction:column}.vxe-button-group.is--vertical>.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button.type--button{margin-top:var(--vxe-ui-base-margin-gap-default)}.vxe-button-group.is--vertical>.vxe-button--dropdown.size--medium,.vxe-button-group.is--vertical>.vxe-button.type--button.size--medium{margin-top:var(--vxe-ui-base-margin-gap-medium)}.vxe-button-group.is--vertical>.vxe-button--dropdown.size--small,.vxe-button-group.is--vertical>.vxe-button.type--button.size--small{margin-top:var(--vxe-ui-base-margin-gap-small)}.vxe-button-group.is--vertical>.vxe-button--dropdown.size--mini,.vxe-button-group.is--vertical>.vxe-button.type--button.size--mini{margin-top:var(--vxe-ui-base-margin-gap-mini)}.vxe-button-group.is--vertical>.vxe-button--dropdown:first-of-type,.vxe-button-group.is--vertical>.vxe-button.type--button:first-of-type{margin-top:0}.vxe-button-group.is--vertical>.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button.type--button{margin-right:0}.vxe-button-group.is--vertical>.vxe-button+.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button--dropdown+.vxe-button{margin-left:0}
+.vxe-button-group{display:inline-flex}.vxe-button-group.is--vertical{flex-direction:column}.vxe-button-group.is--vertical>.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button.type--button{margin-top:var(--vxe-ui-base-margin-gap-default)}.vxe-button-group.is--vertical>.vxe-button--dropdown.size--medium,.vxe-button-group.is--vertical>.vxe-button.type--button.size--medium{margin-top:var(--vxe-ui-base-margin-gap-medium)}.vxe-button-group.is--vertical>.vxe-button--dropdown.size--small,.vxe-button-group.is--vertical>.vxe-button.type--button.size--small{margin-top:var(--vxe-ui-base-margin-gap-small)}.vxe-button-group.is--vertical>.vxe-button--dropdown.size--mini,.vxe-button-group.is--vertical>.vxe-button.type--button.size--mini{margin-top:var(--vxe-ui-base-margin-gap-mini)}.vxe-button-group.is--vertical>.vxe-button--dropdown:first-of-type,.vxe-button-group.is--vertical>.vxe-button.type--button:first-of-type{margin-top:0}.vxe-button-group.is--vertical>.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button.type--button{margin-right:0}.vxe-button-group.is--vertical>.vxe-button--dropdown+.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button--dropdown+.vxe-button.type--button,.vxe-button-group.is--vertical>.vxe-button.type--button+.vxe-button--dropdown,.vxe-button-group.is--vertical>.vxe-button.type--button+.vxe-button.type--button{margin-left:0}

package/lib/button/src/button.js

@@ -327,7 +327,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           reactData.initialized = true;
           if (btnTransfer) {
             var appendTo = popupOpts.appendTo;
-            (0, _dom.getPopupContainer)(appendTo).appendChild(panelElem);
+            (0, _dom.getPopupAppendElement)(appendTo).appendChild(panelElem);
           }
         }
         internalData.showTime = setTimeout(function () {