vxe-pc-ui 4.11.41 → 4.11.43

package/lib/index.umd.js

@@ -3661,14 +3661,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.11.41"}`;
+const log_version = `ui v${"4.11.43"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.11.41";
+const ui_version = "4.11.43";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -3689,6 +3689,9 @@ setConfig({
   backtop: {
     showIcon: true,
     showContent: true,
+    showTop: true,
+    showBottom: true,
+    shadow: true,
     threshold: 20
   },
   badge: {},
@@ -3859,7 +3862,11 @@ setConfig({
     controls: true
   },
   layoutAside: {},
-  layoutBody: {},
+  layoutBody: {
+    backtopConfig: {
+      position: 'fixed'
+    }
+  },
   layoutContainer: {},
   layoutFooter: {},
   layoutHeader: {},
@@ -6057,594 +6064,646 @@ dynamicApp.use(VxeAvatar);
 index_esm_VxeUI.component(avatar);
 const Avatar = VxeAvatar;
 /* harmony default export */ var packages_avatar = (VxeAvatar);
-;// CONCATENATED MODULE: ./packages/backtop/src/backtop.ts
+;// CONCATENATED MODULE: ./packages/ui/src/utils.ts
+
+
+
+function isEnableConf(conf) {
+  return conf && conf.enabled !== false;
+}
+function nextZIndex() {
+  return index_esm.getNext();
+}
+function getLastZIndex() {
+  return index_esm.getCurrent();
+}
+function nextSubZIndex() {
+  return index_esm.getSubNext();
+}
+function getSubLastZIndex() {
+  return index_esm.getSubCurrent();
+}
+function getGlobalDefaultConfig(value, globalValue) {
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value)) {
+    return globalValue;
+  }
+  return value;
+}
+function getFuncText(content, args) {
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(content)) {
+    return '';
+  }
+  const translate = getConfig().translate;
+  return `${translate ? translate('' + content, args) : content}`;
+}
+/**
+ * 判断值为：'' | null | undefined 时都属于空值
+ */
+function eqEmptyValue(cellValue) {
+  return cellValue === null || cellValue === undefined || cellValue === '';
+}
+function handleBooleanDefaultValue(value) {
+  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(value) ? value : null;
+}
+;// CONCATENATED MODULE: ./packages/tooltip/src/tooltip.ts
 
 
 
 
 
 
-function createInternalData() {
-  return {
-    targetEl: null
-  };
-}
-function createReactData() {
-  return {
-    showBtn: false
-  };
-}
-/* harmony default export */ var backtop = (defineVxeComponent({
-  name: 'VxeBacktop',
+
+
+/* harmony default export */ var tooltip = (defineVxeComponent({
+  name: 'VxeTooltip',
   props: {
-    target: String,
+    modelValue: Boolean,
     size: {
       type: String,
-      default: () => getConfig().backtop.size || getConfig().size
+      default: () => getConfig().tooltip.size || getConfig().size
     },
-    circle: {
-      type: Boolean,
-      default: () => getConfig().backtop.circle
+    selector: String,
+    trigger: {
+      type: String,
+      default: () => getConfig().tooltip.trigger || 'hover'
     },
-    right: {
+    theme: {
+      type: String,
+      default: () => getConfig().tooltip.theme || 'dark'
+    },
+    content: {
       type: [String, Number],
-      default: () => getConfig().backtop.right
+      default: null
     },
-    bottom: {
+    useHTML: Boolean,
+    zIndex: [String, Number],
+    popupClassName: [String, Function],
+    width: {
       type: [String, Number],
-      default: () => getConfig().backtop.bottom
+      default: () => getConfig().tooltip.Width
     },
-    status: {
+    height: {
       type: [String, Number],
-      default: () => getConfig().backtop.status
+      default: () => getConfig().tooltip.height
     },
-    icon: {
-      type: String,
-      default: () => getConfig().backtop.icon
+    minWidth: {
+      type: [String, Number],
+      default: () => getConfig().tooltip.minWidth
     },
-    showIcon: {
-      type: Boolean,
-      default: () => getConfig().backtop.showIcon
+    minHeight: {
+      type: [String, Number],
+      default: () => getConfig().tooltip.minHeight
     },
-    content: {
+    maxWidth: {
       type: [String, Number],
-      default: () => getConfig().backtop.content
+      default: () => getConfig().tooltip.maxWidth
     },
-    showContent: {
+    maxHeight: {
+      type: [String, Number],
+      default: () => getConfig().tooltip.maxHeight
+    },
+    isArrow: {
       type: Boolean,
-      default: () => getConfig().backtop.showContent
+      default: () => getConfig().tooltip.isArrow
     },
-    zIndex: {
-      type: [String, Number],
-      default: () => getConfig().backtop.zIndex
+    enterable: {
+      type: Boolean,
+      default: () => getConfig().tooltip.enterable
     },
-    threshold: {
-      type: [String, Number],
-      default: () => getConfig().backtop.threshold
+    enterDelay: {
+      type: Number,
+      default: () => getConfig().tooltip.enterDelay
     },
-    position: {
-      type: String,
-      default: () => getConfig().backtop.position
+    leaveDelay: {
+      type: Number,
+      default: () => getConfig().tooltip.leaveDelay
     }
   },
-  emits: ['click'],
+  emits: ['update:modelValue'],
   setup(props, context) {
     const {
       slots,
       emit
     } = context;
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const {
       computeSize
     } = useSize(props);
-    const internalData = createInternalData();
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(createReactData());
-    const refMaps = {
-      refElem
-    };
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
+      target: null,
+      isUpdate: false,
+      visible: false,
+      tipPos: null,
+      tipContent: '',
+      tipActive: false,
+      tipTarget: null,
+      tipZindex: 0,
+      tipStore: {
+        style: {},
+        placement: '',
+        arrowStyle: {}
+      }
+    });
+    const internalData = {};
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const contentWrapperfElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const computeWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        right,
-        bottom,
-        zIndex
+        width,
+        height,
+        minHeight,
+        minWidth,
+        maxHeight,
+        maxWidth
       } = props;
       const stys = {};
-      if (right) {
-        stys.right = toCssUnit(right);
+      if (width) {
+        stys.width = toCssUnit(width);
       }
-      if (bottom) {
-        stys.bottom = toCssUnit(bottom);
+      if (height) {
+        stys.height = toCssUnit(height);
       }
-      if (zIndex) {
-        stys.zIndex = zIndex;
+      if (minWidth) {
+        stys.minWidth = toCssUnit(minWidth);
+      }
+      if (minHeight) {
+        stys.minHeight = toCssUnit(minHeight);
+      }
+      if (maxWidth) {
+        stys.maxWidth = toCssUnit(maxWidth);
+      }
+      if (maxHeight) {
+        stys.maxHeight = toCssUnit(maxHeight);
       }
       return stys;
     });
-    const computeMaps = {};
-    const $xeBacktop = {
+    const refMaps = {
+      refElem
+    };
+    const $xeTooltip = {
       xID,
       props,
       context,
-      internalData,
       reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $backtop: $xeBacktop
-      }, params));
+      internalData,
+      getRefMaps: () => refMaps
     };
-    const handleScrollEvent = evnt => {
+    let tooltipMethods = {};
+    const updateTipStyle = () => {
       const {
-        threshold
+        isArrow
       } = props;
-      const currentEl = evnt.currentTarget;
-      const scrollTop = currentEl.scrollTop;
-      reactData.showBtn = scrollTop > Math.max(1, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(threshold));
-    };
-    const handleToTop = () => {
-      const {
-        targetEl
-      } = internalData;
-      if (!targetEl) {
-        return;
-      }
-      const scrollTop = targetEl.scrollTop;
-      if (scrollTop > 0) {
-        requestAnimationFrame(handleToTop);
-        const currScrollTop = scrollTop - Math.max(12, scrollTop / 6);
-        targetEl.scrollTop = currScrollTop > 10 ? currScrollTop : 0;
-      }
-    };
-    const removeScrollEvent = () => {
-      const {
-        targetEl
-      } = internalData;
-      if (targetEl) {
-        targetEl.removeEventListener('scroll', handleScrollEvent);
-      }
-    };
-    const addScrollEvent = () => {
       const {
-        targetEl
-      } = internalData;
-      if (targetEl) {
-        targetEl.addEventListener('scroll', handleScrollEvent, {
-          passive: true
-        });
-      }
-    };
-    const handleTargetElement = () => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        const {
-          target
-        } = props;
-        if (!target) {
-          removeScrollEvent();
-          errLog('vxe.error.reqProp', ['target']);
-          return;
-        }
-        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(target)) {
-          const tEl = document.querySelector(target);
-          if (!tEl) {
-            errLog('vxe.error.errProp', [`target=${target}`, 'body']);
+        tipTarget: targetElem,
+        tipStore,
+        tipPos
+      } = reactData;
+      let top = '';
+      let left = '';
+      let panelPlacement = 'bottom';
+      let arrowLeft = '';
+      const panelElem = refElem.value;
+      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;
+        top = targetRect.top + targetHeight;
+        left = targetRect.left;
+        if (tipPos && tipPos.x && tipPos.y) {
+          if (isArrow) {
+            left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2;
+          } else {
+            left = tipPos.x + 1;
+            top = tipPos.y + 1;
           }
-          const {
-            targetEl
-          } = internalData;
-          if (targetEl !== tEl) {
-            removeScrollEvent();
-            internalData.targetEl = tEl;
-            addScrollEvent();
+        } else {
+          left = targetRect.left + (targetWidth - panelWidth) / 2;
+        }
+        // 如果下面不够放，则向上
+        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`;
+      }
     };
-    const clickEvent = evnt => {
-      handleToTop();
-      dispatchEvent('click', {}, evnt);
+    const updateValue = value => {
+      if (value !== reactData.visible) {
+        reactData.visible = value;
+        reactData.isUpdate = true;
+        emit('update:modelValue', value);
+      }
     };
-    const tagMethods = {
-      dispatchEvent
+    const updateZindex = () => {
+      if (reactData.tipZindex < getLastZIndex()) {
+        reactData.tipZindex = nextZIndex();
+      }
     };
-    const tagPrivateMethods = {};
-    Object.assign($xeBacktop, tagMethods, tagPrivateMethods);
-    const renderVN = () => {
-      const {
-        circle,
-        position,
-        status,
-        icon,
-        showIcon,
-        content,
-        showContent
-      } = props;
-      const {
-        showBtn
-      } = reactData;
-      const wrapperStyle = computeWrapperStyle.value;
-      const vSize = computeSize.value;
-      const defaultSlot = slots.default;
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refElem,
-        class: ['vxe-backtop', position === 'fixed' ? 'is--' + position : 'is--absolute', {
-          [`size--${vSize}`]: vSize,
-          [`theme--${status}`]: status,
-          'is--circle': circle,
-          'is--visible': showBtn
-        }],
-        style: wrapperStyle,
-        onClick: clickEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-backtop--inner'
-      }, [defaultSlot ? defaultSlot({}) : [showIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-backtop--icon'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: icon || getIcon().BACKTOP_TOP
-      })]) : renderEmptyElement($xeBacktop), showContent ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-backtop--content'
-      }, `${content || ''}`) : renderEmptyElement($xeBacktop)]])]);
+    const clickEvent = () => {
+      if (reactData.visible) {
+        tooltipMethods.close();
+      } else {
+        handleVisible(reactData.target || getSelectorEl(), props.content);
+      }
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.target, () => {
-      handleTargetElement();
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      handleTargetElement();
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
-      removeScrollEvent();
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, createReactData());
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, createInternalData());
-    });
-    $xeBacktop.renderVN = renderVN;
-    return $xeBacktop;
-  },
-  render() {
-    return this.renderVN();
-  }
-}));
-;// CONCATENATED MODULE: ./packages/backtop/index.ts
-
-
-
-const VxeBacktop = Object.assign({}, backtop, {
-  install(app) {
-    app.component(backtop.name, backtop);
-  }
-});
-dynamicApp.use(VxeBacktop);
-index_esm_VxeUI.component(backtop);
-const Backtop = VxeBacktop;
-/* harmony default export */ var packages_backtop = (VxeBacktop);
-;// CONCATENATED MODULE: ./packages/badge/src/badge.ts
-
-
-
-
-/* harmony default export */ var badge = (defineVxeComponent({
-  name: 'VxeBadge',
-  props: {
-    count: [String, Number],
-    dot: Boolean,
-    content: [String, Number],
-    size: {
-      type: String,
-      default: () => getConfig().badge.size || getConfig().size
-    }
-  },
-  emits: [],
-  setup(props, context) {
-    const {
-      emit,
-      slots
-    } = context;
-    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const {
-      computeSize
-    } = useSize(props);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
-    const refMaps = {
-      refElem
+    const targetMouseenterEvent = () => {
+      handleVisible(reactData.target || getSelectorEl(), props.content);
     };
-    const computeCountNum = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+    const targetMouseleaveEvent = () => {
       const {
-        count
+        trigger,
+        enterable,
+        leaveDelay
       } = props;
-      return count ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(count) : 0;
-    });
-    const computeMaps = {};
-    const $xeBadge = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $badge: $xeBadge
-      }, params));
+      reactData.tipActive = false;
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close();
+          }
+        }, leaveDelay);
+      } else {
+        tooltipMethods.close();
+      }
     };
-    const collapsePaneMethods = {
-      dispatchEvent
+    const wrapperMouseenterEvent = () => {
+      reactData.tipActive = true;
     };
-    const collapsePanePrivateMethods = {};
-    Object.assign($xeBadge, collapsePaneMethods, collapsePanePrivateMethods);
-    const renderVN = () => {
+    const wrapperMouseleaveEvent = () => {
       const {
-        dot,
-        content
+        trigger,
+        enterable,
+        leaveDelay
       } = props;
-      const vSize = computeSize.value;
-      const countNum = computeCountNum.value;
-      const defaultSlot = slots.default;
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refElem,
-        class: ['vxe-badge', {
-          [`size--${vSize}`]: vSize,
-          'is--dot': dot
-        }]
-      }, [defaultSlot || content ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-badge--content'
-      }, defaultSlot ? defaultSlot({}) : `${content || ''}`) : [], countNum ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-badge--count'
-      }, countNum > 99 ? '99+' : `${countNum}`) : renderEmptyElement($xeBadge)]);
+      reactData.tipActive = false;
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close();
+          }
+        }, leaveDelay);
+      }
     };
-    $xeBadge.renderVN = renderVN;
-    return $xeBadge;
-  },
-  render() {
-    return this.renderVN();
-  }
-}));
-;// CONCATENATED MODULE: ./packages/badge/index.ts
-
-
-
-const VxeBadge = Object.assign({}, badge, {
-  install(app) {
-    app.component(badge.name, badge);
-  }
-});
-dynamicApp.use(VxeBadge);
-index_esm_VxeUI.component(badge);
-const Badge = VxeBadge;
-/* harmony default export */ var packages_badge = (VxeBadge);
-;// CONCATENATED MODULE: ./packages/breadcrumb/src/breadcrumb-item.ts
-
-
-
-
-/* harmony default export */ var breadcrumb_item = (defineVxeComponent({
-  name: 'VxeBreadcrumbItem',
-  props: {
-    title: String,
-    routerLink: Object
-  },
-  emits: [],
-  setup(props, context) {
-    const {
-      slots
-    } = context;
-    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const $xeBreadcrumb = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeBreadcrumb', null);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
-    const refMaps = {
-      refElem
+    const showTip = () => {
+      const {
+        tipStore
+      } = reactData;
+      const el = refElem.value;
+      if (el) {
+        const parentNode = el.parentNode;
+        if (!parentNode) {
+          document.body.appendChild(el);
+        }
+      }
+      updateValue(true);
+      updateZindex();
+      tipStore.placement = 'top';
+      tipStore.style = {
+        width: 'auto',
+        left: 0,
+        top: 0,
+        zIndex: props.zIndex || reactData.tipZindex
+      };
+      tipStore.arrowStyle = {
+        left: '50%'
+      };
+      return tooltipMethods.updatePlacement();
     };
-    const computeSeparator = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      if ($xeBreadcrumb) {
-        return $xeBreadcrumb.props.separator;
+    const handleDelayFn = () => {
+      internalData.showDelayTip = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(() => {
+        if (reactData.tipActive) {
+          showTip();
+        }
+      }, props.enterDelay, {
+        leading: false,
+        trailing: true
+      });
+    };
+    const handleVisible = (target, content, evnt) => {
+      const contentSlot = slots.content;
+      if (!contentSlot && (content === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(content))) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
       }
-      return '';
-    });
-    const clickEvent = evnt => {
-      if ($xeBreadcrumb) {
-        const item = {
-          title: props.title,
-          routerLink: props.routerLink
-        };
-        $xeBreadcrumb.handleClickLink(evnt, item);
+      if (target) {
+        const {
+          showDelayTip
+        } = internalData;
+        const {
+          trigger,
+          enterDelay
+        } = props;
+        if (evnt) {
+          reactData.tipPos = {
+            x: evnt.clientX,
+            y: evnt.clientY,
+            oLeft: evnt.offsetX,
+            oTop: evnt.offsetY
+          };
+        } else {
+          reactData.tipPos = null;
+        }
+        reactData.tipActive = true;
+        reactData.tipTarget = target;
+        reactData.tipContent = content;
+        if (reactData.visible) {
+          return $xeTooltip.updatePlacement();
+        }
+        if (enterDelay && trigger === 'hover') {
+          if (showDelayTip) {
+            showDelayTip();
+          }
+        } else {
+          return showTip();
+        }
       }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
-    const computeMaps = {};
-    const $xeBreadcrumbItem = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const renderVN = () => {
+    const getSelectorEl = () => {
       const {
-        title,
-        routerLink
+        selector
       } = props;
-      const separator = computeSeparator.value;
-      const defaultSlot = slots.default;
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        ref: refElem,
-        class: 'vxe-breadcrumb-item',
-        onClick: clickEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-breadcrumb-item--content'
-      }, [routerLink ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
-        class: 'vxe-breadcrumb-item--content-link',
-        title,
-        to: routerLink
-      }, {
-        default() {
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: 'vxe-breadcrumb-item--content-text'
-          }, defaultSlot ? defaultSlot({}) : `${title || ''}`);
+      if (selector) {
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isElement(selector)) {
+          return selector;
         }
-      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-breadcrumb-item--content-text'
-      }, defaultSlot ? defaultSlot({}) : `${title || ''}`)]), separator ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-breadcrumb-item--separator'
-      }, `${separator}`) : renderEmptyElement($xeBreadcrumbItem)]);
-    };
-    $xeBreadcrumbItem.renderVN = renderVN;
-    return $xeBreadcrumbItem;
-  },
-  render() {
-    return this.renderVN();
-  }
-}));
-;// CONCATENATED MODULE: ./packages/breadcrumb/src/breadcrumb.ts
-
-
-
-
-
-/* harmony default export */ var breadcrumb = (defineVxeComponent({
-  name: 'VxeBreadcrumb',
-  props: {
-    separator: {
-      type: String,
-      default: () => getConfig().breadcrumb.separator
-    },
-    options: Array
-  },
-  emits: ['click'],
-  setup(props, context) {
-    const {
-      emit,
-      slots
-    } = context;
-    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
-    const refMaps = {
-      refElem
-    };
-    const computeMaps = {};
-    const $xeBreadcrumb = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(selector)) {
+          return document.querySelector(selector);
+        }
+      }
+      return null;
     };
-    const breadcrumbMethods = {
+    tooltipMethods = {
       dispatchEvent(type, params, evnt) {
         emit(type, createEvent(evnt, {
-          $breadcrumb: $xeBreadcrumb
+          $tooltip: $xeTooltip
         }, params));
+      },
+      openByEvent(evnt, target, content) {
+        return handleVisible(target || reactData.target || getSelectorEl(), content, evnt);
+      },
+      open(target, content) {
+        return handleVisible(target || reactData.target || getSelectorEl(), content);
+      },
+      close() {
+        reactData.tipPos = null;
+        reactData.tipTarget = null;
+        reactData.tipActive = false;
+        Object.assign(reactData.tipStore, {
+          style: {},
+          placement: '',
+          arrowStyle: null
+        });
+        updateValue(false);
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      toVisible(target, content) {
+        return handleVisible(target, content);
+      },
+      updatePlacement() {
+        const {
+          visible,
+          tipTarget
+        } = reactData;
+        let el = refElem.value;
+        if (visible && tipTarget && el) {
+          updateTipStyle();
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+          el = refElem.value;
+          if (tipTarget && el) {
+            updateTipStyle();
+            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+              updateTipStyle();
+            });
+          }
+        });
+      },
+      isActived() {
+        return reactData.tipActive;
+      },
+      setActived(active) {
+        reactData.tipActive = !!active;
       }
     };
-    const breadcrumbPrivateMethods = {
-      handleClickLink(evnt, option) {
-        breadcrumbMethods.dispatchEvent('click', {
-          option
-        }, evnt);
-      }
+    const wheelEvent = evnt => {
+      evnt.stopPropagation();
     };
-    Object.assign($xeBreadcrumb, breadcrumbMethods, breadcrumbPrivateMethods);
-    const renderItems = () => {
+    Object.assign($xeTooltip, tooltipMethods);
+    const renderContent = () => {
       const {
-        options
+        useHTML
       } = props;
-      if (options && options.length) {
-        return options.map(item => {
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(breadcrumb_item, {
-            title: item.title,
-            routerLink: item.routerLink
-          });
-        });
+      const {
+        tipContent
+      } = reactData;
+      const wrapperStyle = computeWrapperStyle.value;
+      const contentSlot = slots.content;
+      const contVNs = [];
+      if (contentSlot) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 1
+        }, vn_getSlotVNs(contentSlot({}))));
+      } else if (useHTML) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 2,
+          innerHTML: tipContent
+        }));
+      } else {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          key: 3
+        }, `${tipContent}`));
       }
-      return [];
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 3,
+        ref: contentWrapperfElem,
+        class: 'vxe-tooltip--content',
+        style: wrapperStyle
+      }, contVNs);
     };
     const renderVN = () => {
+      const {
+        popupClassName,
+        theme,
+        isArrow,
+        enterable
+      } = props;
+      const {
+        tipActive,
+        visible,
+        tipStore
+      } = reactData;
       const defaultSlot = slots.default;
+      const vSize = computeSize.value;
+      let ons;
+      if (enterable) {
+        ons = {
+          onMouseenter: wrapperMouseenterEvent,
+          onMouseleave: wrapperMouseleaveEvent
+        };
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: 'vxe-breadcrumb'
-      }, defaultSlot ? defaultSlot({}) : renderItems());
+        class: ['vxe-tooltip--wrapper', `theme--${theme}`, popupClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(popupClassName) ? popupClassName({
+          $tooltip: $xeTooltip
+        }) : popupClassName : '', {
+          [`size--${vSize}`]: vSize,
+          [`placement--${tipStore.placement}`]: tipStore.placement,
+          'is--enterable': enterable,
+          'is--visible': visible,
+          'is--arrow': isArrow,
+          'is--active': tipActive
+        }],
+        style: tipStore.style,
+        ...ons
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'tby',
+        class: 'vxe-tooltip--body'
+      }, [renderContent(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-tooltip--arrow',
+        style: tipStore.arrowStyle
+      })]), ...(defaultSlot ? vn_getSlotVNs(defaultSlot({})) : [])]);
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeBreadcrumb', $xeBreadcrumb);
-    $xeBreadcrumb.renderVN = renderVN;
-    return $xeBreadcrumb;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.enterDelay, () => {
+      handleDelayFn();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.content, val => {
+      reactData.tipContent = val;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
+      if (!reactData.isUpdate) {
+        if (val) {
+          handleVisible(reactData.target || getSelectorEl(), props.content);
+        } else {
+          tooltipMethods.close();
+        }
+      }
+      reactData.isUpdate = false;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      const contentWrapperfEl = contentWrapperfElem.value;
+      if (contentWrapperfEl) {
+        contentWrapperfEl.addEventListener('wheel', wheelEvent, {
+          passive: false
+        });
+      }
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const {
+          trigger,
+          content
+        } = props;
+        const wrapperElem = refElem.value;
+        if (wrapperElem) {
+          const parentNode = wrapperElem.parentNode;
+          if (parentNode) {
+            reactData.tipContent = content;
+            reactData.tipZindex = nextZIndex();
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(wrapperElem.children, (elem, index) => {
+              if (index) {
+                parentNode.insertBefore(elem, wrapperElem);
+                if (!reactData.target) {
+                  reactData.target = elem;
+                }
+              }
+            });
+            parentNode.removeChild(wrapperElem);
+            const {
+              target
+            } = reactData;
+            if (target) {
+              if (trigger === 'hover') {
+                target.onmouseenter = targetMouseenterEvent;
+                target.onmouseleave = targetMouseleaveEvent;
+              } else if (trigger === 'click') {
+                target.onclick = clickEvent;
+              }
+            }
+            if (props.modelValue) {
+              handleVisible(target || getSelectorEl(), content);
+            }
+          }
+        }
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      const {
+        target
+      } = reactData;
+      const wrapperElem = refElem.value;
+      if (target) {
+        target.onmouseenter = null;
+        target.onmouseleave = null;
+        target.onclick = null;
+      }
+      const contentWrapperfEl = contentWrapperfElem.value;
+      if (contentWrapperfEl) {
+        contentWrapperfEl.removeEventListener('wheel', wheelEvent);
+      }
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode;
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem);
+        }
+      }
+    });
+    handleDelayFn();
+    $xeTooltip.renderVN = renderVN;
+    return $xeTooltip;
   },
   render() {
     return this.renderVN();
   }
 }));
-;// CONCATENATED MODULE: ./packages/breadcrumb/index.ts
-
-
-
-const VxeBreadcrumb = Object.assign({}, breadcrumb, {
-  install(app) {
-    app.component(breadcrumb.name, breadcrumb);
-  }
-});
-dynamicApp.use(VxeBreadcrumb);
-index_esm_VxeUI.component(breadcrumb);
-const Breadcrumb = VxeBreadcrumb;
-/* harmony default export */ var packages_breadcrumb = (VxeBreadcrumb);
-;// CONCATENATED MODULE: ./packages/breadcrumb-item/index.ts
+;// CONCATENATED MODULE: ./packages/tooltip/index.ts
 
 
 
-const VxeBreadcrumbItem = Object.assign({}, breadcrumb_item, {
+const VxeTooltip = Object.assign({}, tooltip, {
   install(app) {
-    app.component(breadcrumb_item.name, breadcrumb_item);
+    app.component(tooltip.name, tooltip);
   }
 });
-dynamicApp.use(VxeBreadcrumbItem);
-index_esm_VxeUI.component(breadcrumb_item);
-const BreadcrumbItem = VxeBreadcrumbItem;
-/* harmony default export */ var packages_breadcrumb_item = (VxeBreadcrumbItem);
-;// CONCATENATED MODULE: ./packages/ui/src/utils.ts
-
+dynamicApp.use(VxeTooltip);
+index_esm_VxeUI.component(tooltip);
+const Tooltip = VxeTooltip;
+/* harmony default export */ var packages_tooltip = (VxeTooltip);
+;// CONCATENATED MODULE: ./packages/button/src/button.ts
 
 
-function isEnableConf(conf) {
-  return conf && conf.enabled !== false;
-}
-function nextZIndex() {
-  return index_esm.getNext();
-}
-function getLastZIndex() {
-  return index_esm.getCurrent();
-}
-function nextSubZIndex() {
-  return index_esm.getSubNext();
-}
-function getSubLastZIndex() {
-  return index_esm.getSubCurrent();
-}
-function getGlobalDefaultConfig(value, globalValue) {
-  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value)) {
-    return globalValue;
-  }
-  return value;
-}
-function getFuncText(content, args) {
-  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(content)) {
-    return '';
-  }
-  const translate = getConfig().translate;
-  return `${translate ? translate('' + content, args) : content}`;
-}
-/**
- * 判断值为：'' | null | undefined 时都属于空值
- */
-function eqEmptyValue(cellValue) {
-  return cellValue === null || cellValue === undefined || cellValue === '';
-}
-function handleBooleanDefaultValue(value) {
-  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(value) ? value : null;
-}
-;// CONCATENATED MODULE: ./packages/tooltip/src/tooltip.ts
 
 
 
@@ -6653,133 +6712,147 @@ function handleBooleanDefaultValue(value) {
 
 
 
-/* harmony default export */ var tooltip = (defineVxeComponent({
-  name: 'VxeTooltip',
+const VxeButtonComponent = defineVxeComponent({
+  name: 'VxeButton',
   props: {
-    modelValue: Boolean,
-    size: {
-      type: String,
-      default: () => getConfig().tooltip.size || getConfig().size
-    },
-    selector: String,
-    trigger: {
-      type: String,
-      default: () => getConfig().tooltip.trigger || 'hover'
-    },
-    theme: {
-      type: String,
-      default: () => getConfig().tooltip.theme || 'dark'
-    },
-    content: {
-      type: [String, Number],
-      default: null
-    },
-    useHTML: Boolean,
-    zIndex: [String, Number],
+    /**
+     * 按钮类型
+     */
+    type: String,
+    mode: String,
+    className: [String, Function],
     popupClassName: [String, Function],
-    width: {
-      type: [String, Number],
-      default: () => getConfig().tooltip.Width
-    },
-    height: {
-      type: [String, Number],
-      default: () => getConfig().tooltip.height
-    },
-    minWidth: {
-      type: [String, Number],
-      default: () => getConfig().tooltip.minWidth
-    },
-    minHeight: {
-      type: [String, Number],
-      default: () => getConfig().tooltip.minHeight
-    },
-    maxWidth: {
-      type: [String, Number],
-      default: () => getConfig().tooltip.maxWidth
+    /**
+     * 按钮尺寸
+     */
+    size: {
+      type: String,
+      default: () => getConfig().button.size || getConfig().size
     },
-    maxHeight: {
-      type: [String, Number],
-      default: () => getConfig().tooltip.maxHeight
+    zIndex: Number,
+    /**
+     * 用来标识这一项
+     */
+    name: [String, Number],
+    routerLink: Object,
+    /**
+     * 权限码
+     */
+    permissionCode: [String, Number],
+    /**
+     * 按钮内容
+     */
+    content: String,
+    /**
+     * 固定显示下拉面板的方向
+     */
+    placement: String,
+    /**
+     * 按钮状态
+     */
+    status: String,
+    /**
+     * 标题
+     */
+    title: String,
+    shadow: Boolean,
+    /**
+     * 按钮的前缀图标，属于 prefix-icon 的简写
+     */
+    icon: String,
+    iconRender: Object,
+    /**
+     * 按钮的前缀图标
+     */
+    prefixIcon: String,
+    prefixRender: Object,
+    /**
+     * 按钮的后缀图标
+     */
+    suffixIcon: String,
+    suffixRender: Object,
+    /**
+     * 圆角边框
+     */
+    round: Boolean,
+    /**
+     * 圆角按钮
+     */
+    circle: Boolean,
+    /**
+     * 是否禁用
+     */
+    disabled: Boolean,
+    /**
+     * 是否加载中
+     */
+    loading: Boolean,
+    trigger: {
+      type: String,
+      default: () => getConfig().button.trigger
     },
-    isArrow: {
+    align: String,
+    prefixTooltip: Object,
+    suffixTooltip: Object,
+    options: Array,
+    showDropdownIcon: {
       type: Boolean,
-      default: () => getConfig().tooltip.isArrow
+      default: () => getConfig().button.showDropdownIcon
     },
-    enterable: {
+    /**
+     * 在下拉面板关闭时销毁内容
+     */
+    destroyOnClose: {
       type: Boolean,
-      default: () => getConfig().tooltip.enterable
-    },
-    enterDelay: {
-      type: Number,
-      default: () => getConfig().tooltip.enterDelay
+      default: () => getConfig().button.destroyOnClose
     },
-    leaveDelay: {
-      type: Number,
-      default: () => getConfig().tooltip.leaveDelay
+    /**
+     * 是否将弹框容器插入于 body 内
+     */
+    transfer: {
+      type: Boolean,
+      default: null
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click', 'dropdownClick', 'contextmenu'],
   setup(props, context) {
     const {
       slots,
       emit
     } = context;
+    const $xeModal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeModal', null);
+    const $xeDrawer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeDrawer', null);
+    const $xeTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTable', null);
+    const $xeTree = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTree', null);
+    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
+    const $xeButtonGroup = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeButtonGroup', null);
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     const {
       computeSize
     } = useSize(props);
+    const {
+      computePermissionInfo
+    } = usePermission(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      target: null,
-      isUpdate: false,
-      visible: false,
-      tipPos: null,
-      tipContent: '',
-      tipActive: false,
-      tipTarget: null,
-      tipZindex: 0,
-      tipStore: {
-        style: {},
-        placement: '',
-        arrowStyle: {}
-      }
+      initialized: false,
+      visiblePanel: false,
+      isAniVisible: false,
+      isActivated: false,
+      panelIndex: 0,
+      panelStyle: {},
+      panelPlacement: ''
     });
-    const internalData = {};
+    const internalData = {
+      showTime: undefined,
+      tooltipTimeout: undefined
+    };
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const contentWrapperfElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const computeWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        width,
-        height,
-        minHeight,
-        minWidth,
-        maxHeight,
-        maxWidth
-      } = props;
-      const stys = {};
-      if (width) {
-        stys.width = toCssUnit(width);
-      }
-      if (height) {
-        stys.height = toCssUnit(height);
-      }
-      if (minWidth) {
-        stys.minWidth = toCssUnit(minWidth);
-      }
-      if (minHeight) {
-        stys.minHeight = toCssUnit(minHeight);
-      }
-      if (maxWidth) {
-        stys.maxWidth = toCssUnit(maxWidth);
-      }
-      if (maxHeight) {
-        stys.maxHeight = toCssUnit(maxHeight);
-      }
-      return stys;
-    });
+    const refButton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refBtnPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refMaps = {
       refElem
     };
-    const $xeTooltip = {
+    const $xeButton = {
       xID,
       props,
       context,
@@ -6787,450 +6860,677 @@ function handleBooleanDefaultValue(value) {
       internalData,
       getRefMaps: () => refMaps
     };
-    let tooltipMethods = {};
-    const updateTipStyle = () => {
+    let buttonMethods = {};
+    const computeBtnTransfer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        isArrow
+        transfer
       } = props;
-      const {
-        tipTarget: targetElem,
-        tipStore,
-        tipPos
-      } = reactData;
-      let top = '';
-      let left = '';
-      let panelPlacement = 'bottom';
-      let arrowLeft = '';
-      const panelElem = refElem.value;
-      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;
-        top = targetRect.top + targetHeight;
-        left = targetRect.left;
-        if (tipPos && tipPos.x && tipPos.y) {
-          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 (transfer === null) {
+        const globalTransfer = getConfig().button.transfer;
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
+          return globalTransfer;
         }
-        // 如果下面不够放，则向上
-        if (top + panelHeight + marginSize > visibleHeight) {
-          panelPlacement = 'top';
-          top = targetRect.top - panelHeight;
+        if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
+          return true;
         }
-        // 如果上面不够放，则向下（优先）
-        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`;
       }
-    };
-    const updateValue = value => {
-      if (value !== reactData.visible) {
-        reactData.visible = value;
-        reactData.isUpdate = true;
-        emit('update:modelValue', value);
+      return transfer;
+    });
+    const computeBtnDisabled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        disabled
+      } = props;
+      const permissionInfo = computePermissionInfo.value;
+      return disabled || permissionInfo.disabled;
+    });
+    const computeIsFormBtn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type
+      } = props;
+      if (type) {
+        return ['submit', 'reset', 'button'].indexOf(type) > -1;
       }
-    };
-    const updateZindex = () => {
-      if (reactData.tipZindex < getLastZIndex()) {
-        reactData.tipZindex = nextZIndex();
+      return false;
+    });
+    const computeBtnMode = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type,
+        mode
+      } = props;
+      if (mode === 'text' || type === 'text' || $xeButtonGroup && $xeButtonGroup.props.mode === 'text') {
+        return 'text';
       }
-    };
-    const clickEvent = () => {
-      if (reactData.visible) {
-        tooltipMethods.close();
-      } else {
-        handleVisible(reactData.target || getSelectorEl(), props.content);
+      return 'button';
+    });
+    const computeBtnStatus = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        status
+      } = props;
+      if (status) {
+        return status;
       }
-    };
-    const targetMouseenterEvent = () => {
-      handleVisible(reactData.target || getSelectorEl(), props.content);
-    };
-    const targetMouseleaveEvent = () => {
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.props.status;
+      }
+      return '';
+    });
+    const computeBtnAlign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        trigger,
-        enterable,
-        leaveDelay
+        align
       } = props;
-      reactData.tipActive = false;
-      if (enterable && trigger === 'hover') {
-        setTimeout(() => {
-          if (!reactData.tipActive) {
-            tooltipMethods.close();
-          }
-        }, leaveDelay);
-      } else {
-        tooltipMethods.close();
+      if (align) {
+        return align;
       }
-    };
-    const wrapperMouseenterEvent = () => {
-      reactData.tipActive = true;
-    };
-    const wrapperMouseleaveEvent = () => {
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.props.align;
+      }
+      return false;
+    });
+    const computeBtnRound = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        trigger,
-        enterable,
-        leaveDelay
+        round
       } = props;
-      reactData.tipActive = false;
-      if (enterable && trigger === 'hover') {
-        setTimeout(() => {
-          if (!reactData.tipActive) {
-            tooltipMethods.close();
-          }
-        }, leaveDelay);
+      if (round) {
+        return round;
       }
-    };
-    const showTip = () => {
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.props.round;
+      }
+      return false;
+    });
+    const computeBtnCircle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        tipStore
-      } = reactData;
-      const el = refElem.value;
-      if (el) {
-        const parentNode = el.parentNode;
-        if (!parentNode) {
-          document.body.appendChild(el);
-        }
+        circle
+      } = props;
+      if (circle) {
+        return circle;
       }
-      updateValue(true);
-      updateZindex();
-      tipStore.placement = 'top';
-      tipStore.style = {
-        width: 'auto',
-        left: 0,
-        top: 0,
-        zIndex: props.zIndex || reactData.tipZindex
-      };
-      tipStore.arrowStyle = {
-        left: '50%'
-      };
-      return tooltipMethods.updatePlacement();
-    };
-    const handleDelayFn = () => {
-      internalData.showDelayTip = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(() => {
-        if (reactData.tipActive) {
-          showTip();
-        }
-      }, props.enterDelay, {
-        leading: false,
-        trailing: true
-      });
-    };
-    const handleVisible = (target, content, evnt) => {
-      const contentSlot = slots.content;
-      if (!contentSlot && (content === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(content))) {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.props.circle;
       }
-      if (target) {
-        const {
-          showDelayTip
-        } = internalData;
-        const {
-          trigger,
-          enterDelay
-        } = props;
-        if (evnt) {
-          reactData.tipPos = {
-            x: evnt.clientX,
-            y: evnt.clientY,
-            oLeft: evnt.offsetX,
-            oTop: evnt.offsetY
-          };
-        } else {
-          reactData.tipPos = null;
-        }
-        reactData.tipActive = true;
-        reactData.tipTarget = target;
-        reactData.tipContent = content;
-        if (reactData.visible) {
-          return $xeTooltip.updatePlacement();
-        }
-        if (enterDelay && trigger === 'hover') {
-          if (showDelayTip) {
-            showDelayTip();
-          }
-        } else {
-          return showTip();
-        }
+      return false;
+    });
+    const computeDownBtnList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        options
+      } = props;
+      if (options) {
+        return options.filter(item => {
+          const {
+            permissionCode
+          } = item;
+          return !permissionCode || permission.checkVisible(permissionCode);
+        });
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-    };
-    const getSelectorEl = () => {
+      return [];
+    });
+    const computePrefixTipOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().button.prefixTooltip, props.prefixTooltip);
+    });
+    const computeSuffixTipOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().button.suffixTooltip, props.suffixTooltip);
+    });
+    const updateZindex = () => {
       const {
-        selector
+        zIndex
       } = props;
-      if (selector) {
-        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isElement(selector)) {
-          return selector;
-        }
-        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(selector)) {
-          return document.querySelector(selector);
-        }
+      if (zIndex) {
+        reactData.panelIndex = zIndex;
+      } else if (reactData.panelIndex < getLastZIndex()) {
+        reactData.panelIndex = nextZIndex();
       }
-      return null;
     };
-    tooltipMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $tooltip: $xeTooltip
-        }, params));
-      },
-      openByEvent(evnt, target, content) {
-        return handleVisible(target || reactData.target || getSelectorEl(), content, evnt);
-      },
-      open(target, content) {
-        return handleVisible(target || reactData.target || getSelectorEl(), content);
-      },
-      close() {
-        reactData.tipPos = null;
-        reactData.tipTarget = null;
-        reactData.tipActive = false;
-        Object.assign(reactData.tipStore, {
-          style: {},
-          placement: '',
-          arrowStyle: null
+    const updatePlacement = () => {
+      const {
+        placement
+      } = props;
+      const {
+        panelIndex
+      } = reactData;
+      const targetElem = refButton.value;
+      const panelElem = refBtnPanel.value;
+      const btnTransfer = computeBtnTransfer.value;
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          placement,
+          teleportTo: btnTransfer
         });
-        updateValue(false);
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      toVisible(target, content) {
-        return handleVisible(target, content);
-      },
-      updatePlacement() {
-        const {
-          visible,
-          tipTarget
-        } = reactData;
-        let el = refElem.value;
-        if (visible && tipTarget && el) {
-          updateTipStyle();
+        const panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(handleStyle);
+    };
+    const clickEvent = evnt => {
+      if ($xeButtonGroup) {
+        $xeButtonGroup.handleClick({
+          name: props.name
+        }, evnt);
+      }
+      dispatchEvent('click', {
+        $event: evnt
+      }, evnt);
+    };
+    const downBtnClickEvent = (params, option) => {
+      const {
+        $event
+      } = params;
+      hidePanel();
+      dispatchEvent('dropdown-click', {
+        name: option.name,
+        option
+      }, $event);
+    };
+    const mousedownDropdownEvent = evnt => {
+      const isLeftBtn = evnt.button === 0;
+      if (isLeftBtn) {
+        evnt.stopPropagation();
+      }
+    };
+    const clickDropdownEvent = evnt => {
+      const dropdownElem = evnt.currentTarget;
+      const panelElem = refBtnPanel.value;
+      const {
+        flag,
+        targetElem
+      } = getEventTargetNode(evnt, dropdownElem, 'vxe-button');
+      if (flag) {
+        if (panelElem) {
+          panelElem.dataset.active = 'N';
         }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          el = refElem.value;
-          if (tipTarget && el) {
-            updateTipStyle();
-            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-              updateTipStyle();
-            });
+        reactData.visiblePanel = false;
+        setTimeout(() => {
+          if (!panelElem || panelElem.dataset.active !== 'Y') {
+            reactData.isAniVisible = false;
           }
-        });
-      },
-      isActived() {
-        return reactData.tipActive;
-      },
-      setActived(active) {
-        reactData.tipActive = !!active;
+        }, 350);
+        dispatchEvent('dropdown-click', {
+          name: targetElem.getAttribute('name'),
+          option: null
+        }, evnt);
       }
     };
-    const wheelEvent = evnt => {
-      evnt.stopPropagation();
+    const mouseenterDropdownEvent = () => {
+      const panelElem = refBtnPanel.value;
+      if (panelElem) {
+        panelElem.dataset.active = 'Y';
+        reactData.isAniVisible = true;
+        setTimeout(() => {
+          if (panelElem.dataset.active === 'Y') {
+            reactData.visiblePanel = true;
+            updateZindex();
+            updatePlacement();
+            setTimeout(() => {
+              if (reactData.visiblePanel) {
+                updatePlacement();
+              }
+            }, 50);
+          }
+        }, 20);
+      }
     };
-    Object.assign($xeTooltip, tooltipMethods);
-    const renderContent = () => {
+    const mouseenterTargetEvent = evnt => {
       const {
-        useHTML
+        loading
       } = props;
-      const {
-        tipContent
-      } = reactData;
-      const wrapperStyle = computeWrapperStyle.value;
-      const contentSlot = slots.content;
-      const contVNs = [];
-      if (contentSlot) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: 1
-        }, vn_getSlotVNs(contentSlot({}))));
-      } else if (useHTML) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: 2,
-          innerHTML: tipContent
-        }));
-      } else {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          key: 3
-        }, `${tipContent}`));
+      const btnDisabled = computeBtnDisabled.value;
+      if (!(btnDisabled || loading)) {
+        openPanel();
+        mouseenterEvent(evnt);
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 3,
-        ref: contentWrapperfElem,
-        class: 'vxe-tooltip--content',
-        style: wrapperStyle
-      }, contVNs);
     };
-    const renderVN = () => {
+    const mouseleaveTargetEvent = evnt => {
+      hidePanel();
+      mouseleaveEvent(evnt);
+    };
+    const mouseenterEvent = evnt => {
+      dispatchEvent('mouseenter', {}, evnt);
+    };
+    const mouseleaveEvent = evnt => {
+      dispatchEvent('mouseleave', {}, evnt);
+    };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
+    const clickTargetEvent = evnt => {
       const {
-        popupClassName,
-        theme,
-        isArrow,
-        enterable
+        loading,
+        trigger
       } = props;
-      const {
-        tipActive,
-        visible,
-        tipStore
-      } = reactData;
-      const defaultSlot = slots.default;
-      const vSize = computeSize.value;
-      let ons;
-      if (enterable) {
-        ons = {
-          onMouseenter: wrapperMouseenterEvent,
-          onMouseleave: wrapperMouseleaveEvent
-        };
+      const btnDisabled = computeBtnDisabled.value;
+      if (!(btnDisabled || loading)) {
+        if (trigger === 'click') {
+          if (reactData.visiblePanel) {
+            hidePanel();
+          } else {
+            openPanel();
+          }
+        }
+        clickEvent(evnt);
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refElem,
-        class: ['vxe-tooltip--wrapper', `theme--${theme}`, popupClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(popupClassName) ? popupClassName({
-          $tooltip: $xeTooltip
-        }) : popupClassName : '', {
-          [`size--${vSize}`]: vSize,
-          [`placement--${tipStore.placement}`]: tipStore.placement,
-          'is--enterable': enterable,
-          'is--visible': visible,
-          'is--arrow': isArrow,
-          'is--active': tipActive
-        }],
-        style: tipStore.style,
-        ...ons
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'tby',
-        class: 'vxe-tooltip--body'
-      }, [renderContent(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tooltip--arrow',
-        style: tipStore.arrowStyle
-      })]), ...(defaultSlot ? vn_getSlotVNs(defaultSlot({})) : [])]);
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.enterDelay, () => {
-      handleDelayFn();
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.content, val => {
-      reactData.tipContent = val;
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
-      if (!reactData.isUpdate) {
-        if (val) {
-          handleVisible(reactData.target || getSelectorEl(), props.content);
-        } else {
-          tooltipMethods.close();
+    const openPanel = () => {
+      const {
+        trigger
+      } = props;
+      const panelElem = refBtnPanel.value;
+      if (panelElem) {
+        panelElem.dataset.active = 'Y';
+        if (!reactData.initialized) {
+          reactData.initialized = true;
         }
+        internalData.showTime = setTimeout(() => {
+          if (panelElem.dataset.active === 'Y') {
+            mouseenterDropdownEvent();
+          } else {
+            reactData.isAniVisible = false;
+          }
+        }, trigger === 'click' ? 50 : 250);
       }
-      reactData.isUpdate = false;
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      const contentWrapperfEl = contentWrapperfElem.value;
-      if (contentWrapperfEl) {
-        contentWrapperfEl.addEventListener('wheel', wheelEvent, {
-          passive: false
-        });
-      }
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        const {
-          trigger,
-          content
-        } = props;
-        const wrapperElem = refElem.value;
-        if (wrapperElem) {
-          const parentNode = wrapperElem.parentNode;
-          if (parentNode) {
-            reactData.tipContent = content;
-            reactData.tipZindex = nextZIndex();
-            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(wrapperElem.children, (elem, index) => {
-              if (index) {
-                parentNode.insertBefore(elem, wrapperElem);
-                if (!reactData.target) {
-                  reactData.target = elem;
-                }
-              }
-            });
-            parentNode.removeChild(wrapperElem);
-            const {
-              target
-            } = reactData;
-            if (target) {
-              if (trigger === 'hover') {
-                target.onmouseenter = targetMouseenterEvent;
-                target.onmouseleave = targetMouseleaveEvent;
-              } else if (trigger === 'click') {
-                target.onclick = clickEvent;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const hidePanel = () => {
+      const panelElem = refBtnPanel.value;
+      clearTimeout(internalData.showTime);
+      if (panelElem) {
+        panelElem.dataset.active = 'N';
+        setTimeout(() => {
+          if (panelElem.dataset.active !== 'Y') {
+            reactData.visiblePanel = false;
+            setTimeout(() => {
+              if (panelElem.dataset.active !== 'Y') {
+                reactData.isAniVisible = false;
               }
-            }
-            if (props.modelValue) {
-              handleVisible(target || getSelectorEl(), content);
-            }
+            }, 350);
           }
+        }, 100);
+      } else {
+        reactData.isAniVisible = false;
+        reactData.visiblePanel = false;
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const mouseleaveDropdownEvent = () => {
+      hidePanel();
+    };
+    const renderTooltipIcon = (tipOpts, type) => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_tooltip, {
+        useHTML: tipOpts.useHTML,
+        content: tipOpts.content,
+        enterable: tipOpts.enterable,
+        theme: tipOpts.theme
+      }, {
+        default() {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: `vxe-button--item vxe-button--tooltip-${type}-icon`
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+            class: tipOpts.icon || getIcon().BUTTON_TOOLTIP_ICON
+          })]);
         }
       });
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+    };
+    const renderContent = () => {
       const {
-        target
+        content,
+        suffixIcon,
+        loading,
+        prefixTooltip,
+        suffixTooltip,
+        suffixRender
+      } = props;
+      const prefixIcon = props.prefixIcon || props.icon;
+      const prefixRender = props.prefixRender || props.iconRender;
+      const prefixTipOpts = computePrefixTipOpts.value;
+      const suffixTipOpts = computeSuffixTipOpts.value;
+      const prefixIconSlot = slots.prefix || slots.icon;
+      const suffixIconSlot = slots.suffix;
+      const defaultSlot = slots.default;
+      const contVNs = [];
+      if (prefixTooltip) {
+        contVNs.push(renderTooltipIcon(prefixTipOpts, 'prefix'));
+      }
+      if (loading) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+          class: ['vxe-button--item vxe-button--loading-icon', getIcon().BUTTON_LOADING]
+        }));
+      } else if (prefixIconSlot) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: 'vxe-button--item vxe-button--custom-prefix-icon'
+        }, prefixIconSlot({})));
+      } else if (prefixRender) {
+        const compConf = renderer.get(prefixRender.name);
+        const pIconMethod = compConf ? compConf.renderButtonPrefix : null;
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: ['vxe-button--item vxe-button--custom-prefix-icon']
+        }, pIconMethod ? vn_getSlotVNs(pIconMethod(prefixRender, {
+          $button: $xeButton
+        })) : []));
+      } else if (prefixIcon) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+          class: ['vxe-button--item vxe-button--prefix-icon', prefixIcon]
+        }));
+      }
+      if (defaultSlot) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: 'vxe-button--item vxe-button--content'
+        }, defaultSlot({})));
+      } else if (content) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: 'vxe-button--item vxe-button--content'
+        }, getFuncText(content)));
+      }
+      if (suffixIconSlot) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: 'vxe-button--item vxe-button--custom-suffix-icon'
+        }, suffixIconSlot({})));
+      } else if (suffixRender) {
+        const compConf = renderer.get(suffixRender.name);
+        const sIconMethod = compConf ? compConf.renderButtonSuffix : null;
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: ['vxe-button--item vxe-button--custom-suffix-icon']
+        }, sIconMethod ? vn_getSlotVNs(sIconMethod(suffixRender, {
+          $button: $xeButton
+        })) : []));
+      } else if (suffixIcon) {
+        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+          class: ['vxe-button--item vxe-button--suffix-icon', suffixIcon]
+        }));
+      }
+      if (suffixTooltip) {
+        contVNs.push(renderTooltipIcon(suffixTipOpts, 'suffix'));
+      }
+      return contVNs;
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $button: $xeButton
+      }, params));
+    };
+    buttonMethods = {
+      dispatchEvent,
+      openPanel,
+      closePanel: hidePanel,
+      focus() {
+        const btnElem = refButton.value;
+        if (btnElem) {
+          btnElem.focus();
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const btnElem = refButton.value;
+        if (btnElem) {
+          btnElem.blur();
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
+    };
+    const handleGlobalMousewheelEvent = evnt => {
+      const panelElem = refBtnPanel.value;
+      if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
+        hidePanel();
+      }
+    };
+    const handleGlobalMousedownEvent = evnt => {
+      const btnDisabled = computeBtnDisabled.value;
+      const {
+        visiblePanel
       } = reactData;
-      const wrapperElem = refElem.value;
-      if (target) {
-        target.onmouseenter = null;
-        target.onmouseleave = null;
-        target.onclick = null;
+      if (!btnDisabled) {
+        const el = refElem.value;
+        const panelElem = refBtnPanel.value;
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          hidePanel();
+        }
       }
-      const contentWrapperfEl = contentWrapperfElem.value;
-      if (contentWrapperfEl) {
-        contentWrapperfEl.removeEventListener('wheel', wheelEvent);
+    };
+    const handleGlobalResizeEvent = () => {
+      const {
+        visiblePanel
+      } = reactData;
+      if (visiblePanel) {
+        updatePlacement();
       }
-      if (wrapperElem) {
-        const parentNode = wrapperElem.parentNode;
-        if (parentNode) {
-          parentNode.removeChild(wrapperElem);
+    };
+    Object.assign($xeButton, buttonMethods);
+    const renderVN = () => {
+      const {
+        className,
+        popupClassName,
+        trigger,
+        title,
+        routerLink,
+        type,
+        destroyOnClose,
+        name,
+        loading,
+        shadow,
+        showDropdownIcon
+      } = props;
+      const {
+        initialized,
+        isAniVisible,
+        visiblePanel
+      } = reactData;
+      const isFormBtn = computeIsFormBtn.value;
+      const btnMode = computeBtnMode.value;
+      const btnStatus = computeBtnStatus.value;
+      const btnRound = computeBtnRound.value;
+      const btnAlign = computeBtnAlign.value;
+      const btnCircle = computeBtnCircle.value;
+      const btnTransfer = computeBtnTransfer.value;
+      const btnDisabled = computeBtnDisabled.value;
+      const permissionInfo = computePermissionInfo.value;
+      const downBtnList = computeDownBtnList.value;
+      const vSize = computeSize.value;
+      const dropdownsSlot = slots.dropdowns;
+      if (!permissionInfo.visible) {
+        return renderEmptyElement($xeButton);
+      }
+      if (dropdownsSlot || downBtnList.length) {
+        const btnOns = {
+          onContextmenu: contextmenuEvent
+        };
+        const panelOns = {};
+        if (trigger === 'hover') {
+          // hover 触发
+          btnOns.onMouseenter = mouseenterTargetEvent;
+          btnOns.onMouseleave = mouseleaveTargetEvent;
+          panelOns.onMouseenter = mouseenterDropdownEvent;
+          panelOns.onMouseleave = mouseleaveDropdownEvent;
         }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refElem,
+          class: ['vxe-button--dropdown', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', {
+            [`size--${vSize}`]: vSize,
+            'is--active': visiblePanel
+          }]
+        }, [routerLink ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
+          ref: refButton,
+          class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', {
+            [`size--${vSize}`]: vSize,
+            [`theme--${btnStatus}`]: btnStatus,
+            'is--round': btnRound,
+            'is--circle': btnCircle,
+            'is--shadow': shadow,
+            'is--disabled': btnDisabled || loading,
+            'is--loading': loading
+          }],
+          title,
+          name,
+          type: isFormBtn ? type : 'button',
+          disabled: btnDisabled || loading,
+          to: routerLink,
+          onClick: clickTargetEvent,
+          ...btnOns
+        }, {
+          default() {
+            return renderContent().concat(showDropdownIcon ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+              class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+            })] : []);
+          }
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
+          ref: refButton,
+          class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', {
+            [`size--${vSize}`]: vSize,
+            [`theme--${btnStatus}`]: btnStatus,
+            'is--round': btnRound,
+            'is--circle': btnCircle,
+            'is--shadow': shadow,
+            'is--disabled': btnDisabled || loading,
+            'is--loading': loading
+          }],
+          title,
+          name,
+          type: isFormBtn ? type : 'button',
+          disabled: btnDisabled || loading,
+          onClick: clickTargetEvent,
+          ...btnOns
+        }, renderContent().concat(showDropdownIcon ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+          class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+        })] : [])), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.Teleport, {
+          to: 'body',
+          disabled: btnTransfer ? !initialized : true
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refBtnPanel,
+          class: ['vxe-button--dropdown-panel', popupClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(popupClassName) ? popupClassName({
+            $button: $xeButton
+          }) : popupClassName : '', {
+            [`size--${vSize}`]: vSize,
+            'is--transfer': btnTransfer,
+            'ani--leave': isAniVisible,
+            'ani--enter': visiblePanel
+          }],
+          placement: reactData.panelPlacement,
+          style: reactData.panelStyle,
+          ...panelOns
+        }, initialized && (visiblePanel || isAniVisible) ? [dropdownsSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-button--dropdown-wrapper',
+          onMousedown: mousedownDropdownEvent,
+          onClick: clickDropdownEvent
+        }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? dropdownsSlot({}) : []) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-button--dropdown-wrapper'
+        }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? downBtnList.map((option, i) => {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeButtonComponent, {
+            key: i,
+            type: option.type,
+            mode: option.mode || btnMode,
+            className: option.className,
+            name: option.name,
+            routerLink: option.routerLink,
+            permissionCode: option.permissionCode,
+            title: option.title,
+            content: option.content,
+            status: option.status,
+            icon: option.icon,
+            round: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(option.round) ? option.round : btnMode === 'text' ? false : btnRound,
+            circle: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(option.circle) ? option.circle : btnMode === 'text' ? false : btnCircle,
+            disabled: option.disabled,
+            loading: option.loading,
+            align: option.align,
+            onClick(params) {
+              downBtnClickEvent(params, option);
+            }
+          });
+        }) : [])] : [])])]);
+      }
+      if (routerLink) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
+          ref: refButton,
+          class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', {
+            [`size--${vSize}`]: vSize,
+            [`theme--${btnStatus}`]: btnStatus,
+            'is--round': btnRound,
+            'is--circle': btnCircle,
+            'is--shadow': shadow,
+            'is--disabled': btnDisabled || loading,
+            'is--loading': loading
+          }],
+          title,
+          name,
+          type: isFormBtn ? type : 'button',
+          disabled: btnDisabled || loading,
+          to: routerLink,
+          onClick: clickEvent,
+          onMouseenter: mouseenterEvent,
+          onMouseleave: mouseleaveEvent,
+          onContextmenu: contextmenuEvent
+        }, {
+          default() {
+            return renderContent();
+          }
+        });
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
+        ref: refButton,
+        class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+          $button: $xeButton
+        }) : className : '', {
+          [`size--${vSize}`]: vSize,
+          [`theme--${btnStatus}`]: btnStatus,
+          'is--round': btnRound,
+          'is--circle': btnCircle,
+          'is--shadow': shadow,
+          'is--disabled': btnDisabled || loading,
+          'is--loading': loading
+        }],
+        title,
+        name,
+        type: isFormBtn ? type : 'button',
+        disabled: btnDisabled || loading,
+        onClick: clickEvent,
+        onMouseenter: mouseenterEvent,
+        onMouseleave: mouseleaveEvent,
+        onContextmenu: contextmenuEvent
+      }, renderContent());
+    };
+    $xeButton.renderVN = renderVN;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      if (props.type === 'text') {
+        warnLog('vxe.error.delProp', ['[button] type=text', 'mode=text']);
       }
+      globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent);
+      globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent);
+      globalEvents.on($xeButton, 'resize', handleGlobalResizeEvent);
     });
-    handleDelayFn();
-    $xeTooltip.renderVN = renderVN;
-    return $xeTooltip;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+      globalEvents.off($xeButton, 'mousewheel');
+      globalEvents.off($xeButton, 'mousedown');
+      globalEvents.off($xeButton, 'resize');
+    });
+    return $xeButton;
   },
   render() {
     return this.renderVN();
   }
-}));
-;// CONCATENATED MODULE: ./packages/button/src/button.ts
+});
+/* harmony default export */ var src_button = (VxeButtonComponent);
+;// CONCATENATED MODULE: ./packages/button/index.ts
 
 
 
+const VxeButton = Object.assign({}, src_button, {
+  install(app) {
+    app.component(src_button.name, src_button);
+  }
+});
+dynamicApp.use(VxeButton);
+index_esm_VxeUI.component(src_button);
+const Button = VxeButton;
+/* harmony default export */ var packages_button = (VxeButton);
+;// CONCATENATED MODULE: ./packages/backtop/src/backtop.ts
 
 
 
@@ -7238,818 +7538,593 @@ function handleBooleanDefaultValue(value) {
 
 
 
-const VxeButtonComponent = defineVxeComponent({
-  name: 'VxeButton',
+
+function createInternalData() {
+  return {
+    targetEl: null
+  };
+}
+function createReactData() {
+  return {
+    showBtn: false,
+    backtopZindex: 0
+  };
+}
+/* harmony default export */ var backtop = (defineVxeComponent({
+  name: 'VxeBacktop',
   props: {
-    /**
-     * 按钮类型
-     */
-    type: String,
-    mode: String,
-    className: [String, Function],
-    popupClassName: [String, Function],
-    /**
-     * 按钮尺寸
-     */
+    target: String,
     size: {
       type: String,
-      default: () => getConfig().button.size || getConfig().size
-    },
-    zIndex: Number,
-    /**
-     * 用来标识这一项
-     */
-    name: [String, Number],
-    routerLink: Object,
-    /**
-     * 权限码
-     */
-    permissionCode: [String, Number],
-    /**
-     * 按钮内容
-     */
-    content: String,
-    /**
-     * 固定显示下拉面板的方向
-     */
-    placement: String,
-    /**
-     * 按钮状态
-     */
-    status: String,
-    /**
-     * 标题
-     */
-    title: String,
-    /**
-     * 按钮的前缀图标，属于 prefix-icon 的简写
-     */
-    icon: String,
-    iconRender: Object,
-    /**
-     * 按钮的前缀图标
-     */
-    prefixIcon: String,
-    prefixRender: Object,
-    /**
-     * 按钮的后缀图标
-     */
-    suffixIcon: String,
-    suffixRender: Object,
-    /**
-     * 圆角边框
-     */
-    round: Boolean,
-    /**
-     * 圆角按钮
-     */
-    circle: Boolean,
-    /**
-     * 是否禁用
-     */
-    disabled: Boolean,
-    /**
-     * 是否加载中
-     */
-    loading: Boolean,
-    trigger: {
-      type: String,
-      default: () => getConfig().button.trigger
-    },
-    align: String,
-    prefixTooltip: Object,
-    suffixTooltip: Object,
-    options: Array,
-    showDropdownIcon: {
-      type: Boolean,
-      default: () => getConfig().button.showDropdownIcon
+      default: () => getConfig().backtop.size || getConfig().size
     },
-    /**
-     * 在下拉面板关闭时销毁内容
-     */
-    destroyOnClose: {
+    circle: {
       type: Boolean,
-      default: () => getConfig().button.destroyOnClose
+      default: () => getConfig().backtop.circle
     },
-    /**
-     * 是否将弹框容器插入于 body 内
-     */
-    transfer: {
-      type: Boolean,
-      default: null
-    }
-  },
-  emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click', 'dropdownClick', 'contextmenu'],
-  setup(props, context) {
-    const {
-      slots,
-      emit
-    } = context;
-    const $xeModal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeModal', null);
-    const $xeDrawer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeDrawer', null);
-    const $xeTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTable', null);
-    const $xeTree = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTree', null);
-    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
-    const $xeButtonGroup = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeButtonGroup', null);
-    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const {
-      computeSize
-    } = useSize(props);
-    const {
-      computePermissionInfo
-    } = usePermission(props);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      initialized: false,
-      visiblePanel: false,
-      isAniVisible: false,
-      isActivated: false,
-      panelIndex: 0,
-      panelStyle: {},
-      panelPlacement: ''
-    });
-    const internalData = {
-      showTime: undefined,
-      tooltipTimeout: undefined
-    };
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refButton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refBtnPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refMaps = {
-      refElem
-    };
-    const $xeButton = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps
-    };
-    let buttonMethods = {};
-    const computeBtnTransfer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        transfer
-      } = props;
-      if (transfer === null) {
-        const globalTransfer = getConfig().button.transfer;
-        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
-          return true;
-        }
-      }
-      return transfer;
-    });
-    const computeBtnDisabled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        disabled
-      } = props;
-      const permissionInfo = computePermissionInfo.value;
-      return disabled || permissionInfo.disabled;
-    });
-    const computeIsFormBtn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        type
-      } = props;
-      if (type) {
-        return ['submit', 'reset', 'button'].indexOf(type) > -1;
-      }
-      return false;
-    });
-    const computeBtnMode = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        type,
-        mode
-      } = props;
-      if (mode === 'text' || type === 'text' || $xeButtonGroup && $xeButtonGroup.props.mode === 'text') {
-        return 'text';
-      }
-      return 'button';
-    });
-    const computeBtnStatus = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        status
-      } = props;
-      if (status) {
-        return status;
-      }
-      if ($xeButtonGroup) {
-        return $xeButtonGroup.props.status;
-      }
-      return '';
-    });
-    const computeBtnAlign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        align
-      } = props;
-      if (align) {
-        return align;
-      }
-      if ($xeButtonGroup) {
-        return $xeButtonGroup.props.align;
-      }
-      return false;
-    });
-    const computeBtnRound = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+    right: {
+      type: [String, Number],
+      default: () => getConfig().backtop.right
+    },
+    bottom: {
+      type: [String, Number],
+      default: () => getConfig().backtop.bottom
+    },
+    status: {
+      type: [String, Number],
+      default: () => getConfig().backtop.status
+    },
+    icon: {
+      type: String,
+      default: () => getConfig().backtop.icon
+    },
+    showIcon: {
+      type: Boolean,
+      default: () => getConfig().backtop.showIcon
+    },
+    content: {
+      type: [String, Number],
+      default: () => getConfig().backtop.content
+    },
+    showContent: {
+      type: Boolean,
+      default: () => getConfig().backtop.showContent
+    },
+    showTop: {
+      type: Boolean,
+      default: () => getConfig().backtop.showTop
+    },
+    showBottom: {
+      type: Boolean,
+      default: () => getConfig().backtop.showBottom
+    },
+    shadow: {
+      type: Boolean,
+      default: () => getConfig().backtop.shadow
+    },
+    zIndex: {
+      type: [String, Number],
+      default: () => getConfig().backtop.zIndex
+    },
+    threshold: {
+      type: [String, Number],
+      default: () => getConfig().backtop.threshold
+    },
+    position: {
+      type: String,
+      default: () => getConfig().backtop.position
+    }
+  },
+  emits: ['click'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const {
+      computeSize
+    } = useSize(props);
+    const internalData = createInternalData();
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(createReactData());
+    const refMaps = {
+      refElem
+    };
+    const computeWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        round
+        right,
+        bottom
       } = props;
-      if (round) {
-        return round;
-      }
-      if ($xeButtonGroup) {
-        return $xeButtonGroup.props.round;
-      }
-      return false;
-    });
-    const computeBtnCircle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        circle
-      } = props;
-      if (circle) {
-        return circle;
+        backtopZindex
+      } = reactData;
+      const stys = {};
+      if (right) {
+        stys.right = toCssUnit(right);
       }
-      if ($xeButtonGroup) {
-        return $xeButtonGroup.props.circle;
+      if (bottom) {
+        stys.bottom = toCssUnit(bottom);
       }
-      return false;
-    });
-    const computeDownBtnList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        options
-      } = props;
-      if (options) {
-        return options.filter(item => {
-          const {
-            permissionCode
-          } = item;
-          return !permissionCode || permission.checkVisible(permissionCode);
-        });
+      if (backtopZindex) {
+        stys.zIndex = backtopZindex;
       }
-      return [];
-    });
-    const computePrefixTipOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return Object.assign({}, getConfig().button.prefixTooltip, props.prefixTooltip);
-    });
-    const computeSuffixTipOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return Object.assign({}, getConfig().button.suffixTooltip, props.suffixTooltip);
+      return stys;
     });
-    const updateZindex = () => {
-      const {
-        zIndex
-      } = props;
-      if (zIndex) {
-        reactData.panelIndex = zIndex;
-      } else if (reactData.panelIndex < getLastZIndex()) {
-        reactData.panelIndex = nextZIndex();
-      }
+    const computeMaps = {};
+    const $xeBacktop = {
+      xID,
+      props,
+      context,
+      internalData,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
     };
-    const updatePlacement = () => {
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $backtop: $xeBacktop
+      }, params));
+    };
+    const showBacktop = () => {
       const {
-        placement
+        position,
+        zIndex
       } = props;
       const {
-        panelIndex
+        backtopZindex
       } = reactData;
-      const targetElem = refButton.value;
-      const panelElem = refBtnPanel.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const handleStyle = () => {
-        const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
-          teleportTo: btnTransfer
-        });
-        const panelStyle = Object.assign(ppObj.style, {
-          zIndex: panelIndex
-        });
-        reactData.panelStyle = panelStyle;
-        reactData.panelPlacement = ppObj.placement;
-      };
-      handleStyle();
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(handleStyle);
-    };
-    const clickEvent = evnt => {
-      if ($xeButtonGroup) {
-        $xeButtonGroup.handleClick({
-          name: props.name
-        }, evnt);
-      }
-      dispatchEvent('click', {
-        $event: evnt
-      }, evnt);
-    };
-    const downBtnClickEvent = (params, option) => {
-      const {
-        $event
-      } = params;
-      hidePanel();
-      dispatchEvent('dropdown-click', {
-        name: option.name,
-        option
-      }, $event);
-    };
-    const mousedownDropdownEvent = evnt => {
-      const isLeftBtn = evnt.button === 0;
-      if (isLeftBtn) {
-        evnt.stopPropagation();
-      }
-    };
-    const clickDropdownEvent = evnt => {
-      const dropdownElem = evnt.currentTarget;
-      const panelElem = refBtnPanel.value;
-      const {
-        flag,
-        targetElem
-      } = getEventTargetNode(evnt, dropdownElem, 'vxe-button');
-      if (flag) {
-        if (panelElem) {
-          panelElem.dataset.active = 'N';
+      if (zIndex) {
+        reactData.backtopZindex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(zIndex);
+      } else if (position === 'fixed') {
+        if (backtopZindex < getLastZIndex()) {
+          reactData.backtopZindex = nextZIndex();
         }
-        reactData.visiblePanel = false;
-        setTimeout(() => {
-          if (!panelElem || panelElem.dataset.active !== 'Y') {
-            reactData.isAniVisible = false;
-          }
-        }, 350);
-        dispatchEvent('dropdown-click', {
-          name: targetElem.getAttribute('name'),
-          option: null
-        }, evnt);
-      }
-    };
-    const mouseenterDropdownEvent = () => {
-      const panelElem = refBtnPanel.value;
-      if (panelElem) {
-        panelElem.dataset.active = 'Y';
-        reactData.isAniVisible = true;
-        setTimeout(() => {
-          if (panelElem.dataset.active === 'Y') {
-            reactData.visiblePanel = true;
-            updateZindex();
-            updatePlacement();
-            setTimeout(() => {
-              if (reactData.visiblePanel) {
-                updatePlacement();
-              }
-            }, 50);
-          }
-        }, 20);
-      }
-    };
-    const mouseenterTargetEvent = evnt => {
-      const {
-        loading
-      } = props;
-      const btnDisabled = computeBtnDisabled.value;
-      if (!(btnDisabled || loading)) {
-        openPanel();
-        mouseenterEvent(evnt);
       }
+      reactData.showBtn = true;
     };
-    const mouseleaveTargetEvent = evnt => {
-      hidePanel();
-      mouseleaveEvent(evnt);
-    };
-    const mouseenterEvent = evnt => {
-      dispatchEvent('mouseenter', {}, evnt);
-    };
-    const mouseleaveEvent = evnt => {
-      dispatchEvent('mouseleave', {}, evnt);
-    };
-    const contextmenuEvent = evnt => {
-      dispatchEvent('contextmenu', {}, evnt);
+    const hideBacktop = () => {
+      reactData.showBtn = false;
     };
-    const clickTargetEvent = evnt => {
-      const {
-        loading,
-        trigger
-      } = props;
-      const btnDisabled = computeBtnDisabled.value;
-      if (!(btnDisabled || loading)) {
-        if (trigger === 'click') {
-          if (reactData.visiblePanel) {
-            hidePanel();
-          } else {
-            openPanel();
-          }
-        }
-        clickEvent(evnt);
+    const handleScrollEvent = evnt => {
+      const {
+        threshold
+      } = props;
+      const currentEl = evnt.currentTarget;
+      const scrollTop = currentEl.scrollTop;
+      const showBtn = scrollTop > Math.max(1, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(threshold));
+      if (showBtn) {
+        showBacktop();
+      } else {
+        hideBacktop();
       }
     };
-    const openPanel = () => {
+    const handleToTop = () => {
       const {
-        trigger
-      } = props;
-      const panelElem = refBtnPanel.value;
-      if (panelElem) {
-        panelElem.dataset.active = 'Y';
-        if (!reactData.initialized) {
-          reactData.initialized = true;
-        }
-        internalData.showTime = setTimeout(() => {
-          if (panelElem.dataset.active === 'Y') {
-            mouseenterDropdownEvent();
-          } else {
-            reactData.isAniVisible = false;
-          }
-        }, trigger === 'click' ? 50 : 250);
+        targetEl
+      } = internalData;
+      if (!targetEl) {
+        return;
+      }
+      const scrollTop = targetEl.scrollTop;
+      if (scrollTop > 0) {
+        requestAnimationFrame(handleToTop);
+        const currScrollTop = scrollTop - Math.max(12, scrollTop / 6);
+        targetEl.scrollTop = currScrollTop > 10 ? currScrollTop : 0;
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
-    const hidePanel = () => {
-      const panelElem = refBtnPanel.value;
-      clearTimeout(internalData.showTime);
-      if (panelElem) {
-        panelElem.dataset.active = 'N';
-        setTimeout(() => {
-          if (panelElem.dataset.active !== 'Y') {
-            reactData.visiblePanel = false;
-            setTimeout(() => {
-              if (panelElem.dataset.active !== 'Y') {
-                reactData.isAniVisible = false;
-              }
-            }, 350);
-          }
-        }, 100);
-      } else {
-        reactData.isAniVisible = false;
-        reactData.visiblePanel = false;
+    const removeScrollEvent = () => {
+      const {
+        targetEl
+      } = internalData;
+      if (targetEl) {
+        targetEl.removeEventListener('scroll', handleScrollEvent);
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
-    const mouseleaveDropdownEvent = () => {
-      hidePanel();
+    const addScrollEvent = () => {
+      const {
+        targetEl
+      } = internalData;
+      if (targetEl) {
+        targetEl.addEventListener('scroll', handleScrollEvent, {
+          passive: true
+        });
+      }
     };
-    const renderTooltipIcon = (tipOpts, type) => {
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(tooltip, {
-        useHTML: tipOpts.useHTML,
-        content: tipOpts.content,
-        enterable: tipOpts.enterable,
-        theme: tipOpts.theme
-      }, {
-        default() {
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: `vxe-button--item vxe-button--tooltip-${type}-icon`
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-            class: tipOpts.icon || getIcon().BUTTON_TOOLTIP_ICON
-          })]);
+    const handleTargetElement = () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const {
+          target
+        } = props;
+        if (!target) {
+          removeScrollEvent();
+          errLog('vxe.error.reqProp', ['target']);
+          return;
+        }
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(target)) {
+          const tEl = document.querySelector(target);
+          if (!tEl) {
+            errLog('vxe.error.errProp', [`target=${target}`, 'body']);
+          }
+          const {
+            targetEl
+          } = internalData;
+          if (targetEl !== tEl) {
+            removeScrollEvent();
+            internalData.targetEl = tEl;
+            addScrollEvent();
+          }
         }
       });
     };
-    const renderContent = () => {
+    const clickEvent = evnt => {
+      handleToTop();
+      dispatchEvent('click', {}, evnt);
+    };
+    const tagMethods = {
+      dispatchEvent
+    };
+    const tagPrivateMethods = {};
+    Object.assign($xeBacktop, tagMethods, tagPrivateMethods);
+    const renderVN = () => {
       const {
+        circle,
+        position,
+        status,
+        icon,
+        showIcon,
         content,
-        suffixIcon,
-        loading,
-        prefixTooltip,
-        suffixTooltip,
-        suffixRender
+        showContent,
+        showTop,
+        showBottom,
+        shadow
       } = props;
-      const prefixIcon = props.prefixIcon || props.icon;
-      const prefixRender = props.prefixRender || props.iconRender;
-      const prefixTipOpts = computePrefixTipOpts.value;
-      const suffixTipOpts = computeSuffixTipOpts.value;
-      const prefixIconSlot = slots.prefix || slots.icon;
-      const suffixIconSlot = slots.suffix;
+      const {
+        showBtn
+      } = reactData;
+      const wrapperStyle = computeWrapperStyle.value;
+      const vSize = computeSize.value;
       const defaultSlot = slots.default;
-      const contVNs = [];
-      if (prefixTooltip) {
-        contVNs.push(renderTooltipIcon(prefixTipOpts, 'prefix'));
-      }
-      if (loading) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-          class: ['vxe-button--item vxe-button--loading-icon', getIcon().BUTTON_LOADING]
-        }));
-      } else if (prefixIconSlot) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: 'vxe-button--item vxe-button--custom-prefix-icon'
-        }, prefixIconSlot({})));
-      } else if (prefixRender) {
-        const compConf = renderer.get(prefixRender.name);
-        const pIconMethod = compConf ? compConf.renderButtonPrefix : null;
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: ['vxe-button--item vxe-button--custom-prefix-icon']
-        }, pIconMethod ? vn_getSlotVNs(pIconMethod(prefixRender, {
-          $button: $xeButton
-        })) : []));
-      } else if (prefixIcon) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-          class: ['vxe-button--item vxe-button--prefix-icon', prefixIcon]
-        }));
-      }
-      if (defaultSlot) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: 'vxe-button--item vxe-button--content'
-        }, defaultSlot({})));
-      } else if (content) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: 'vxe-button--item vxe-button--content'
-        }, getFuncText(content)));
-      }
-      if (suffixIconSlot) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: 'vxe-button--item vxe-button--custom-suffix-icon'
-        }, suffixIconSlot({})));
-      } else if (suffixRender) {
-        const compConf = renderer.get(suffixRender.name);
-        const sIconMethod = compConf ? compConf.renderButtonSuffix : null;
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: ['vxe-button--item vxe-button--custom-suffix-icon']
-        }, sIconMethod ? vn_getSlotVNs(sIconMethod(suffixRender, {
-          $button: $xeButton
-        })) : []));
-      } else if (suffixIcon) {
-        contVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-          class: ['vxe-button--item vxe-button--suffix-icon', suffixIcon]
-        }));
-      }
-      if (suffixTooltip) {
-        contVNs.push(renderTooltipIcon(suffixTipOpts, 'suffix'));
-      }
-      return contVNs;
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        class: ['vxe-backtop', position === 'fixed' ? 'is--' + position : 'is--absolute', {
+          [`size--${vSize}`]: vSize,
+          'is--visible': showBtn
+        }],
+        style: wrapperStyle
+      }, [showTop && topSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-backtop--top-wrapper'
+      }, topSlot({})) : renderEmptyElement($xeBacktop), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-backtop--content-wrapper',
+        onClick: clickEvent
+      }, [defaultSlot ? defaultSlot({}) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_button, {
+        circle,
+        status,
+        shadow,
+        icon: showIcon ? icon || getIcon().BACKTOP_TOP : '',
+        content: showContent ? content : ''
+      })]]), showBottom && bottomSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-backtop--bottom-wrapper'
+      }, bottomSlot({})) : renderEmptyElement($xeBacktop)]);
+    };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.target, () => {
+      handleTargetElement();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      handleTargetElement();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      removeScrollEvent();
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, createReactData());
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, createInternalData());
+    });
+    $xeBacktop.renderVN = renderVN;
+    return $xeBacktop;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/backtop/index.ts
+
+
+
+const VxeBacktop = Object.assign({}, backtop, {
+  install(app) {
+    app.component(backtop.name, backtop);
+  }
+});
+dynamicApp.use(VxeBacktop);
+index_esm_VxeUI.component(backtop);
+const Backtop = VxeBacktop;
+/* harmony default export */ var packages_backtop = (VxeBacktop);
+;// CONCATENATED MODULE: ./packages/badge/src/badge.ts
+
+
+
+
+/* harmony default export */ var badge = (defineVxeComponent({
+  name: 'VxeBadge',
+  props: {
+    count: [String, Number],
+    dot: Boolean,
+    content: [String, Number],
+    size: {
+      type: String,
+      default: () => getConfig().badge.size || getConfig().size
+    }
+  },
+  emits: [],
+  setup(props, context) {
+    const {
+      emit,
+      slots
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const {
+      computeSize
+    } = useSize(props);
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
+    const refMaps = {
+      refElem
+    };
+    const computeCountNum = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        count
+      } = props;
+      return count ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(count) : 0;
+    });
+    const computeMaps = {};
+    const $xeBadge = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
     };
     const dispatchEvent = (type, params, evnt) => {
       emit(type, createEvent(evnt, {
-        $button: $xeButton
+        $badge: $xeBadge
       }, params));
     };
-    buttonMethods = {
-      dispatchEvent,
-      openPanel,
-      closePanel: hidePanel,
-      focus() {
-        const btnElem = refButton.value;
-        if (btnElem) {
-          btnElem.focus();
-        }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      blur() {
-        const btnElem = refButton.value;
-        if (btnElem) {
-          btnElem.blur();
-        }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      }
-    };
-    const handleGlobalMousewheelEvent = evnt => {
-      const panelElem = refBtnPanel.value;
-      if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
-        hidePanel();
-      }
-    };
-    const handleGlobalMousedownEvent = evnt => {
-      const btnDisabled = computeBtnDisabled.value;
-      const {
-        visiblePanel
-      } = reactData;
-      if (!btnDisabled) {
-        const el = refElem.value;
-        const panelElem = refBtnPanel.value;
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
-        if (visiblePanel && !reactData.isActivated) {
-          hidePanel();
-        }
-      }
-    };
-    const handleGlobalResizeEvent = () => {
-      const {
-        visiblePanel
-      } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
+    const collapsePaneMethods = {
+      dispatchEvent
     };
-    Object.assign($xeButton, buttonMethods);
+    const collapsePanePrivateMethods = {};
+    Object.assign($xeBadge, collapsePaneMethods, collapsePanePrivateMethods);
     const renderVN = () => {
       const {
-        className,
-        popupClassName,
-        trigger,
-        title,
-        routerLink,
-        type,
-        destroyOnClose,
-        name,
-        loading,
-        showDropdownIcon
+        dot,
+        content
       } = props;
-      const {
-        initialized,
-        isAniVisible,
-        visiblePanel
-      } = reactData;
-      const isFormBtn = computeIsFormBtn.value;
-      const btnMode = computeBtnMode.value;
-      const btnStatus = computeBtnStatus.value;
-      const btnRound = computeBtnRound.value;
-      const btnAlign = computeBtnAlign.value;
-      const btnCircle = computeBtnCircle.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const btnDisabled = computeBtnDisabled.value;
-      const permissionInfo = computePermissionInfo.value;
-      const downBtnList = computeDownBtnList.value;
       const vSize = computeSize.value;
-      const dropdownsSlot = slots.dropdowns;
-      if (!permissionInfo.visible) {
-        return renderEmptyElement($xeButton);
-      }
-      if (dropdownsSlot || downBtnList.length) {
-        const btnOns = {
-          onContextmenu: contextmenuEvent
-        };
-        const panelOns = {};
-        if (trigger === 'hover') {
-          // hover 触发
-          btnOns.onMouseenter = mouseenterTargetEvent;
-          btnOns.onMouseleave = mouseleaveTargetEvent;
-          panelOns.onMouseenter = mouseenterDropdownEvent;
-          panelOns.onMouseleave = mouseleaveDropdownEvent;
-        }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          ref: refElem,
-          class: ['vxe-button--dropdown', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
-            $button: $xeButton
-          }) : className : '', {
-            [`size--${vSize}`]: vSize,
-            'is--active': visiblePanel
-          }]
-        }, [routerLink ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
-          ref: refButton,
-          class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
-            $button: $xeButton
-          }) : className : '', {
-            [`size--${vSize}`]: vSize,
-            [`theme--${btnStatus}`]: btnStatus,
-            'is--round': btnRound,
-            'is--circle': btnCircle,
-            'is--disabled': btnDisabled || loading,
-            'is--loading': loading
-          }],
-          title,
-          name,
-          type: isFormBtn ? type : 'button',
-          disabled: btnDisabled || loading,
-          to: routerLink,
-          onClick: clickTargetEvent,
-          ...btnOns
-        }, {
-          default() {
-            return renderContent().concat(showDropdownIcon ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-              class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-            })] : []);
-          }
-        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
-          ref: refButton,
-          class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
-            $button: $xeButton
-          }) : className : '', {
-            [`size--${vSize}`]: vSize,
-            [`theme--${btnStatus}`]: btnStatus,
-            'is--round': btnRound,
-            'is--circle': btnCircle,
-            'is--disabled': btnDisabled || loading,
-            'is--loading': loading
-          }],
-          title,
-          name,
-          type: isFormBtn ? type : 'button',
-          disabled: btnDisabled || loading,
-          onClick: clickTargetEvent,
-          ...btnOns
-        }, renderContent().concat(showDropdownIcon ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-          class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-        })] : [])), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.Teleport, {
-          to: 'body',
-          disabled: btnTransfer ? !initialized : true
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          ref: refBtnPanel,
-          class: ['vxe-button--dropdown-panel', popupClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(popupClassName) ? popupClassName({
-            $button: $xeButton
-          }) : popupClassName : '', {
-            [`size--${vSize}`]: vSize,
-            'is--transfer': btnTransfer,
-            'ani--leave': isAniVisible,
-            'ani--enter': visiblePanel
-          }],
-          placement: reactData.panelPlacement,
-          style: reactData.panelStyle,
-          ...panelOns
-        }, initialized && (visiblePanel || isAniVisible) ? [dropdownsSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-button--dropdown-wrapper',
-          onMousedown: mousedownDropdownEvent,
-          onClick: clickDropdownEvent
-        }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? dropdownsSlot({}) : []) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-button--dropdown-wrapper'
-        }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? downBtnList.map((option, i) => {
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeButtonComponent, {
-            key: i,
-            type: option.type,
-            mode: option.mode || btnMode,
-            className: option.className,
-            name: option.name,
-            routerLink: option.routerLink,
-            permissionCode: option.permissionCode,
-            title: option.title,
-            content: option.content,
-            status: option.status,
-            icon: option.icon,
-            round: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(option.round) ? option.round : btnMode === 'text' ? false : btnRound,
-            circle: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(option.circle) ? option.circle : btnMode === 'text' ? false : btnCircle,
-            disabled: option.disabled,
-            loading: option.loading,
-            align: option.align,
-            onClick(params) {
-              downBtnClickEvent(params, option);
-            }
-          });
-        }) : [])] : [])])]);
+      const countNum = computeCountNum.value;
+      const defaultSlot = slots.default;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        class: ['vxe-badge', {
+          [`size--${vSize}`]: vSize,
+          'is--dot': dot
+        }]
+      }, [defaultSlot || content ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-badge--content'
+      }, defaultSlot ? defaultSlot({}) : `${content || ''}`) : [], countNum ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-badge--count'
+      }, countNum > 99 ? '99+' : `${countNum}`) : renderEmptyElement($xeBadge)]);
+    };
+    $xeBadge.renderVN = renderVN;
+    return $xeBadge;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/badge/index.ts
+
+
+
+const VxeBadge = Object.assign({}, badge, {
+  install(app) {
+    app.component(badge.name, badge);
+  }
+});
+dynamicApp.use(VxeBadge);
+index_esm_VxeUI.component(badge);
+const Badge = VxeBadge;
+/* harmony default export */ var packages_badge = (VxeBadge);
+;// CONCATENATED MODULE: ./packages/breadcrumb/src/breadcrumb-item.ts
+
+
+
+
+/* harmony default export */ var breadcrumb_item = (defineVxeComponent({
+  name: 'VxeBreadcrumbItem',
+  props: {
+    title: String,
+    routerLink: Object
+  },
+  emits: [],
+  setup(props, context) {
+    const {
+      slots
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const $xeBreadcrumb = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeBreadcrumb', null);
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
+    const refMaps = {
+      refElem
+    };
+    const computeSeparator = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      if ($xeBreadcrumb) {
+        return $xeBreadcrumb.props.separator;
       }
-      if (routerLink) {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
-          ref: refButton,
-          class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
-            $button: $xeButton
-          }) : className : '', {
-            [`size--${vSize}`]: vSize,
-            [`theme--${btnStatus}`]: btnStatus,
-            'is--round': btnRound,
-            'is--circle': btnCircle,
-            'is--disabled': btnDisabled || loading,
-            'is--loading': loading
-          }],
-          title,
-          name,
-          type: isFormBtn ? type : 'button',
-          disabled: btnDisabled || loading,
-          to: routerLink,
-          onClick: clickEvent,
-          onMouseenter: mouseenterEvent,
-          onMouseleave: mouseleaveEvent,
-          onContextmenu: contextmenuEvent
-        }, {
-          default() {
-            return renderContent();
-          }
-        });
+      return '';
+    });
+    const clickEvent = evnt => {
+      if ($xeBreadcrumb) {
+        const item = {
+          title: props.title,
+          routerLink: props.routerLink
+        };
+        $xeBreadcrumb.handleClickLink(evnt, item);
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
-        ref: refButton,
-        class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
-          $button: $xeButton
-        }) : className : '', {
-          [`size--${vSize}`]: vSize,
-          [`theme--${btnStatus}`]: btnStatus,
-          'is--round': btnRound,
-          'is--circle': btnCircle,
-          'is--disabled': btnDisabled || loading,
-          'is--loading': loading
-        }],
+    };
+    const computeMaps = {};
+    const $xeBreadcrumbItem = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const renderVN = () => {
+      const {
         title,
-        name,
-        type: isFormBtn ? type : 'button',
-        disabled: btnDisabled || loading,
-        onClick: clickEvent,
-        onMouseenter: mouseenterEvent,
-        onMouseleave: mouseleaveEvent,
-        onContextmenu: contextmenuEvent
-      }, renderContent());
+        routerLink
+      } = props;
+      const separator = computeSeparator.value;
+      const defaultSlot = slots.default;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        ref: refElem,
+        class: 'vxe-breadcrumb-item',
+        onClick: clickEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-breadcrumb-item--content'
+      }, [routerLink ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
+        class: 'vxe-breadcrumb-item--content-link',
+        title,
+        to: routerLink
+      }, {
+        default() {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: 'vxe-breadcrumb-item--content-text'
+          }, defaultSlot ? defaultSlot({}) : `${title || ''}`);
+        }
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-breadcrumb-item--content-text'
+      }, defaultSlot ? defaultSlot({}) : `${title || ''}`)]), separator ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-breadcrumb-item--separator'
+      }, `${separator}`) : renderEmptyElement($xeBreadcrumbItem)]);
     };
-    $xeButton.renderVN = renderVN;
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      if (props.type === 'text') {
-        warnLog('vxe.error.delProp', ['[button] type=text', 'mode=text']);
+    $xeBreadcrumbItem.renderVN = renderVN;
+    return $xeBreadcrumbItem;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/breadcrumb/src/breadcrumb.ts
+
+
+
+
+
+/* harmony default export */ var breadcrumb = (defineVxeComponent({
+  name: 'VxeBreadcrumb',
+  props: {
+    separator: {
+      type: String,
+      default: () => getConfig().breadcrumb.separator
+    },
+    options: Array
+  },
+  emits: ['click'],
+  setup(props, context) {
+    const {
+      emit,
+      slots
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
+    const refMaps = {
+      refElem
+    };
+    const computeMaps = {};
+    const $xeBreadcrumb = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const breadcrumbMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, createEvent(evnt, {
+          $breadcrumb: $xeBreadcrumb
+        }, params));
       }
-      globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent);
-      globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent);
-      globalEvents.on($xeButton, 'resize', handleGlobalResizeEvent);
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
-      globalEvents.off($xeButton, 'mousewheel');
-      globalEvents.off($xeButton, 'mousedown');
-      globalEvents.off($xeButton, 'resize');
-    });
-    return $xeButton;
+    };
+    const breadcrumbPrivateMethods = {
+      handleClickLink(evnt, option) {
+        breadcrumbMethods.dispatchEvent('click', {
+          option
+        }, evnt);
+      }
+    };
+    Object.assign($xeBreadcrumb, breadcrumbMethods, breadcrumbPrivateMethods);
+    const renderItems = () => {
+      const {
+        options
+      } = props;
+      if (options && options.length) {
+        return options.map(item => {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(breadcrumb_item, {
+            title: item.title,
+            routerLink: item.routerLink
+          });
+        });
+      }
+      return [];
+    };
+    const renderVN = () => {
+      const defaultSlot = slots.default;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        class: 'vxe-breadcrumb'
+      }, defaultSlot ? defaultSlot({}) : renderItems());
+    };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeBreadcrumb', $xeBreadcrumb);
+    $xeBreadcrumb.renderVN = renderVN;
+    return $xeBreadcrumb;
   },
   render() {
     return this.renderVN();
   }
+}));
+;// CONCATENATED MODULE: ./packages/breadcrumb/index.ts
+
+
+
+const VxeBreadcrumb = Object.assign({}, breadcrumb, {
+  install(app) {
+    app.component(breadcrumb.name, breadcrumb);
+  }
 });
-/* harmony default export */ var src_button = (VxeButtonComponent);
-;// CONCATENATED MODULE: ./packages/button/index.ts
+dynamicApp.use(VxeBreadcrumb);
+index_esm_VxeUI.component(breadcrumb);
+const Breadcrumb = VxeBreadcrumb;
+/* harmony default export */ var packages_breadcrumb = (VxeBreadcrumb);
+;// CONCATENATED MODULE: ./packages/breadcrumb-item/index.ts
 
 
 
-const VxeButton = Object.assign({}, src_button, {
+const VxeBreadcrumbItem = Object.assign({}, breadcrumb_item, {
   install(app) {
-    app.component(src_button.name, src_button);
+    app.component(breadcrumb_item.name, breadcrumb_item);
   }
 });
-dynamicApp.use(VxeButton);
-index_esm_VxeUI.component(src_button);
-const Button = VxeButton;
-/* harmony default export */ var packages_button = (VxeButton);
+dynamicApp.use(VxeBreadcrumbItem);
+index_esm_VxeUI.component(breadcrumb_item);
+const BreadcrumbItem = VxeBreadcrumbItem;
+/* harmony default export */ var packages_breadcrumb_item = (VxeBreadcrumbItem);
 ;// CONCATENATED MODULE: ./packages/button/src/button-group.ts
 
 
@@ -23689,19 +23764,6 @@ function destroyItem($xeForm, formItem) {
   }
   reactData.staticItems = staticItems.slice(0);
 }
-;// CONCATENATED MODULE: ./packages/tooltip/index.ts
-
-
-
-const VxeTooltip = Object.assign({}, tooltip, {
-  install(app) {
-    app.component(tooltip.name, tooltip);
-  }
-});
-dynamicApp.use(VxeTooltip);
-index_esm_VxeUI.component(tooltip);
-const Tooltip = VxeTooltip;
-/* harmony default export */ var packages_tooltip = (VxeTooltip);
 ;// CONCATENATED MODULE: ./packages/icon/src/icon.ts
 
 
@@ -28264,6 +28326,18 @@ function layout_body_createReactData() {
       const vSize = computeSize.value;
       const defaultSlot = slots.default;
       const backtopSlot = slots.backtop;
+      const backtopTopSlot = slots.backtopTop || slots['backtop-top'];
+      const backtopBottomSlot = slots.backtopBottom || slots['backtop-bottom'];
+      const backtopScopeSlots = {};
+      if (backtopSlot) {
+        backtopScopeSlots.default = backtopSlot;
+      }
+      if (backtopTopSlot) {
+        backtopScopeSlots.top = backtopTopSlot;
+      }
+      if (backtopBottomSlot) {
+        backtopScopeSlots.bottom = backtopBottomSlot;
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
         class: ['vxe-layout-body', {
@@ -28285,9 +28359,7 @@ function layout_body_createReactData() {
       /**
        * 回到顶部
        */
-      showBacktop ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_backtop, backtopOpts, backtopSlot ? {
-        default: backtopSlot
-      } : undefined) : renderEmptyElement($xeLayoutBody)]);
+      showBacktop ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_backtop, backtopOpts, backtopScopeSlots) : renderEmptyElement($xeLayoutBody)]);
     };
     $xeLayoutBody.renderVN = renderVN;
     return $xeLayoutBody;