ele-admin-plus 1.1.9 → 1.2.0-beta.2

package/es/ele-menus/style/index.js

@@ -1,8 +1,8 @@
-import 'element-plus/es/components/menu/style/index';
-import 'element-plus/es/components/menu-item/style/index';
-import 'element-plus/es/components/menu-item-group/style/index';
-import 'element-plus/es/components/sub-menu/style/index';
-import 'element-plus/es/components/icon/style/index';
-import 'element-plus/es/components/badge/style/index';
-import '../../ele-tooltip/style/index';
-import './index.scss';
+import "element-plus/es/components/menu/style/index";
+import "element-plus/es/components/menu-item/style/index";
+import "element-plus/es/components/menu-item-group/style/index";
+import "element-plus/es/components/sub-menu/style/index";
+import "element-plus/es/components/icon/style/index";
+import "element-plus/es/components/badge/style/index";
+import "../../ele-tooltip/style/index";
+import "./index.scss";

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

@@ -18,7 +18,7 @@
     #{elVarName('menu', 'border-color')}: eleVar('menu', 'border-color');
   }
 
-  /* item basic */
+  /* 菜单项 */
   .el-menu-item,
   .el-sub-menu__title,
   .el-menu-item-group__title {
@@ -40,7 +40,7 @@
     }
   }
 
-  /* arrow */
+  /* 箭头 */
   .el-sub-menu__title .el-sub-menu__icon-arrow {
     order: 4;
     width: auto;
@@ -48,7 +48,7 @@
     font-size: eleVar('menu', 'arrow-size');
 
     & > svg.ele-arrow-down path {
-      transition: d $ele-transition;
+      transition: d $transition-base;
       stroke-width: 5;
     }
   }
@@ -59,7 +59,7 @@
     }
   }
 
-  /* disabled */
+  /* 禁用 */
   .el-menu-item.is-disabled,
   .el-sub-menu.is-disabled .el-menu-item,
   .el-sub-menu.is-disabled .el-sub-menu__title {
@@ -83,7 +83,7 @@
       &::after {
         content: '';
         height: eleVar('menu-horizontal', 'line-size');
-        transition: background-color $ele-transition;
+        transition: background-color $transition-base;
         background: transparent;
         pointer-events: none;
         position: absolute;
@@ -100,7 +100,7 @@
       }
 
       &:active {
-        background: eleVar('menu-horizontal', 'active-bg');
+        background: eleVar('menu-horizontal', 'focus-bg');
       }
     }
 
@@ -189,7 +189,7 @@
       }
 
       &:active {
-        background: eleVar('menu', 'item-active-bg');
+        background: eleVar('menu', 'item-focus-bg');
       }
     }
 
@@ -394,8 +394,8 @@
     & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
       .el-badge {
         position: absolute;
-        top: 8px;
-        right: 10px;
+        top: 6px;
+        right: 6px;
         margin: 0;
       }
     }
@@ -421,6 +421,99 @@
     }
   }
 
+  /* 紧凑菜单 */
+  &.is-compact {
+    width: 100%;
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      height: auto;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      padding: eleVar('menu', 'compact-item-padding');
+
+      .el-icon:not(.el-sub-menu__icon-arrow) {
+        margin: 0;
+        font-size: eleVar('menu', 'compact-icon-font-size');
+      }
+
+      & > span {
+        width: 100%;
+        height: auto;
+        line-height: 1;
+        font-size: eleVar('menu', 'compact-font-size');
+        margin-top: eleVar('menu', 'compact-title-margin');
+        box-sizing: border-box;
+        text-align: center;
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        visibility: inherit;
+      }
+    }
+
+    & > .el-menu-item::after,
+    & > .el-menu-item-group > ul > .el-menu-item::after {
+      display: none;
+    }
+
+    & > .el-sub-menu.is-active > .el-sub-menu__title {
+      transition: none;
+    }
+  }
+
+  &.is-compact:not(.is-compact-collapse) {
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      .el-badge {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        margin: 0;
+      }
+    }
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > .el-menu-item-group__title {
+      .el-badge .el-badge__content:not(.is-dot) {
+        width: auto;
+        height: 18px;
+        line-height: 18px;
+        border-radius: 24px;
+        min-width: 20px;
+        font-size: 12px;
+        padding: 0 4px;
+      }
+    }
+  }
+
+  &.is-compact-collapse {
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      padding: eleVar('menu', 'compact-collapse-item-padding');
+
+      .el-icon:not(.el-sub-menu__icon-arrow) {
+        font-size: eleVar('menu', 'collapse-icon-size');
+      }
+
+      & > span {
+        display: none;
+      }
+    }
+  }
+
   /* 彩色图标 */
   &.is-colorful {
     &.el-menu > li,
@@ -521,15 +614,20 @@
         height: eleVar('menu-colorful', 'dot-size');
         margin: eleVar('menu-colorful', 'dot-margin');
         background: eleVar('menu-colorful', 'dot-color');
-        transition: background-color $ele-transition;
+        transition: background-color $transition-base;
         border-radius: 50%;
       }
 
-      .el-menu-item:not(.is-disabled):hover::before,
+      .el-menu-item:not(.is-disabled):not(.is-active),
+      .el-sub-menu:not(.is-disabled):not(.is-active) .el-sub-menu__title {
+        &:hover::before {
+          background: eleVar('menu-colorful', 'dot-hover-color');
+        }
+      }
+
       .el-menu-item.is-active::before,
-      .el-sub-menu:not(.is-disabled) .el-sub-menu__title:hover::before,
       .el-sub-menu.is-active .el-sub-menu__title::before {
-        background: eleVar('menu-colorful', 'dot-hover-color');
+        background: eleVar('menu-colorful', 'dot-active-color');
       }
     }
 
@@ -561,7 +659,7 @@
         }
 
         &:active {
-          background: eleVar('menu-horizontal', 'dark-active-bg');
+          background: eleVar('menu-horizontal', 'dark-focus-bg');
         }
       }
 
@@ -590,7 +688,7 @@
         }
 
         &:active {
-          background: eleVar('menu-dark', 'active-bg');
+          background: eleVar('menu-dark', 'focus-bg');
         }
       }
 
@@ -630,16 +728,22 @@
           background: eleVar('menu-colorful', 'dark-dot-color');
         }
 
-        .el-menu-item:not(.is-disabled):hover::before,
+        .el-menu-item:not(.is-disabled):not(.is-active),
+        .el-sub-menu:not(.is-disabled):not(.is-active) .el-sub-menu__title {
+          &:hover::before {
+            background: eleVar('menu-colorful', 'dark-dot-hover-color');
+          }
+        }
+
         .el-menu-item.is-active::before,
-        .el-sub-menu:not(.is-disabled) .el-sub-menu__title:hover::before,
         .el-sub-menu.is-active .el-sub-menu__title::before {
-          background: eleVar('menu-colorful', 'dark-dot-hover-color');
+          background: eleVar('menu-colorful', 'dark-dot-active-color');
         }
       }
     }
   }
 
+  /* 水平菜单溢出省略 */
   .ele-sub-menu-ellipsis > .el-sub-menu__title {
     .el-icon:not(.el-sub-menu__icon-arrow) {
       margin: 0;

package/es/ele-menus/types.d.ts

@@ -7,6 +7,7 @@ import type {
   ElMenuItemGroupProps,
   ElBadgeProps
 } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
 
 /**
  * 菜单数据
@@ -39,6 +40,11 @@ export interface MenuItem
   overflow?: boolean;
 }
 
+/**
+ * 菜单展示模式
+ */
+export type MenuMode = 'horizontal' | 'vertical' | 'compact';
+
 /**
  * 主题
  */
@@ -73,6 +79,11 @@ export interface EllipsisProps extends ElSubMenuProps {
   iconStyle?: StyleValue;
 }
 
+/**
+ * 菜单文本溢出提示
+ */
+export type TextEllipsisTooltip = boolean | EleTooltipProps;
+
 /**
  * 生成菜单数据返回结果
  */

package/es/ele-menus/util.d.ts

@@ -51,8 +51,9 @@ export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNod
  * @param webkit 是否是webkit内核
  * @param onParentMouseenter 父级菜单项鼠标进入事件
  * @param onParentMouseleave 父级菜单项鼠标离开事件
+ * @param parentIsGroup 父级是否是分组菜单
  */
-export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: MenuItemEvent, onItemMouseenter?: MenuItemEvent, onItemMouseleave?: MenuItemEvent, webkit?: boolean, onParentMouseenter?: MenuItemEvent, onParentMouseleave?: MenuItemEvent): VNode[];
+export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: MenuItemEvent, onItemMouseenter?: MenuItemEvent, onItemMouseleave?: MenuItemEvent, webkit?: boolean, onParentMouseenter?: MenuItemEvent, onParentMouseleave?: MenuItemEvent, parentIsGroup?: boolean): VNode[];
 /**
  * 生成气泡菜单的类名
  * @param customerClass 自定义的类名

package/es/ele-menus/util.js

@@ -61,7 +61,7 @@ function getNodes(icons, titles, badge, trigger) {
   }
   return nodes;
 }
-function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit, onParentMouseenter, onParentMouseleave) {
+function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit, onParentMouseenter, onParentMouseleave, parentIsGroup) {
   const nodes = [];
   if (!items) {
     return nodes;
@@ -122,7 +122,7 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
       onParentMouseenter,
       onParentMouseleave
     );
-    if (item.group === true) {
+    if (item.group === true && !parentIsGroup) {
       nodes.push(
         h(ElMenuItemGroup, { key }, {
           default: () => {
@@ -142,7 +142,8 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
               onItemMouseleave,
               webkit,
               onParentMouseenter,
-              onParentMouseleave
+              onParentMouseleave,
+              true
             );
           },
           title: () => getNodes(iNodes, tNodes, bNode, parentTriggerNode)

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

@@ -37,10 +37,9 @@ declare const _default: import('vue').DefineComponent<{
     resizeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     responsive: {
         type: BooleanConstructor;
-        /** 弹窗类名 */
         default: null;
     };
-    form: BooleanConstructor;
+    form: BooleanConstructor; /** 弹窗类名 */
     appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string & {}) | (() => string) | ((new (...args: any[]) => string & {}) | (() => string))[], unknown, unknown, "body", boolean>;
     beforeClose: {
         readonly type: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
@@ -151,10 +150,9 @@ declare const _default: import('vue').DefineComponent<{
     resizeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     responsive: {
         type: BooleanConstructor;
-        /** 弹窗类名 */
         default: null;
     };
-    form: BooleanConstructor;
+    form: BooleanConstructor; /** 弹窗类名 */
     appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string & {}) | (() => string) | ((new (...args: any[]) => string & {}) | (() => string))[], unknown, unknown, "body", boolean>;
     beforeClose: {
         readonly type: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
@@ -206,10 +204,10 @@ declare const _default: import('vue').DefineComponent<{
     ariaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
 }>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onOpen?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
@@ -218,8 +216,9 @@ declare const _default: import('vue').DefineComponent<{
     title: string;
     center: boolean;
     modelValue: boolean;
-    appendTo: string;
+    multiple: boolean;
     appendToBody: boolean;
+    appendTo: string;
     destroyOnClose: boolean;
     closeOnClickModal: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     closeOnPressEscape: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -236,7 +235,6 @@ declare const _default: import('vue').DefineComponent<{
     showClose: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     ariaLevel: string;
     minWidth: number;
-    multiple: boolean;
     minHeight: number;
     responsive: boolean;
     resetOnClose: boolean;

package/es/ele-modal/index.js

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, unref, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, withModifiers, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
 import { ElDialog, ElIcon } from "element-plus";
 import { CloseOutlined, CompressOutlined, ExpandOutlined, ResizeOutlined } from "../icons";
-import { useLayoutState } from "../ele-config-provider/receiver";
 import ReceiverView from "../ele-config-provider/components/receiver-view";
+import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
 import { getModalContainer, wrapperClass, closedClass, getPositionMargin, handleMove, handleResize, topModal, resetModalStyle } from "./util";
 import { modalProps, modalEmits } from "./props";
 const _sfc_main = defineComponent({
@@ -21,13 +21,14 @@ const _sfc_main = defineComponent({
   emits: modalEmits,
   setup(props, { emit }) {
     const state = { isInit: true };
-    const layoutProvide = useLayoutState();
+    const layoutState = useLayoutState();
+    const isResponsive = useResponsive(props);
     const dialogRef = ref(null);
     const isFullscreen = ref(props.fullscreen ?? false);
     const isActivated = ref(true);
     const dialogClass = computed(() => {
       const classes = [wrapperClass];
-      if (props.responsive ?? layoutProvide.responsive ?? true) {
+      if (props.responsive ?? isResponsive.value ?? true) {
         classes.push("ele-modal-responsive");
       }
       if (props.alignCenter || props.position === "center") {
@@ -80,7 +81,7 @@ const _sfc_main = defineComponent({
         props.inner,
         props.multiple,
         props.appendTo,
-        layoutProvide.modalsEl
+        layoutState.modalsEl
       );
     });
     const teleportDisabled = computed(() => {
@@ -287,7 +288,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 4),
           _ctx.maxable ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: "ele-modal-tool",
+            class: "ele-modal-tool ele-modal-tool-max",
             style: normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
             onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {

package/es/ele-modal/style/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -1,3 +1,3 @@
-import 'element-plus/es/components/dialog/style/index';
-import 'element-plus/es/components/icon/style/index';
-import './index.scss';
+import "element-plus/es/components/dialog/style/index";
+import "element-plus/es/components/icon/style/index";
+import "./index.scss";

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

@@ -71,7 +71,7 @@
   color: eleVar('modal', 'icon-color');
   font-size: eleVar('modal', 'icon-font-size');
   border-radius: eleVar('modal', 'icon-radius');
-  transition: (color $ele-transition, background-color $ele-transition);
+  transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
 
@@ -210,7 +210,9 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
+  box-sizing: border-box;
   z-index: elVar('index', 'popper');
+  overflow: hidden;
 }
 
 .ele-modal-multiple {

package/es/ele-modal/util.d.ts

@@ -11,7 +11,7 @@ export declare const closedClass = "ele-modal-closed";
  * @param appendTo 自定义插入的容器
  * @param modalsEl 限制在主体内部时的容器
  */
-export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string, modalsEl?: HTMLElement | null): Element | string;
+export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string, modalsEl?: HTMLElement | null): HTMLElement | string;
 /**
  * 弹窗移动事件处理
  * @param modalEl 弹窗节点

package/es/ele-modal/util.js

@@ -1,4 +1,4 @@
-import { getCurrentStyle } from "../utils/core";
+import { queryChild, getCurrentStyle } from "../utils/core";
 const containerClass = "ele-modal-container";
 const wrapperClass = "ele-modal";
 const closedClass = "ele-modal-closed";
@@ -21,9 +21,7 @@ function canMoveOut(moveOut, direction) {
 function getModalContainer(inner, multiple, appendTo, modalsEl) {
   if (multiple) {
     const parent = (inner ? modalsEl : void 0) || document.body;
-    const wrapper = Array.from(parent.children).find(
-      (el) => el.classList.contains(containerClass)
-    );
+    const wrapper = queryChild(parent, containerClass);
     if (wrapper) {
       return wrapper;
     }

package/es/ele-page/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-page/style/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

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

@@ -58,16 +58,17 @@
 }
 
 /* 内容定宽 */
-.ele-admin-limited .ele-page:not(.is-plain) {
-  margin: 0 auto;
-  width: eleVar('page', 'max-width');
-  max-width: 100%;
+.ele-admin-limited > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+  & > .ele-admin-content > .ele-page:not(.is-plain) {
+    margin: 0 auto;
+    width: eleVar('page', 'max-width');
+    max-width: 100%;
+  }
 }
 
 /* 按钮风格页签 */
-.ele-admin-tab-card.ele-admin-open-tab .ele-admin-content {
-  & > .ele-page:first-child,
-  & > .ele-admin-iframe-wrap + .ele-page {
+.ele-admin-tabs.is-button + .ele-admin-wrapper > .ele-admin-content {
+  & > .ele-page:first-child {
     padding-top: 0;
   }
 }

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

@@ -8,6 +8,10 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('./types').PaginationType>;
         default: string;
     };
+    isFixedPopper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     pageSize: NumberConstructor;
     defaultPageSize: NumberConstructor;
     pageCount: NumberConstructor;
@@ -29,6 +33,7 @@ declare const _default: import('vue').DefineComponent<{
 }, {
     isInfinite: import('vue').ComputedRef<boolean>;
     pageTotal: import('vue').ComputedRef<number | undefined>;
+    sizesPopperClass: import('vue').ComputedRef<string>;
     onUpdateCurrentPage: (currentPage: number) => void;
     onUpdatePageSize: (pageSize: number) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -44,6 +49,10 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('./types').PaginationType>;
         default: string;
     };
+    isFixedPopper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     pageSize: NumberConstructor;
     defaultPageSize: NumberConstructor;
     pageCount: NumberConstructor;
@@ -68,6 +77,7 @@ declare const _default: import('vue').DefineComponent<{
 }, {
     type: import('./types').PaginationType;
     hasNext: boolean;
+    isFixedPopper: boolean;
     pagerCount: number;
     layout: string;
     pageSizes: number[];

package/es/ele-pagination/index.js

@@ -18,13 +18,29 @@ const _sfc_main = defineComponent({
       const num = props.total == null ? void 0 : Number(props.total);
       return num == null || isNaN(num) ? void 0 : num;
     });
+    const sizesPopperClass = computed(() => {
+      const classes = ["ele-pagination-popper"];
+      if (props.isFixedPopper) {
+        classes.push("is-fixed");
+      }
+      if (props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      return classes.join(" ");
+    });
     const onUpdateCurrentPage = (currentPage) => {
       emit("update:currentPage", currentPage);
     };
     const onUpdatePageSize = (pageSize) => {
       emit("update:pageSize", pageSize);
     };
-    return { isInfinite, pageTotal, onUpdateCurrentPage, onUpdatePageSize };
+    return {
+      isInfinite,
+      pageTotal,
+      sizesPopperClass,
+      onUpdateCurrentPage,
+      onUpdatePageSize
+    };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -48,7 +64,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     defaultCurrentPage: _ctx.defaultCurrentPage,
     layout: _ctx.layout,
     pageSizes: _ctx.pageSizes,
-    popperClass: _ctx.popperClass,
+    popperClass: _ctx.sizesPopperClass,
     prevText: _ctx.prevText,
     prevIcon: _ctx.prevIcon,
     nextText: _ctx.nextText,

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

@@ -17,6 +17,11 @@ export declare const paginationProps: {
         type: PropType<PaginationType>;
         default: string;
     };
+    /** 每页数量选择下拉是否使用固定定位 */
+    isFixedPopper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     pageSize: NumberConstructor;
     defaultPageSize: NumberConstructor;
     pageCount: NumberConstructor;

package/es/ele-pagination/props.js

@@ -12,6 +12,11 @@ const paginationProps = {
   type: {
     type: String,
     default: "circle"
+  },
+  /** 每页数量选择下拉是否使用固定定位 */
+  isFixedPopper: {
+    type: Boolean,
+    default: true
   }
 };
 const paginationEmits = {

package/es/ele-pagination/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-pagination/style/index.js

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/pagination/style/index';
-import './index.scss';
+import "element-plus/es/components/pagination/style/index";
+import "./index.scss";

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

@@ -34,7 +34,7 @@
       font-size: eleVar('pagination', 'font-size');
       background: eleVar('pagination', 'bg');
       border: eleVar('pagination', 'border');
-      transition: (color $ele-transition, background-color $ele-transition);
+      transition: (color $transition-base, background-color $transition-base);
 
       &:hover {
         color: eleVar('pagination', 'hover-color');
@@ -209,3 +209,10 @@
     }
   }
 }
+
+/* 每页数量选择下拉框 */
+.ele-pagination-popper.el-popper {
+  &.is-fixed {
+    position: fixed !important;
+  }
+}