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

package/es/utils/menu-util.js

@@ -1,5 +1,6 @@
-import { defineComponent, computed, h } from "vue";
-import { useProLayoutState } from "../ele-pro-layout/util";
+import { defineComponent, ref, computed, h } from "vue";
+import { useRoute } from "vue-router";
+import { useProLayoutState, getIframeSrc } from "../ele-pro-layout/util";
 import { isExternalLink, findTree } from "./core";
 function camelCase(str) {
   const val = str.replace(/[-|/](\w)/g, (_, c) => c ? c.toUpperCase() : "");
@@ -23,13 +24,18 @@ function getRouteComponent(menu, name, func) {
       name,
       setup() {
         var _a;
-        const src = menu.component;
-        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
         const proLayoutState = useProLayoutState();
+        const route = useRoute();
+        const { fullPath } = route;
+        const iframeSrc = ref(getIframeSrc(fullPath, menu.component));
+        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
         const keepAlive = computed(() => !!proLayoutState.keepAlive);
         return () => {
           if (!isAlive || !keepAlive.value) {
-            return h("iframe", { src, class: "ele-admin-iframe" });
+            return h("iframe", {
+              src: iframeSrc.value,
+              class: "ele-admin-iframe"
+            });
           }
           return h("div", { class: "ele-none", style: { display: "none" } });
         };

package/es/utils/message-box.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, h } from "vue";
+import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, unref, h } from "vue";
 import { ElMessageBox } from "element-plus";
 import { useGlobalProps } from "../ele-config-provider/receiver";
 import { useLayoutState } from "../ele-pro-layout/util";
@@ -48,8 +48,12 @@ function useMessageBox(globalOpt) {
           state.wrapEl = getWrapEl(layoutState.modalsEl);
         }
         opt.appendTo = state.wrapEl;
+      } else if (opt.appendTo != null) {
+        opt.appendTo = unref(opt.appendTo);
       }
       opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = unref(opt.appendTo);
     }
     const classes = ["ele-message-box"];
     if (opt.customClass) {

package/es/utils/message.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, provide, inject, onActivated, onDeactivated, onBeforeUnmount, isVNode, h, mergeProps } from "vue";
+import { getCurrentInstance, provide, inject, onActivated, onDeactivated, onBeforeUnmount, unref, isVNode, h, mergeProps } from "vue";
 import { ElMessage } from "element-plus";
 import { useGlobalProps } from "../ele-config-provider/receiver";
 import { useLayoutState } from "../ele-pro-layout/util";
@@ -48,7 +48,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     opt.message = params;
   }
   opt.type = type ?? opt.type;
-  opt.appendTo = opt.appendTo ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
+  opt.appendTo = (opt.appendTo == null ? void 0 : unref(opt.appendTo)) ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
   const classes = ["ele-message"];
   if (opt.original === "plain") {
     classes.push("is-plain-alert");

package/lib/core-components.cjs

@@ -22,35 +22,36 @@ const index$i = require("./ele-ellipsis/index");
 const index$j = require("./ele-file-list/index");
 const index$k = require("./ele-file-list-tool/index");
 const index$l = require("./ele-icon-select/index");
-const index$m = require("./ele-loading/index");
-const index$n = require("./ele-menus/index");
-const index$o = require("./ele-modal/index");
-const index$p = require("./ele-page/index");
-const index$q = require("./ele-pagination/index");
-const index$r = require("./ele-popconfirm/index");
-const index$s = require("./ele-popover/index");
-const index$t = require("./ele-printer/index");
-const index$u = require("./ele-pro-layout/index");
-const index$v = require("./ele-pro-table/index");
-const index$w = require("./ele-qr-code/index");
-const index$x = require("./ele-qr-code-svg/index");
-const index$y = require("./ele-segmented/index");
-const index$z = require("./ele-split-panel/index");
-const index$A = require("./ele-steps/index");
-const index$B = require("./ele-tabs/index");
-const index$C = require("./ele-tab-tool/index");
-const index$D = require("./ele-tab-wrap/index");
-const index$E = require("./ele-table/index");
-const index$F = require("./ele-table-select/index");
-const index$G = require("./ele-text/index");
-const index$H = require("./ele-tool/index");
-const index$I = require("./ele-toolbar/index");
-const index$J = require("./ele-tooltip/index");
-const index$K = require("./ele-tour/index");
-const index$L = require("./ele-tree-select/index");
-const index$M = require("./ele-upload-list/index");
-const index$N = require("./ele-virtual-table/index");
-const index$O = require("./ele-watermark/index");
+const index$m = require("./ele-image-viewer/index");
+const index$n = require("./ele-loading/index");
+const index$o = require("./ele-menus/index");
+const index$p = require("./ele-modal/index");
+const index$q = require("./ele-page/index");
+const index$r = require("./ele-pagination/index");
+const index$s = require("./ele-popconfirm/index");
+const index$t = require("./ele-popover/index");
+const index$u = require("./ele-printer/index");
+const index$v = require("./ele-pro-layout/index");
+const index$w = require("./ele-pro-table/index");
+const index$x = require("./ele-qr-code/index");
+const index$y = require("./ele-qr-code-svg/index");
+const index$z = require("./ele-segmented/index");
+const index$A = require("./ele-split-panel/index");
+const index$B = require("./ele-steps/index");
+const index$C = require("./ele-tabs/index");
+const index$D = require("./ele-tab-tool/index");
+const index$E = require("./ele-tab-wrap/index");
+const index$F = require("./ele-table/index");
+const index$G = require("./ele-table-select/index");
+const index$H = require("./ele-text/index");
+const index$I = require("./ele-tool/index");
+const index$J = require("./ele-toolbar/index");
+const index$K = require("./ele-tooltip/index");
+const index$L = require("./ele-tour/index");
+const index$M = require("./ele-tree-select/index");
+const index$N = require("./ele-upload-list/index");
+const index$O = require("./ele-virtual-table/index");
+const index$P = require("./ele-watermark/index");
 exports.EleAdminLayout = index;
 exports.EleAlert = index$1;
 exports.EleApp = index$2;
@@ -73,32 +74,33 @@ exports.EleEllipsis = index$i;
 exports.EleFileList = index$j;
 exports.EleFileListTool = index$k;
 exports.EleIconSelect = index$l;
-exports.EleLoading = index$m;
-exports.EleMenus = index$n;
-exports.EleModal = index$o;
-exports.ElePage = index$p;
-exports.ElePagination = index$q;
-exports.ElePopconfirm = index$r;
-exports.ElePopover = index$s;
-exports.ElePrinter = index$t;
-exports.EleProLayout = index$u;
-exports.EleProTable = index$v;
-exports.EleQrCode = index$w;
-exports.EleQrCodeSvg = index$x;
-exports.EleSegmented = index$y;
-exports.EleSplitPanel = index$z;
-exports.EleSteps = index$A;
-exports.EleTabs = index$B;
-exports.EleTabTool = index$C;
-exports.EleTabWrap = index$D;
-exports.EleTable = index$E;
-exports.EleTableSelect = index$F;
-exports.EleText = index$G;
-exports.EleTool = index$H;
-exports.EleToolbar = index$I;
-exports.EleTooltip = index$J;
-exports.EleTour = index$K;
-exports.EleTreeSelect = index$L;
-exports.EleUploadList = index$M;
-exports.EleVirtualTable = index$N;
-exports.EleWatermark = index$O;
+exports.EleImageViewer = index$m;
+exports.EleLoading = index$n;
+exports.EleMenus = index$o;
+exports.EleModal = index$p;
+exports.ElePage = index$q;
+exports.ElePagination = index$r;
+exports.ElePopconfirm = index$s;
+exports.ElePopover = index$t;
+exports.ElePrinter = index$u;
+exports.EleProLayout = index$v;
+exports.EleProTable = index$w;
+exports.EleQrCode = index$x;
+exports.EleQrCodeSvg = index$y;
+exports.EleSegmented = index$z;
+exports.EleSplitPanel = index$A;
+exports.EleSteps = index$B;
+exports.EleTabs = index$C;
+exports.EleTabTool = index$D;
+exports.EleTabWrap = index$E;
+exports.EleTable = index$F;
+exports.EleTableSelect = index$G;
+exports.EleText = index$H;
+exports.EleTool = index$I;
+exports.EleToolbar = index$J;
+exports.EleTooltip = index$K;
+exports.EleTour = index$L;
+exports.EleTreeSelect = index$M;
+exports.EleUploadList = index$N;
+exports.EleVirtualTable = index$O;
+exports.EleWatermark = index$P;

package/lib/core-components.d.ts

@@ -20,6 +20,7 @@ export { default as EleEllipsis } from './ele-ellipsis/index';
 export { default as EleFileList } from './ele-file-list/index';
 export { default as EleFileListTool } from './ele-file-list-tool/index';
 export { default as EleIconSelect } from './ele-icon-select/index';
+export { default as EleImageViewer } from './ele-image-viewer/index';
 export { default as EleLoading } from './ele-loading/index';
 export { default as EleMenus } from './ele-menus/index';
 export { default as EleModal } from './ele-modal/index';

package/lib/ele-admin-layout/components/layout-tabs.cjs

@@ -5,7 +5,6 @@ const icons = require("../../icons");
 const EleTabWrap = require("../../ele-tab-wrap/index");
 const EleTabTool = require("../../ele-tab-tool/index");
 const EleTabs = require("../../ele-tabs/index");
-const TabTitle = require("../../ele-tabs/components/tab-title");
 const _sfc_main = vue.defineComponent({
   name: "LayoutTabs",
   components: {
@@ -13,8 +12,7 @@ const _sfc_main = vue.defineComponent({
     HomeOutlined: icons.HomeOutlined,
     EleTabWrap,
     EleTabTool,
-    EleTabs,
-    TabTitle
+    EleTabs
   },
   props: {
     /** 页签数据 */
@@ -42,26 +40,7 @@ const _sfc_main = vue.defineComponent({
     tabContextMenu: (_option) => true,
     tabSortChange: (_data) => true
   },
-  setup(props, { emit }) {
-    const homeRef = vue.ref(null);
-    const tabRef = vue.ref(null);
-    const homeContextMenus = vue.computed(() => {
-      if (typeof props.tabContextMenus === "function") {
-        return props.tabContextMenus();
-      }
-      return props.tabContextMenus;
-    });
-    const handleTabContextOpen = (ref2) => {
-      const $home = homeRef.value;
-      if (!$home || !$home.dropdownRef) {
-        return;
-      }
-      if ($home.dropdownRef !== ref2) {
-        $home.dropdownRef.handleClose();
-      } else if (tabRef.value) {
-        tabRef.value.hideAllDropdown();
-      }
-    };
+  setup(_props, { emit }) {
     const handleTabItemClick = (option) => {
       emit("tabClick", option);
     };
@@ -75,13 +54,9 @@ const _sfc_main = vue.defineComponent({
       emit("tabSortChange", data);
     };
     return {
-      homeRef,
-      tabRef,
-      homeContextMenus,
       handleTabRemove,
       handleTabItemClick,
       handleTabContextMenu,
-      handleTabContextOpen,
       handleTabSortChange
     };
   }
@@ -96,7 +71,6 @@ const _export_sfc = (sfc, props) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_HomeOutlined = vue.resolveComponent("HomeOutlined");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
-  const _component_TabTitle = vue.resolveComponent("TabTitle");
   const _component_EleTabTool = vue.resolveComponent("EleTabTool");
   const _component_EleTabs = vue.resolveComponent("EleTabs");
   const _component_EleTabWrap = vue.resolveComponent("EleTabWrap");
@@ -108,61 +82,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.fixedHome ? (vue.openBlock(), vue.createBlock(_component_EleTabTool, {
         key: 0,
         tab: true,
-        active: _ctx.isHome
+        active: _ctx.isHome,
+        tabName: _ctx.homePath
       }, {
         default: vue.withCtx(() => [
-          vue.createVNode(_component_TabTitle, {
-            ref: "homeRef",
-            active: _ctx.active,
-            tabName: _ctx.homePath,
-            handleClick: true,
-            contextMenu: _ctx.tabContextMenu,
-            contextMenus: _ctx.homeContextMenus,
-            onContextMenu: _ctx.handleTabContextMenu,
-            onContextOpen: _ctx.handleTabContextOpen,
-            onItemClick: _ctx.handleTabItemClick
-          }, vue.createSlots({
-            label: vue.withCtx((slotProps) => [
-              vue.renderSlot(_ctx.$slots, "tabHome", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})), () => [
-                vue.createVNode(_component_ElIcon, {
-                  class: "ele-tab-icon",
-                  style: { "vertical-align": "-3px" }
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_HomeOutlined, { style: { "transform": "scale(1.08)" } })
-                  ]),
-                  _: 1
-                })
-              ])
-            ]),
-            _: 2
-          }, [
-            _ctx.$slots.tabContext ? {
-              name: "contextMenu",
-              fn: vue.withCtx((slotProps) => [
-                vue.renderSlot(_ctx.$slots, "tabContext", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          vue.renderSlot(_ctx.$slots, "tabHome", { active: _ctx.active }, () => [
+            vue.createVNode(_component_ElIcon, {
+              class: "ele-tab-icon",
+              style: { "vertical-align": "-3px" }
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_HomeOutlined, { style: { "transform": "scale(1.08)" } })
               ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["active", "tabName", "contextMenu", "contextMenus", "onContextMenu", "onContextOpen", "onItemClick"])
+              _: 1
+            })
+          ])
         ]),
         _: 3
-      }, 8, ["active"])) : vue.createCommentVNode("", true),
+      }, 8, ["active", "tabName"])) : vue.createCommentVNode("", true),
       _ctx.tabs ? (vue.openBlock(), vue.createBlock(_component_EleTabs, {
         key: 1,
-        ref: "tabRef",
         items: _ctx.tabs,
-        type: _ctx.tabStyle,
         modelValue: _ctx.active,
-        handleClick: true,
         sortable: _ctx.tabSortable,
         contextMenu: _ctx.tabContextMenu,
         contextMenus: _ctx.tabContextMenus,
         mousewheel: true,
+        handleClick: true,
         onTabRemove: _ctx.handleTabRemove,
         onTabItemClick: _ctx.handleTabItemClick,
         onTabContextMenu: _ctx.handleTabContextMenu,
-        onTabContextOpen: _ctx.handleTabContextOpen,
         onTabSortChange: _ctx.handleTabSortChange
       }, vue.createSlots({ _: 2 }, [
         _ctx.$slots.tabTitle ? {
@@ -171,15 +120,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             vue.renderSlot(_ctx.$slots, "tabTitle", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
           ]),
           key: "0"
-        } : void 0,
-        _ctx.$slots.tabContext ? {
-          name: "contextMenu",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, "tabContext", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "1"
         } : void 0
-      ]), 1032, ["items", "type", "modelValue", "sortable", "contextMenu", "contextMenus", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabContextOpen", "onTabSortChange"])) : vue.createCommentVNode("", true),
+      ]), 1032, ["items", "modelValue", "sortable", "contextMenu", "contextMenus", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
       vue.renderSlot(_ctx.$slots, "tabExtra", { active: _ctx.active })
     ]),
     _: 3

package/lib/ele-admin-layout/components/layout-tabs.d.ts

@@ -1,7 +1,6 @@
 import { PropType } from 'vue';
-import { EleDropdownProps, EleDropdownInstance, EleTabsInstance } from '../../ele-app/plus';
+import { EleDropdownProps } from '../../ele-app/plus';
 import { TabPaneItem, TabEventOption, ContextMenus } from '../../ele-tabs/types';
-import { TabTitleInstance } from '../../ele-tabs/props';
 import { TabStyle } from '../types';
 
 declare const _default: import('vue').DefineComponent<{
@@ -24,13 +23,9 @@ declare const _default: import('vue').DefineComponent<{
     /** 是否支持拖动排序 */
     tabSortable: BooleanConstructor;
 }, {
-    homeRef: import('vue').Ref<TabTitleInstance>;
-    tabRef: import('vue').Ref<EleTabsInstance>;
-    homeContextMenus: import('vue').ComputedRef<import('../../ele-dropdown/types').DropdownItem[] | undefined>;
     handleTabRemove: (name: string) => void;
     handleTabItemClick: (option: TabEventOption) => void;
     handleTabContextMenu: (option: TabEventOption) => void;
-    handleTabContextOpen: (ref: EleDropdownInstance) => void;
     handleTabSortChange: (data: TabPaneItem[]) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     tabClick: (_option: TabEventOption) => true;

package/lib/ele-admin-layout/index.cjs

@@ -8,7 +8,7 @@ const EleBacktop = require("../ele-backtop/index");
 const LayoutSkeleton = require("./components/layout-skeleton");
 const LayoutTabs = require("./components/layout-tabs");
 const props = require("./props");
-const tabSlots = ["tabTitle", "tabContext", "tabExtra", "tabHome"];
+const tabSlots = ["tabTitle", "tabExtra", "tabHome"];
 const ownSlots = [
   "logo",
   "logoTitle",
@@ -102,6 +102,10 @@ const _sfc_main = vue.defineComponent({
     const getModalsEl = () => {
       return modalsRef.value;
     };
+    const getBodyWrapperEl = () => {
+      const contentEl = getContentEl();
+      return contentEl == null ? void 0 : contentEl.parentElement;
+    };
     const sidebarScrollToActive = () => {
       stopSidebarMenuTimer();
       if (!props$1.menuScrollToActive || sidebarMenuRef.value == null || isCollapseMobile.value || isMixSidebar.value && isCollapseSidebar.value) {
@@ -207,7 +211,8 @@ const _sfc_main = vue.defineComponent({
       fixedHeader: isFixedHeader.value,
       fixedBody: props$1.fixedBody,
       modalsEl: null,
-      getModalsEl
+      getModalsEl,
+      getBodyWrapperEl
     });
     vue.provide(props.LAYOUT_KEY, layoutProvide);
     vue.watch(

package/lib/ele-admin-layout/types.d.ts

@@ -49,4 +49,6 @@ export interface LayoutProvide {
   modalsEl?: HTMLElement | null;
   /** 获取模态框容器节点 */
   getModalsEl?: () => HTMLElement | null;
+  /** 获取内容容器节点 */
+  getBodyWrapperEl?: () => HTMLElement | null | undefined;
 }

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

@@ -40,6 +40,7 @@ import type {
   // ElImage
   ElImage,
   ImageProps,
+  ElImageViewer,
   // ElInput
   ElInput,
   InputProps,
@@ -190,6 +191,8 @@ export type ElImageInstance = InstanceType<typeof ElImage> | null;
 
 export type ElImageProps = ComponentProps<ImageProps>;
 
+export type ElImageViewerInstance = InstanceType<typeof ElImageViewer> | null;
+
 /**
  * ElInput
  */

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

@@ -8,6 +8,8 @@ import type EleDataTable from '../ele-data-table/index';
 import type { DataTableProps } from '../ele-data-table/props';
 import type EleDropdown from '../ele-dropdown/index';
 import type { DropdownProps } from '../ele-dropdown/props';
+import type { FileListProps } from '../ele-file-list/props';
+import type { ImageViewerProps } from '../ele-image-viewer/props';
 import type { LoadingProps } from '../ele-loading/props';
 import type EleMenus from '../ele-menus/index';
 import type { MenusProps } from '../ele-menus/props';
@@ -28,6 +30,8 @@ import type { ToolProps } from '../ele-tool/props';
 import type { ToolbarProps } from '../ele-toolbar/props';
 import type EleTooltip from '../ele-tooltip/index';
 import type { TooltipProps } from '../ele-tooltip/props';
+import type EleUploadList from '../ele-upload-list/index';
+import type { UploadListProps } from '../ele-upload-list/props';
 import type EleVirtualTable from '../ele-virtual-table/index';
 import type { ComponentProps } from './types';
 
@@ -75,6 +79,16 @@ export type EleDropdownInstance = InstanceType<typeof EleDropdown> | null;
 
 export type EleDropdownProps = ComponentProps<DropdownProps>;
 
+/**
+ * EleFileList
+ */
+export type EleFileListProps = ComponentProps<FileListProps>;
+
+/**
+ * EleImageViewer
+ */
+export type EleImageViewerProps = ComponentProps<ImageViewerProps>;
+
 /**
  * EleLoading
  */
@@ -154,6 +168,13 @@ export type EleTooltipInstance = InstanceType<typeof EleTooltip> | null;
 
 export type EleTooltipProps = Partial<TooltipProps>;
 
+/**
+ * EleUploadList
+ */
+export type EleUploadListInstance = InstanceType<typeof EleUploadList> | null;
+
+export type EleUploadListProps = Partial<UploadListProps>;
+
 /**
  * EleVirtualTable
  */

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

@@ -4,7 +4,6 @@
 @use './checkbox/css-var.scss' as *;
 @use './date-picker/css-var.scss' as *;
 @use './descriptions/css-var.scss' as *;
-@use './image-viewer/css-var.scss' as *;
 @use './input/css-var.scss' as *;
 @use './message-box/css-var.scss' as *;
 @use './notification/css-var.scss' as *;
@@ -22,7 +21,6 @@
   @include set-el-checkbox-var($var);
   @include set-el-date-picker-var($var);
   @include set-el-descriptions-var($var);
-  @include set-el-image-viewer-var($var);
   @include set-el-input-var($var);
   @include set-el-message-box-var($var);
   @include set-el-notification-var($var);

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

@@ -6,7 +6,6 @@ require("./checkbox/index");
 require("./color-picker/index");
 require("./date-picker/index");
 require("./descriptions/index");
-require("./image-viewer/index");
 require("./input/index");
 require("./message-box/index");
 require("./notification/index");

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/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-basic-select/index.d.ts

@@ -109,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;