ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.4

package/lib/ele-app/style/overwrite/index.scss

@@ -5,7 +5,6 @@
 @use './color-picker/index.scss' as colorPicker;
 @use './date-picker/index.scss' as datePicker;
 @use './descriptions/index.scss' as descriptions;
-@use './image-viewer/index.scss' as imageViewer;
 @use './input/index.scss' as input;
 @use './message-box/index.scss' as messageBox;
 @use './notification/index.scss' as notification;

package/lib/ele-app/style/overwrite/input/index.scss

@@ -308,6 +308,7 @@ body .el-textarea.is-disabled .el-textarea__inner,
   padding-bottom: 0;
   padding-left: eleVar('input-sm', 'padding-left');
   padding-right: eleVar('input-sm', 'padding-right');
+  gap: 0;
 }
 
 /* 大尺寸 */
@@ -318,6 +319,7 @@ body .el-textarea.is-disabled .el-textarea__inner,
   padding-bottom: 0;
   padding-left: eleVar('input-lg', 'padding-left');
   padding-right: eleVar('input-lg', 'padding-right');
+  gap: 0;
 }
 
 /* Textarea */

package/lib/ele-app/style/scrollbar/css-var.scss

@@ -1,4 +1,6 @@
 @use '../../../style/util.scss' as *;
+// 美化滚动条样式针对谷歌选择器
+$scrollbar-webkit-selector: 'html.is-webkit' !default;
 
 /* 滚动条主题变量 */
 @mixin set-scrollbar-var($var) {
@@ -6,18 +8,18 @@
 }
 
 /* 滚动条样式 */
-@mixin scrollbar-style() {
-  * {
+@mixin scrollbar-style($selector: '') {
+  #{if($selector == '', '*', $selector)} {
     scrollbar-width: thin;
     scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
   }
 
-  ::-webkit-scrollbar {
+  #{$selector}::-webkit-scrollbar {
     width: eleVar('scrollbar', 'size');
     height: eleVar('scrollbar', 'size');
   }
 
-  ::-webkit-scrollbar-thumb {
+  #{$selector}::-webkit-scrollbar-thumb {
     border: eleVar('scrollbar', 'padding') solid transparent;
     border-radius: eleVar('scrollbar', 'radius');
     background-color: eleVar('scrollbar', 'color');
@@ -28,11 +30,11 @@
     }
   }
 
-  ::-webkit-scrollbar-track {
+  #{$selector}::-webkit-scrollbar-track {
     background: eleVar('scrollbar', 'bg');
   }
 
-  ::-webkit-scrollbar-corner {
+  #{$selector}::-webkit-scrollbar-corner {
     background: transparent;
   }
 }
@@ -42,8 +44,8 @@
   @if $selector == '' {
     @include scrollbar-style();
 
-    html.is-webkit,
-    html.is-webkit * {
+    #{$scrollbar-webkit-selector},
+    #{$scrollbar-webkit-selector} * {
       scrollbar-width: auto;
       scrollbar-color: auto;
     }
@@ -51,20 +53,19 @@
     @media (hover: hover) and (pointer: fine) {
       @include scrollbar-style();
 
-      html.is-webkit,
-      html.is-webkit * {
+      #{$scrollbar-webkit-selector},
+      #{$scrollbar-webkit-selector} * {
         scrollbar-width: auto;
         scrollbar-color: auto;
       }
     }
   } @else if $selector != 'never' {
-    #{$selector} {
-      @include scrollbar-style();
+    @include scrollbar-style($selector);
 
-      &.is-webkit * {
-        scrollbar-width: auto;
-        scrollbar-color: auto;
-      }
+    #{$scrollbar-webkit-selector}#{$selector},
+    #{$scrollbar-webkit-selector} #{$selector} {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
   }
 }

package/lib/ele-app/types.d.ts

@@ -1,5 +1,12 @@
 import type { CSSProperties, Component, SetupContext } from 'vue';
 
+/**
+ * 只读属性改为可读
+ */
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+
 /**
  * 样式值
  */
@@ -23,7 +30,7 @@ export type ClassValues = ClassValue | Array<ClassValue>;
 /**
  * 组件属性
  */
-export type ComponentProps<T> = Partial<T> & {
+export type ComponentProps<T> = Mutable<Partial<T>> & {
   /** 类名 */
   class?: ClassValues;
   /** 样式 */

package/lib/ele-avatar-group/index.d.ts

@@ -1,3 +1,4 @@
+import { StyleValue } from '../ele-app/types';
 import { AvatarItem, AvatarErrorOption } from './types';
 
 declare const _default: import('vue').DefineComponent<{
@@ -6,21 +7,21 @@ declare const _default: import('vue').DefineComponent<{
         required: boolean;
     };
     maxCount: NumberConstructor;
-    shape: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "circle" | "square", unknown> | undefined>;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "small" | "default" | "large", number> | undefined>;
-    itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    avatarStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    moreStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    shape: import('vue').PropType<import('../ele-app/el').ElAvatarProps["shape"]>;
+    size: import('vue').PropType<import('../ele-app/el').ElAvatarProps["size"]>;
+    itemStyle: import('vue').PropType<StyleValue>;
+    avatarStyle: import('vue').PropType<StyleValue>;
+    moreStyle: import('vue').PropType<StyleValue>;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: import('vue').PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    tooltipProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
     overflowPopover: {
         type: BooleanConstructor;
         default: boolean;
     };
-    overflowPopoverProps: import('vue').PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    overflowPopoverProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
     hoverOpen: BooleanConstructor;
 }, {
     tooltipContent: import('vue').Ref<string>;
@@ -45,21 +46,21 @@ declare const _default: import('vue').DefineComponent<{
         required: boolean;
     };
     maxCount: NumberConstructor;
-    shape: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "circle" | "square", unknown> | undefined>;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "small" | "default" | "large", number> | undefined>;
-    itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    avatarStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    moreStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    shape: import('vue').PropType<import('../ele-app/el').ElAvatarProps["shape"]>;
+    size: import('vue').PropType<import('../ele-app/el').ElAvatarProps["size"]>;
+    itemStyle: import('vue').PropType<StyleValue>;
+    avatarStyle: import('vue').PropType<StyleValue>;
+    moreStyle: import('vue').PropType<StyleValue>;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: import('vue').PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    tooltipProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
     overflowPopover: {
         type: BooleanConstructor;
         default: boolean;
     };
-    overflowPopoverProps: import('vue').PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    overflowPopoverProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
     hoverOpen: BooleanConstructor;
 }>> & {
     onError?: ((_option: AvatarErrorOption) => any) | undefined;

package/lib/ele-avatar-group/props.d.ts

@@ -1,4 +1,7 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElAvatarProps } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
 import { AvatarItem, AvatarErrorOption } from './types';
 
 /**
@@ -13,29 +16,29 @@ export declare const avatarGroupProps: {
     /** 最大显示个数 */
     maxCount: NumberConstructor;
     /** 形状 */
-    shape: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "circle" | "square", unknown> | undefined>;
+    shape: PropType<ElAvatarProps["shape"]>;
     /** 大小 */
-    size: PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number> | undefined>;
+    size: PropType<ElAvatarProps["size"]>;
     /** 自定义样式 */
-    itemStyle: PropType<Partial<import('vue').CSSProperties>>;
+    itemStyle: PropType<StyleValue>;
     /** 自定义头像样式 */
-    avatarStyle: PropType<Partial<import('vue').CSSProperties>>;
+    avatarStyle: PropType<StyleValue>;
     /** 自定义溢出样式 */
-    moreStyle: PropType<Partial<import('vue').CSSProperties>>;
+    moreStyle: PropType<StyleValue>;
     /** 是否显示提示 */
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
     };
     /** 提示属性 */
-    tooltipProps: PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    tooltipProps: PropType<EleTooltipProps>;
     /** 是否显示溢出气泡 */
     overflowPopover: {
         type: BooleanConstructor;
         default: boolean;
     };
     /** 溢出气泡属性 */
-    overflowPopoverProps: PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    overflowPopoverProps: PropType<EleTooltipProps>;
     /** 是否鼠标移入展开 */
     hoverOpen: BooleanConstructor;
 };

package/lib/ele-basic-select/index.cjs

@@ -100,6 +100,11 @@ const _sfc_main = vue.defineComponent({
     const handleClear = () => {
       emit("clear");
     };
+    const handleInputClick = (e) => {
+      if (props2.automaticDropdown && props2.visible) {
+        e.stopPropagation();
+      }
+    };
     const handleInputFocus = (e) => {
       if (props2.automaticDropdown && !props2.visible) {
         updateVisible(true);
@@ -159,6 +164,7 @@ const _sfc_main = vue.defineComponent({
       updateVisible,
       handleTagClose,
       handleClear,
+      handleInputClick,
       handleInputFocus,
       handleInputBlur,
       handleInputEsc
@@ -172,10 +178,6 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = {
-  key: 0,
-  class: "ele-select-tags"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CloseCircleFilled = vue.resolveComponent("CloseCircleFilled");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
@@ -239,6 +241,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           readonly: !_ctx.filterable || !_ctx.visible || _ctx.multiple,
           style: vue.normalizeStyle(_ctx.inputStyle),
           "onUpdate:modelValue": _ctx.updateInputValue,
+          onClick: _ctx.handleInputClick,
           onFocus: _ctx.handleInputFocus,
           onBlur: _ctx.handleInputBlur,
           onKeydown: vue.withKeys(_ctx.handleInputEsc, ["esc"])
@@ -274,8 +277,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style", "onUpdate:modelValue", "onFocus", "onBlur", "onKeydown"]),
-        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style", "onUpdate:modelValue", "onClick", "onFocus", "onBlur", "onKeydown"]),
+        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ele-select-tags",
+          style: vue.normalizeStyle(_ctx.selectTagsStyle)
+        }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.currentTags, (item, index2) => {
             return vue.openBlock(), vue.createBlock(_component_ElTag, {
               key: index2 + "-" + item.value,
@@ -331,7 +338,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           }, 8, ["size"])) : vue.createCommentVNode("", true)
-        ])) : vue.createCommentVNode("", true)
+        ], 4)) : vue.createCommentVNode("", true)
       ], 6)
     ]),
     _: 3

package/lib/ele-basic-select/index.d.ts

@@ -9,30 +9,31 @@ declare const _default: import('vue').DefineComponent<{
     };
     multiple: BooleanConstructor;
     disabled: BooleanConstructor;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never> | undefined>;
+    size: import('vue').PropType<import('../ele-app/el').ElInputProps["size"]>;
     clearable: BooleanConstructor;
     placeholder: StringConstructor;
     selectedLabel: StringConstructor;
     selected: import('vue').PropType<SelectedItem[]>;
     maxTagCount: NumberConstructor;
     maxTagTextLength: NumberConstructor;
-    tagType: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>; /** 输入框组件 */
+    tagType: import('vue').PropType<import('../ele-app/el').ElTagProps["type"]>;
     automaticDropdown: BooleanConstructor;
     filterable: BooleanConstructor;
     visible: BooleanConstructor;
     teleported: BooleanConstructor;
     persistent: BooleanConstructor;
-    placement: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+    placement: import('vue').PropType<import('../ele-app/plus').EleTooltipProps["placement"]>;
     transition: {
-        type: StringConstructor; /** 是否未选中 */
+        type: StringConstructor;
         default: string;
     };
-    popperOptions: import('vue').PropType<Partial<import('element-plus').Options> | undefined>;
+    popperOptions: import('vue').PropType<import('../ele-app/plus').EleTooltipProps["popperOptions"]>;
     popperClass: StringConstructor;
     popperWidth: (StringConstructor | NumberConstructor)[];
     selectClass: StringConstructor;
-    selectStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    inputStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    selectStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    inputStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    selectTagsStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
 }, {
     tooltipRef: import('vue').Ref<EleTooltipInstance>;
     inputRef: import('vue').Ref<ElInputInstance>;
@@ -52,6 +53,7 @@ declare const _default: import('vue').DefineComponent<{
     updateVisible: (visible: boolean) => void;
     handleTagClose: (item: SelectedItem) => void;
     handleClear: () => void;
+    handleInputClick: (e: MouseEvent) => void;
     handleInputFocus: (e: FocusEvent) => void;
     handleInputBlur: (e: FocusEvent) => void;
     handleInputEsc: (e: FocusEvent) => void;
@@ -69,30 +71,31 @@ declare const _default: import('vue').DefineComponent<{
     };
     multiple: BooleanConstructor;
     disabled: BooleanConstructor;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never> | undefined>;
+    size: import('vue').PropType<import('../ele-app/el').ElInputProps["size"]>;
     clearable: BooleanConstructor;
     placeholder: StringConstructor;
     selectedLabel: StringConstructor;
     selected: import('vue').PropType<SelectedItem[]>;
     maxTagCount: NumberConstructor;
     maxTagTextLength: NumberConstructor;
-    tagType: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>; /** 输入框组件 */
+    tagType: import('vue').PropType<import('../ele-app/el').ElTagProps["type"]>;
     automaticDropdown: BooleanConstructor;
     filterable: BooleanConstructor;
     visible: BooleanConstructor;
     teleported: BooleanConstructor;
     persistent: BooleanConstructor;
-    placement: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+    placement: import('vue').PropType<import('../ele-app/plus').EleTooltipProps["placement"]>;
     transition: {
-        type: StringConstructor; /** 是否未选中 */
+        type: StringConstructor;
         default: string;
     };
-    popperOptions: import('vue').PropType<Partial<import('element-plus').Options> | undefined>;
+    popperOptions: import('vue').PropType<import('../ele-app/plus').EleTooltipProps["popperOptions"]>;
     popperClass: StringConstructor;
     popperWidth: (StringConstructor | NumberConstructor)[];
     selectClass: StringConstructor;
-    selectStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    inputStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    selectStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    inputStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    selectTagsStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
 }>> & {
     onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
@@ -106,10 +109,10 @@ declare const _default: import('vue').DefineComponent<{
     clearable: boolean;
     disabled: boolean;
     filterable: boolean;
-    multiple: boolean;
+    persistent: boolean;
     visible: boolean;
     transition: string;
-    persistent: boolean;
+    multiple: boolean;
     automaticDropdown: boolean;
 }, {}>;
 export default _default;

package/lib/ele-basic-select/props.cjs

@@ -56,7 +56,9 @@ const basicSelectProps = {
   /** 自定义样式 */
   selectStyle: Object,
   /** 自定义输入框样式 */
-  inputStyle: Object
+  inputStyle: Object,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object
 };
 const basicSelectEmits = {
   /** 更新下拉框显示状态 */

package/lib/ele-basic-select/props.d.ts

@@ -1,4 +1,7 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElInputProps, ElTagProps } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
 import { SelectValue, SelectedItem } from './types';
 
 /**
@@ -15,7 +18,7 @@ export declare const basicSelectProps: {
     /** 是否禁用 */
     disabled: BooleanConstructor;
     /** 尺寸 */
-    size: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    size: PropType<ElInputProps["size"]>;
     /** 是否支持清除 */
     clearable: BooleanConstructor;
     /** 无选中时提示文本 */
@@ -29,7 +32,7 @@ export declare const basicSelectProps: {
     /** 多选标签最大显示文本长度 */
     maxTagTextLength: NumberConstructor;
     /** 多选标签类型 */
-    tagType: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
+    tagType: PropType<ElTagProps["type"]>;
     /** 是否在输入框获得焦点后自动弹出选项菜单 */
     automaticDropdown: BooleanConstructor;
     /** 是否可以筛选 */
@@ -41,14 +44,14 @@ export declare const basicSelectProps: {
     /** 始终渲染下拉框 */
     persistent: BooleanConstructor;
     /** 下拉框位置 */
-    placement: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+    placement: PropType<EleTooltipProps["placement"]>;
     /** 下拉框渐变动画 */
     transition: {
         type: StringConstructor;
         default: string;
     };
     /** popper.js 参数 */
-    popperOptions: PropType<Partial<import('element-plus').Options> | undefined>;
+    popperOptions: PropType<EleTooltipProps["popperOptions"]>;
     /** 下拉框类名 */
     popperClass: StringConstructor;
     /** 下拉框宽度 */
@@ -56,9 +59,11 @@ export declare const basicSelectProps: {
     /** 自定义类名 */
     selectClass: StringConstructor;
     /** 自定义样式 */
-    selectStyle: PropType<Partial<import('vue').CSSProperties>>;
+    selectStyle: PropType<StyleValue>;
     /** 自定义输入框样式 */
-    inputStyle: PropType<Partial<import('vue').CSSProperties>>;
+    inputStyle: PropType<StyleValue>;
+    /** 自定义多选标签容器样式 */
+    selectTagsStyle: PropType<StyleValue>;
 };
 export type BasicSelectProps = ExtractPropTypes<typeof basicSelectProps>;
 /**

package/lib/ele-basic-select/util.cjs

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const error = require("element-plus/es/utils/error");
 function isEmptyValue(value, multiple) {
   const isNull = value == null || value === "";
   return isNull || multiple && !value.length;
@@ -26,5 +29,15 @@ function valueIsChanged(value1, value2, multiple) {
   }
   return value1.some((v) => !value2.includes(v));
 }
+function useFormValidate() {
+  const formItem = vue.inject(elementPlus.formItemContextKey, null);
+  const validateChange = () => {
+    if (formItem != null) {
+      formItem.validate("change").catch((e) => error.debugWarn(e));
+    }
+  };
+  return { validateChange };
+}
 exports.isEmptyValue = isEmptyValue;
+exports.useFormValidate = useFormValidate;
 exports.valueIsChanged = valueIsChanged;

package/lib/ele-basic-select/util.d.ts

@@ -13,3 +13,9 @@ export declare function isEmptyValue(value?: SelectValue, multiple?: boolean): b
  * @param multiple 是否多选
  */
 export declare function valueIsChanged(value1: SelectValue, value2: SelectValue, multiple?: boolean): boolean;
+/**
+ * 触发表单验证
+ */
+export declare function useFormValidate(): {
+    validateChange: () => void;
+};

package/lib/ele-bottom-bar/index.cjs

@@ -1,9 +1,25 @@
 "use strict";
 const vue = require("vue");
+const util = require("../ele-pro-layout/util");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleBottomBar",
-  props: props.bottomBarProps
+  props: props.bottomBarProps,
+  setup() {
+    const layoutState = util.useLayoutState();
+    const isActivated = vue.ref(true);
+    const teleportTo = vue.computed(() => {
+      var _a;
+      return (_a = layoutState.getBodyWrapperEl) == null ? void 0 : _a.call(layoutState);
+    });
+    vue.onActivated(() => {
+      isActivated.value = true;
+    });
+    vue.onDeactivated(() => {
+      isActivated.value = false;
+    });
+    return { isActivated, teleportTo };
+  }
 });
 const _export_sfc = (sfc, props2) => {
   const target = sfc.__vccOpts || sfc;
@@ -12,22 +28,28 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-bottom-bar" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("div", {
-      class: "ele-bottom-bar-body",
-      style: vue.normalizeStyle(_ctx.bodyStyle)
-    }, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ], 4),
+  return vue.openBlock(), vue.createBlock(vue.Teleport, {
+    to: _ctx.teleportTo,
+    disabled: !_ctx.teleported || !_ctx.teleportTo
+  }, [
     vue.createElementVNode("div", {
-      class: "ele-bottom-bar-extra",
-      style: vue.normalizeStyle(_ctx.extraStyle)
+      class: vue.normalizeClass(["ele-bottom-bar", { "is-deactivated": !_ctx.isActivated }])
     }, [
-      vue.renderSlot(_ctx.$slots, "extra")
-    ], 4)
-  ]);
+      vue.createElementVNode("div", {
+        class: "ele-bottom-bar-body",
+        style: vue.normalizeStyle(_ctx.bodyStyle)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 4),
+      vue.createElementVNode("div", {
+        class: "ele-bottom-bar-extra",
+        style: vue.normalizeStyle(_ctx.extraStyle)
+      }, [
+        vue.renderSlot(_ctx.$slots, "extra")
+      ], 4)
+    ], 2)
+  ], 8, ["to", "disabled"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;

package/lib/ele-bottom-bar/index.d.ts

@@ -1,8 +1,15 @@
 declare const _default: import('vue').DefineComponent<{
-    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    extraStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    extraStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-}>>, {}, {}>;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    extraStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    teleported: BooleanConstructor;
+}, {
+    isActivated: import('vue').Ref<boolean>;
+    teleportTo: import('vue').ComputedRef<HTMLElement | null | undefined>;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    extraStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    teleported: BooleanConstructor;
+}>>, {
+    teleported: boolean;
+}, {}>;
 export default _default;

package/lib/ele-bottom-bar/props.cjs

@@ -4,6 +4,8 @@ const bottomBarProps = {
   /** 内容样式 */
   bodyStyle: Object,
   /** 右侧样式 */
-  extraStyle: Object
+  extraStyle: Object,
+  /** 是否插入到布局的内容节点后 */
+  teleported: Boolean
 };
 exports.bottomBarProps = bottomBarProps;

package/lib/ele-bottom-bar/props.d.ts

@@ -1,12 +1,15 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 
 /**
  * 属性
  */
 export declare const bottomBarProps: {
     /** 内容样式 */
-    bodyStyle: PropType<Partial<import('vue').CSSProperties>>;
+    bodyStyle: PropType<StyleValue>;
     /** 右侧样式 */
-    extraStyle: PropType<Partial<import('vue').CSSProperties>>;
+    extraStyle: PropType<StyleValue>;
+    /** 是否插入到布局的内容节点后 */
+    teleported: BooleanConstructor;
 };
 export type BottomBarProps = ExtractPropTypes<typeof bottomBarProps>;

package/lib/ele-bottom-bar/style/index.scss

@@ -5,6 +5,7 @@
 @include set-bottom-bar-var($ele);
 
 .ele-bottom-bar {
+  flex-shrink: 0;
   position: sticky;
   bottom: 0;
   display: flex;
@@ -23,4 +24,8 @@
   .ele-bottom-bar-extra {
     flex-shrink: 0;
   }
+
+  &.is-deactivated {
+    display: none;
+  }
 }