ele-admin-plus 1.1.8-beta.4 → 1.1.8-beta.6

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

@@ -7,6 +7,11 @@
 
 /* 滚动条样式 */
 @mixin scrollbar-style() {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
+  }
+
   ::-webkit-scrollbar {
     width: eleVar('scrollbar', 'size');
     height: eleVar('scrollbar', 'size');
@@ -30,24 +35,34 @@
   ::-webkit-scrollbar-corner {
     background: transparent;
   }
-
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
-  }
 }
 
 /* 美化滚动条样式 */
 @mixin set-scrollbar-style($selector) {
   @if $selector == '' {
     @include scrollbar-style();
+
+    html.is-webkit * {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
   } @else if $selector == 'pc' {
     @media (hover: hover) and (pointer: fine) {
       @include scrollbar-style();
+
+      html.is-webkit * {
+        scrollbar-width: auto;
+        scrollbar-color: auto;
+      }
     }
   } @else if $selector != 'never' {
     #{$selector} {
       @include scrollbar-style();
+
+      &.is-webkit * {
+        scrollbar-width: auto;
+        scrollbar-color: auto;
+      }
     }
   }
 }

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

@@ -15,13 +15,13 @@ declare const _default: import("vue").DefineComponent<{
     selected: import("vue").PropType<SelectedItem[]>;
     maxTagCount: NumberConstructor;
     maxTagTextLength: NumberConstructor;
-    tagType: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
+    tagType: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
     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("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>; /** 多选时搜索框值 */
     transition: {
         type: StringConstructor;
         default: string;
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
     popperOptions: import("vue").PropType<Partial<import("element-plus").Options> | undefined>;
     popperClass: StringConstructor;
     popperWidth: (StringConstructor | NumberConstructor)[];
-    selectClass: StringConstructor;
+    selectClass: StringConstructor; /** 输入框提示文本 */
     selectStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     inputStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }, {
@@ -74,13 +74,13 @@ declare const _default: import("vue").DefineComponent<{
     selected: import("vue").PropType<SelectedItem[]>;
     maxTagCount: NumberConstructor;
     maxTagTextLength: NumberConstructor;
-    tagType: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
+    tagType: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
     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("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>; /** 多选时搜索框值 */
     transition: {
         type: StringConstructor;
         default: string;
@@ -88,7 +88,7 @@ declare const _default: import("vue").DefineComponent<{
     popperOptions: import("vue").PropType<Partial<import("element-plus").Options> | undefined>;
     popperClass: StringConstructor;
     popperWidth: (StringConstructor | NumberConstructor)[];
-    selectClass: StringConstructor;
+    selectClass: StringConstructor; /** 输入框提示文本 */
     selectStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     inputStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }>> & {

package/es/ele-basic-select/index.js

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watch, resolveComponent, openBlock, cre
 import { ElInput, ElIcon, ElTag } from "element-plus";
 import { useLicense } from "../ele-config-provider/receiver";
 import EleTooltip from "../ele-tooltip/index";
-import { CloseOutlined, ArrowDown } from "../icons";
+import { CloseCircleFilled, ArrowDown } from "../icons";
 import { basicSelectProps, basicSelectEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleBasicSelect",
@@ -11,7 +11,7 @@ const _sfc_main = defineComponent({
     ElIcon,
     ElTag,
     EleTooltip,
-    CloseOutlined,
+    CloseCircleFilled,
     ArrowDown
   },
   props: basicSelectProps,
@@ -162,7 +162,7 @@ const _hoisted_1 = {
   class: "ele-select-tags"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CloseOutlined = resolveComponent("CloseOutlined");
+  const _component_CloseCircleFilled = resolveComponent("CloseCircleFilled");
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_ArrowDown = resolveComponent("ArrowDown");
   const _component_ElInput = resolveComponent("ElInput");
@@ -230,7 +230,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "clearIcon", {}, () => [
-                  createVNode(_component_CloseOutlined)
+                  createVNode(_component_CloseCircleFilled)
                 ])
               ]),
               _: 3

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

@@ -28,7 +28,7 @@ export declare const basicSelectProps: {
     /** 多选标签最大显示文本长度 */
     maxTagTextLength: NumberConstructor;
     /** 多选标签类型 */
-    tagType: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
+    tagType: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
     /** 是否在输入框获得焦点后自动弹出选项菜单 */
     automaticDropdown: BooleanConstructor;
     /** 是否可以筛选 */

package/es/ele-basic-select/style/index.scss

@@ -64,14 +64,11 @@
   }
 
   & > .el-input .el-input__icon.ele-select-clear {
-    color: elVar('bg-color', 'overlay');
-    font-size: eleVar('input', 'clear-size');
-    background: eleVar('input', 'clear-color');
-    border-radius: 50%;
+    color: eleVar('input', 'clear-color');
     cursor: pointer;
 
     &:hover {
-      background: eleVar('input', 'clear-hover-color');
+      color: eleVar('input', 'clear-hover-color');
     }
   }
 
@@ -93,10 +90,6 @@
     #{'d'}: path('M10 31 24 17 38 31');
   }
 
-  .ele-select-arrow > svg > path {
-    stroke-width: 4;
-  }
-
   /* 多选 */
   &.is-multiple {
     min-height: elVar('component-size');

package/es/ele-copyable/index.d.ts

@@ -12,10 +12,11 @@ declare const _default: import("vue").DefineComponent<{
     copiedIconStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     tooltip: {
         type: import("vue").PropType<boolean | Partial<import("../ele-tooltip/props").TooltipProps>>;
-        default: boolean;
+        default: boolean; /** 提示单例目标 */
     };
     resetAfter: {
         type: NumberConstructor;
+        /** 是否拷贝完成 */
         default: number;
     };
     locale: import("vue").PropType<Partial<CopyableLocale>>;
@@ -41,10 +42,11 @@ declare const _default: import("vue").DefineComponent<{
     copiedIconStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     tooltip: {
         type: import("vue").PropType<boolean | Partial<import("../ele-tooltip/props").TooltipProps>>;
-        default: boolean;
+        default: boolean; /** 提示单例目标 */
     };
     resetAfter: {
         type: NumberConstructor;
+        /** 是否拷贝完成 */
         default: number;
     };
     locale: import("vue").PropType<Partial<CopyableLocale>>;

package/es/ele-copyable/index.js

@@ -1,12 +1,12 @@
 import { defineComponent, ref, onDeactivated, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, createBlock, normalizeProps, mergeProps, withCtx, resolveDynamicComponent, createVNode } from "vue";
 import { ElIcon } from "element-plus";
-import { DocumentCopy, Check } from "@element-plus/icons-vue";
+import { CopyOutlined, CheckOutlined } from "../icons";
 import { useLicense, useLocale } from "../ele-config-provider/receiver";
 import EleTooltip from "../ele-tooltip/index";
 import { copyableProps, copyableEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleCopyable",
-  components: { ElIcon, DocumentCopy, Check, EleTooltip },
+  components: { ElIcon, CopyOutlined, CheckOutlined, EleTooltip },
   props: copyableProps,
   emits: copyableEmits,
   setup(props, { emit }) {
@@ -104,9 +104,9 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Check = resolveComponent("Check");
+  const _component_CheckOutlined = resolveComponent("CheckOutlined");
   const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_DocumentCopy = resolveComponent("DocumentCopy");
+  const _component_CopyOutlined = resolveComponent("CopyOutlined");
   const _component_EleTooltip = resolveComponent("EleTooltip");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["ele-copyable", { "ele-copyable-done": _ctx.copied }])
@@ -129,7 +129,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.copiedIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.copiedIcon), {
             key: 0,
             style: normalizeStyle(_ctx.copiedIconStyle)
-          }, null, 8, ["style"])) : (openBlock(), createBlock(_component_Check, {
+          }, null, 8, ["style"])) : (openBlock(), createBlock(_component_CheckOutlined, {
             key: 1,
             style: normalizeStyle(_ctx.copiedIconStyle)
           }, null, 8, ["style"]))
@@ -140,7 +140,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
             key: 0,
             style: normalizeStyle(_ctx.iconStyle)
-          }, null, 8, ["style"])) : (openBlock(), createBlock(_component_DocumentCopy, {
+          }, null, 8, ["style"])) : (openBlock(), createBlock(_component_CopyOutlined, {
             key: 1,
             style: normalizeStyle(_ctx.iconStyle)
           }, null, 8, ["style"]))

package/es/ele-cropper/components/cropper-tools.js

@@ -1,22 +1,22 @@
 import { defineComponent, shallowRef, ref, watch, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps } from "vue";
-import { ZoomIn, ZoomOut, Back, Right, Top, Bottom, RefreshLeft, RefreshRight, Switch, Sort, Refresh, Upload, Check } from "@element-plus/icons-vue";
 import { ElButtonGroup, ElButton, ElUpload } from "element-plus";
+import { ZoomInOutlined, ZoomOutOutlined, ArrowLeftOutlined, ArrowRightOutlined, ArrowUpOutlined, ArrowDownOutlined, UndoOutlined, ReloadOutlined, SwapOutlined, SortOutlined, SyncOutlined, UploadOutlined, CheckOutlined } from "../../icons";
 import EleTooltip from "../../ele-tooltip/index";
 import { useLocale } from "../../ele-config-provider/receiver";
 const TOOL_ICONS = {
-  zoomIn: ZoomIn,
-  zoomOut: ZoomOut,
-  moveLeft: Back,
-  moveRight: Right,
-  moveUp: Top,
-  moveDown: Bottom,
-  rotateLeft: RefreshLeft,
-  rotateRight: RefreshRight,
-  flipX: Switch,
-  flipY: Sort,
-  reset: Refresh,
-  upload: Upload,
-  ok: Check
+  zoomIn: ZoomInOutlined,
+  zoomOut: ZoomOutOutlined,
+  moveLeft: ArrowLeftOutlined,
+  moveRight: ArrowRightOutlined,
+  moveUp: ArrowUpOutlined,
+  moveDown: ArrowDownOutlined,
+  rotateLeft: UndoOutlined,
+  rotateRight: ReloadOutlined,
+  flipX: SwapOutlined,
+  flipY: SortOutlined,
+  reset: SyncOutlined,
+  upload: UploadOutlined,
+  ok: CheckOutlined
 };
 const _sfc_main = defineComponent({
   name: "CropperTools",

package/es/ele-cropper/props.js

@@ -26,7 +26,7 @@ const cropperProps = {
   /** 预览组件宽度 */
   previewWidth: {
     type: Number,
-    default: 120
+    default: 98
   },
   /** 是否返回blob数据 */
   toBlob: Boolean,

package/es/ele-cropper/style/index.scss

@@ -8,7 +8,7 @@
 
   .ele-cropper-image {
     flex: 1;
-    height: 320px;
+    height: 300px;
     position: relative;
     box-sizing: border-box;
 
@@ -82,8 +82,8 @@
     display: none;
   }
 
-  & > .el-icon {
-    font-size: 16px;
+  &.ele-cropper-ok > .el-icon + span {
+    margin-left: 4px;
   }
 }
 

package/es/ele-cropper-modal/index.js

@@ -30,7 +30,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleCropper = resolveComponent("EleCropper");
   const _component_EleModal = resolveComponent("EleModal");
   return openBlock(), createBlock(_component_EleModal, mergeProps({
-    width: "660px",
+    width: "620px",
     title: _ctx.lang.title
   }, _ctx.modalProps, {
     modelValue: _ctx.modelValue,

package/es/ele-data-table/style/index.scss

@@ -1,8 +1,9 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
-$ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;
 $ele-expand-path: 'M362 811 662 512 362 213' !default;
+$ele-loading-path: 'M512 128V299M789 235 672 352M896 512H725M789 789 672 672M512 896V725M235 789 352 672M128 512H299M235 235 352 352' !default;
+$ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;
 
 @include set-data-table-var($ele);
 @include table-var-style('body .ele-data-table.el-table');
@@ -216,21 +217,31 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
       transition: (color $ele-transition, background-color $ele-transition);
       transform: none;
 
+      &:hover {
+        background: eleVar('table', 'icon-hover-bg');
+      }
+
       & > .el-icon {
         transition: all $ele-transition;
         font-size: inherit;
 
-        &:not(.is-loading) > svg > path {
+        & > svg > path {
           fill: none;
           stroke: currentColor;
-          stroke-width: 100;
           stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 98;
           #{'d'}: path($ele-expand-path);
         }
       }
 
-      &:hover {
-        background: eleVar('table', 'icon-hover-bg');
+      & > .is-loading > svg > path {
+        stroke-width: 85;
+        #{'d'}: path($ele-loading-path);
+      }
+
+      & > .el-icon:not(.is-loading) > svg {
+        transform: translateX(0.4px);
       }
     }
 
@@ -239,7 +250,7 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
     & > .el-table__placeholder {
       height: 16px;
       display: inline-flex;
-      vertical-align: -3px;
+      vertical-align: -2px;
     }
 
     & > .el-table__expand-icon,

package/es/ele-drawer/index.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     bodyStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     footerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     closeBtnStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    inner: BooleanConstructor;
     direction: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
     size: import("element-plus/es/utils/index").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
     withHeader: import("element-plus/es/utils/index").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -54,14 +55,15 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    customClass: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     draggable: BooleanConstructor;
+    overflow: BooleanConstructor;
     fullscreen: BooleanConstructor;
     showClose: import("element-plus/es/utils/index").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     title: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     ariaLevel: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
 }, {
     drawerRef: import("vue").Ref<ElDrawerInstance>;
+    drawerClass: import("vue").ComputedRef<string>;
     handleClose: () => void;
     updateModelValue: (value: boolean) => void;
     onOpen: () => void;
@@ -82,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     bodyStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     footerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     closeBtnStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    inner: BooleanConstructor;
     direction: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
     size: import("element-plus/es/utils/index").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
     withHeader: import("element-plus/es/utils/index").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -131,8 +134,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    customClass: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     draggable: BooleanConstructor;
+    overflow: BooleanConstructor;
     fullscreen: BooleanConstructor;
     showClose: import("element-plus/es/utils/index").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     title: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
@@ -140,11 +143,11 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onOpen?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpenAutoFocus?: (() => any) | undefined;
+    onCloseAutoFocus?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
-    onOpenAutoFocus?: (() => any) | undefined;
-    onCloseAutoFocus?: (() => any) | undefined;
 }, {
     size: import("element-plus/es/utils/index").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: boolean;
@@ -162,13 +165,14 @@ declare const _default: import("vue").DefineComponent<{
     trapFocus: import("element-plus/es/utils/index").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     headerAriaLevel: string;
     alignCenter: boolean;
-    customClass: string;
     draggable: boolean;
+    overflow: boolean;
     fullscreen: boolean;
     showClose: import("element-plus/es/utils/index").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     ariaLevel: string;
     direction: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
     withHeader: import("element-plus/es/utils/index").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     modalFade: import("element-plus/es/utils/index").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    inner: boolean;
 }, {}>;
 export default _default;

package/es/ele-drawer/index.js

@@ -1,16 +1,65 @@
-import { defineComponent, ref, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from "vue";
-import { Close } from "@element-plus/icons-vue";
+import { defineComponent, ref, computed, unref, onActivated, onDeactivated, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from "vue";
 import { ElDrawer, ElIcon, drawerEmits } from "element-plus";
-import { useLicense } from "../ele-config-provider/receiver";
+import { useLicense, useLayoutState } from "../ele-config-provider/receiver";
+import { collapseClass, compactClass, maximizedClass, hasTabClass, mixSidebarClass, singleSidebarClass, topLayoutClass, expandedClass, mobileClass } from "../ele-modal/util";
+import { CloseOutlined } from "../icons";
 import { drawerProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleDrawer",
-  components: { ElDrawer, ElIcon, Close },
+  components: { ElDrawer, ElIcon, CloseOutlined },
   props: drawerProps,
   emits: drawerEmits,
-  setup(_props, { emit }) {
+  setup(props, { emit }) {
     const { authenticated } = useLicense();
+    const layoutProvide = useLayoutState();
     const drawerRef = ref(null);
+    const isActivated = ref(true);
+    const drawerClass = computed(() => {
+      const layoutState = unref(layoutProvide);
+      const classes = ["ele-drawer"];
+      if (!props.modelValue) {
+        classes.push("ele-drawer-closed");
+      }
+      if (!isActivated.value && props.modelValue) {
+        classes.push("ele-drawer-hide");
+      }
+      if (props.inner) {
+        classes.push("ele-drawer-inner");
+        if (layoutState && layoutState.sidebar != null) {
+          if (layoutState.collapse && !layoutState.topLayout) {
+            classes.push(collapseClass);
+          }
+          if (layoutState.compact && layoutState.mixSidebar && !layoutState.topLayout) {
+            classes.push(compactClass);
+          }
+          if (layoutState.maximized) {
+            classes.push(maximizedClass);
+          }
+          if (layoutState.tabBar) {
+            classes.push(hasTabClass);
+          }
+          if (layoutState.mixSidebar && !layoutState.topLayout) {
+            classes.push(mixSidebarClass);
+            if (!layoutState.sidebar) {
+              classes.push(singleSidebarClass);
+            }
+          }
+          if (layoutState.topLayout) {
+            classes.push(topLayoutClass);
+          }
+          if (layoutState.maximized && layoutState.expanded) {
+            classes.push(expandedClass);
+          }
+          if (layoutState.mobile) {
+            classes.push(mobileClass);
+          }
+        }
+      }
+      if (props.modalClass) {
+        classes.push(props.modalClass);
+      }
+      return classes.join(" ");
+    });
     const handleClose = () => {
       if (drawerRef.value && drawerRef.value.handleClose) {
         drawerRef.value.handleClose();
@@ -33,8 +82,15 @@ const _sfc_main = defineComponent({
     const onClosed = () => {
       emit("closed");
     };
+    onActivated(() => {
+      isActivated.value = true;
+    });
+    onDeactivated(() => {
+      isActivated.value = false;
+    });
     return {
       drawerRef,
+      drawerClass,
       handleClose,
       updateModelValue,
       onOpen,
@@ -53,7 +109,7 @@ const _export_sfc = (sfc, props) => {
 };
 const _hoisted_1 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Close = resolveComponent("Close");
+  const _component_CloseOutlined = resolveComponent("CloseOutlined");
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_ElDrawer = resolveComponent("ElDrawer");
   return openBlock(), createBlock(_component_ElDrawer, {
@@ -73,9 +129,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     size: _ctx.size,
     title: _ctx.title,
     withHeader: _ctx.withHeader,
-    modalClass: _ctx.modalClass,
+    modalClass: _ctx.drawerClass,
     zIndex: _ctx.zIndex,
-    class: "ele-drawer",
+    headerAriaLevel: _ctx.headerAriaLevel,
     onOpen: _ctx.onOpen,
     onOpened: _ctx.onOpened,
     onClose: _ctx.onClose,
@@ -105,7 +161,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           renderSlot(_ctx.$slots, "closeBtn", {}, () => [
             createVNode(_component_ElIcon, null, {
               default: withCtx(() => [
-                createVNode(_component_Close)
+                createVNode(_component_CloseOutlined)
               ]),
               _: 1
             })
@@ -135,7 +191,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["modelValue", "appendToBody", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "onOpen", "onOpened", "onClose", "onClosed", "onUpdate:modelValue"]);
+  ]), 1032, ["modelValue", "appendToBody", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "headerAriaLevel", "onOpen", "onOpened", "onClose", "onClosed", "onUpdate:modelValue"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/es/ele-drawer/props.d.ts

@@ -13,6 +13,8 @@ export declare const drawerProps: {
     footerStyle: PropType<Partial<import("vue").CSSProperties>>;
     /** 自定义关闭按钮样式 */
     closeBtnStyle: PropType<Partial<import("vue").CSSProperties>>;
+    /** 是否限制在主体内部 */
+    inner: BooleanConstructor;
     direction: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
     size: import("element-plus/es/utils/index").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
     withHeader: import("element-plus/es/utils/index").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -62,8 +64,8 @@ export declare const drawerProps: {
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    customClass: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     draggable: BooleanConstructor;
+    overflow: BooleanConstructor;
     fullscreen: BooleanConstructor;
     showClose: import("element-plus/es/utils/index").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     title: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;

package/es/ele-drawer/props.js

@@ -10,7 +10,9 @@ const drawerProps = {
   /** 自定义底部样式 */
   footerStyle: Object,
   /** 自定义关闭按钮样式 */
-  closeBtnStyle: Object
+  closeBtnStyle: Object,
+  /** 是否限制在主体内部 */
+  inner: Boolean
 };
 export {
   drawerProps