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

package/es/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/es/core-components.js

@@ -20,35 +20,36 @@ import { default as default20 } from "./ele-ellipsis/index";
 import { default as default21 } from "./ele-file-list/index";
 import { default as default22 } from "./ele-file-list-tool/index";
 import { default as default23 } from "./ele-icon-select/index";
-import { default as default24 } from "./ele-loading/index";
-import { default as default25 } from "./ele-menus/index";
-import { default as default26 } from "./ele-modal/index";
-import { default as default27 } from "./ele-page/index";
-import { default as default28 } from "./ele-pagination/index";
-import { default as default29 } from "./ele-popconfirm/index";
-import { default as default30 } from "./ele-popover/index";
-import { default as default31 } from "./ele-printer/index";
-import { default as default32 } from "./ele-pro-layout/index";
-import { default as default33 } from "./ele-pro-table/index";
-import { default as default34 } from "./ele-qr-code/index";
-import { default as default35 } from "./ele-qr-code-svg/index";
-import { default as default36 } from "./ele-segmented/index";
-import { default as default37 } from "./ele-split-panel/index";
-import { default as default38 } from "./ele-steps/index";
-import { default as default39 } from "./ele-tabs/index";
-import { default as default40 } from "./ele-tab-tool/index";
-import { default as default41 } from "./ele-tab-wrap/index";
-import { default as default42 } from "./ele-table/index";
-import { default as default43 } from "./ele-table-select/index";
-import { default as default44 } from "./ele-text/index";
-import { default as default45 } from "./ele-tool/index";
-import { default as default46 } from "./ele-toolbar/index";
-import { default as default47 } from "./ele-tooltip/index";
-import { default as default48 } from "./ele-tour/index";
-import { default as default49 } from "./ele-tree-select/index";
-import { default as default50 } from "./ele-upload-list/index";
-import { default as default51 } from "./ele-virtual-table/index";
-import { default as default52 } from "./ele-watermark/index";
+import { default as default24 } from "./ele-image-viewer/index";
+import { default as default25 } from "./ele-loading/index";
+import { default as default26 } from "./ele-menus/index";
+import { default as default27 } from "./ele-modal/index";
+import { default as default28 } from "./ele-page/index";
+import { default as default29 } from "./ele-pagination/index";
+import { default as default30 } from "./ele-popconfirm/index";
+import { default as default31 } from "./ele-popover/index";
+import { default as default32 } from "./ele-printer/index";
+import { default as default33 } from "./ele-pro-layout/index";
+import { default as default34 } from "./ele-pro-table/index";
+import { default as default35 } from "./ele-qr-code/index";
+import { default as default36 } from "./ele-qr-code-svg/index";
+import { default as default37 } from "./ele-segmented/index";
+import { default as default38 } from "./ele-split-panel/index";
+import { default as default39 } from "./ele-steps/index";
+import { default as default40 } from "./ele-tabs/index";
+import { default as default41 } from "./ele-tab-tool/index";
+import { default as default42 } from "./ele-tab-wrap/index";
+import { default as default43 } from "./ele-table/index";
+import { default as default44 } from "./ele-table-select/index";
+import { default as default45 } from "./ele-text/index";
+import { default as default46 } from "./ele-tool/index";
+import { default as default47 } from "./ele-toolbar/index";
+import { default as default48 } from "./ele-tooltip/index";
+import { default as default49 } from "./ele-tour/index";
+import { default as default50 } from "./ele-tree-select/index";
+import { default as default51 } from "./ele-upload-list/index";
+import { default as default52 } from "./ele-virtual-table/index";
+import { default as default53 } from "./ele-watermark/index";
 export {
   default2 as EleAdminLayout,
   default3 as EleAlert,
@@ -72,33 +73,34 @@ export {
   default21 as EleFileList,
   default22 as EleFileListTool,
   default23 as EleIconSelect,
-  default24 as EleLoading,
-  default25 as EleMenus,
-  default26 as EleModal,
-  default27 as ElePage,
-  default28 as ElePagination,
-  default29 as ElePopconfirm,
-  default30 as ElePopover,
-  default31 as ElePrinter,
-  default32 as EleProLayout,
-  default33 as EleProTable,
-  default34 as EleQrCode,
-  default35 as EleQrCodeSvg,
-  default36 as EleSegmented,
-  default37 as EleSplitPanel,
-  default38 as EleSteps,
-  default40 as EleTabTool,
-  default41 as EleTabWrap,
-  default42 as EleTable,
-  default43 as EleTableSelect,
-  default39 as EleTabs,
-  default44 as EleText,
-  default45 as EleTool,
-  default46 as EleToolbar,
-  default47 as EleTooltip,
-  default48 as EleTour,
-  default49 as EleTreeSelect,
-  default50 as EleUploadList,
-  default51 as EleVirtualTable,
-  default52 as EleWatermark
+  default24 as EleImageViewer,
+  default25 as EleLoading,
+  default26 as EleMenus,
+  default27 as EleModal,
+  default28 as ElePage,
+  default29 as ElePagination,
+  default30 as ElePopconfirm,
+  default31 as ElePopover,
+  default32 as ElePrinter,
+  default33 as EleProLayout,
+  default34 as EleProTable,
+  default35 as EleQrCode,
+  default36 as EleQrCodeSvg,
+  default37 as EleSegmented,
+  default38 as EleSplitPanel,
+  default39 as EleSteps,
+  default41 as EleTabTool,
+  default42 as EleTabWrap,
+  default43 as EleTable,
+  default44 as EleTableSelect,
+  default40 as EleTabs,
+  default45 as EleText,
+  default46 as EleTool,
+  default47 as EleToolbar,
+  default48 as EleTooltip,
+  default49 as EleTour,
+  default50 as EleTreeSelect,
+  default51 as EleUploadList,
+  default52 as EleVirtualTable,
+  default53 as EleWatermark
 };

package/es/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/es/ele-admin-layout/components/layout-tabs.js

@@ -1,10 +1,9 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, createSlots, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode } from "vue";
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createCommentVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
 import { ElIcon } from "element-plus";
 import { HomeOutlined } from "../../icons";
 import EleTabWrap from "../../ele-tab-wrap/index";
 import EleTabTool from "../../ele-tab-tool/index";
 import EleTabs from "../../ele-tabs/index";
-import TabTitle from "../../ele-tabs/components/tab-title";
 const _sfc_main = defineComponent({
   name: "LayoutTabs",
   components: {
@@ -12,8 +11,7 @@ const _sfc_main = defineComponent({
     HomeOutlined,
     EleTabWrap,
     EleTabTool,
-    EleTabs,
-    TabTitle
+    EleTabs
   },
   props: {
     /** 页签数据 */
@@ -41,26 +39,7 @@ const _sfc_main = defineComponent({
     tabContextMenu: (_option) => true,
     tabSortChange: (_data) => true
   },
-  setup(props, { emit }) {
-    const homeRef = ref(null);
-    const tabRef = ref(null);
-    const homeContextMenus = 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);
     };
@@ -74,13 +53,9 @@ const _sfc_main = defineComponent({
       emit("tabSortChange", data);
     };
     return {
-      homeRef,
-      tabRef,
-      homeContextMenus,
       handleTabRemove,
       handleTabItemClick,
       handleTabContextMenu,
-      handleTabContextOpen,
       handleTabSortChange
     };
   }
@@ -95,7 +70,6 @@ const _export_sfc = (sfc, props) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_HomeOutlined = resolveComponent("HomeOutlined");
   const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_TabTitle = resolveComponent("TabTitle");
   const _component_EleTabTool = resolveComponent("EleTabTool");
   const _component_EleTabs = resolveComponent("EleTabs");
   const _component_EleTabWrap = resolveComponent("EleTabWrap");
@@ -107,61 +81,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.fixedHome ? (openBlock(), createBlock(_component_EleTabTool, {
         key: 0,
         tab: true,
-        active: _ctx.isHome
+        active: _ctx.isHome,
+        tabName: _ctx.homePath
       }, {
         default: withCtx(() => [
-          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
-          }, createSlots({
-            label: withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "tabHome", normalizeProps(guardReactiveProps(slotProps || {})), () => [
-                createVNode(_component_ElIcon, {
-                  class: "ele-tab-icon",
-                  style: { "vertical-align": "-3px" }
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_HomeOutlined, { style: { "transform": "scale(1.08)" } })
-                  ]),
-                  _: 1
-                })
-              ])
-            ]),
-            _: 2
-          }, [
-            _ctx.$slots.tabContext ? {
-              name: "contextMenu",
-              fn: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "tabContext", normalizeProps(guardReactiveProps(slotProps || {})))
+          renderSlot(_ctx.$slots, "tabHome", { active: _ctx.active }, () => [
+            createVNode(_component_ElIcon, {
+              class: "ele-tab-icon",
+              style: { "vertical-align": "-3px" }
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_HomeOutlined, { style: { "transform": "scale(1.08)" } })
               ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["active", "tabName", "contextMenu", "contextMenus", "onContextMenu", "onContextOpen", "onItemClick"])
+              _: 1
+            })
+          ])
         ]),
         _: 3
-      }, 8, ["active"])) : createCommentVNode("", true),
+      }, 8, ["active", "tabName"])) : createCommentVNode("", true),
       _ctx.tabs ? (openBlock(), 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
       }, createSlots({ _: 2 }, [
         _ctx.$slots.tabTitle ? {
@@ -170,15 +119,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "tabTitle", normalizeProps(guardReactiveProps(slotProps || {})))
           ]),
           key: "0"
-        } : void 0,
-        _ctx.$slots.tabContext ? {
-          name: "contextMenu",
-          fn: withCtx((slotProps) => [
-            renderSlot(_ctx.$slots, "tabContext", normalizeProps(guardReactiveProps(slotProps || {})))
-          ]),
-          key: "1"
         } : void 0
-      ]), 1032, ["items", "type", "modelValue", "sortable", "contextMenu", "contextMenus", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabContextOpen", "onTabSortChange"])) : createCommentVNode("", true),
+      ]), 1032, ["items", "modelValue", "sortable", "contextMenu", "contextMenus", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabSortChange"])) : createCommentVNode("", true),
       renderSlot(_ctx.$slots, "tabExtra", { active: _ctx.active })
     ]),
     _: 3

package/es/ele-admin-layout/index.js

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

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

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

package/es/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/es/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/es/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/es/ele-app/style/overwrite/date-picker/index.scss

@@ -244,7 +244,7 @@
   .el-month-table td {
     width: auto;
 
-    .cell {
+    .el-date-table-cell__text {
       color: eleVar('datepicker', 'color');
       width: eleVar('datepicker', 'year-width');
       height: eleVar('datepicker', 'year-height');
@@ -261,18 +261,18 @@
       transform: none;
     }
 
-    &.today .cell {
+    &.today .el-date-table-cell__text {
       color: eleVar('datepicker', 'today-color');
       font-weight: eleVar('datepicker', 'today-weight');
       border: eleVar('datepicker', 'today-border');
     }
 
-    .cell:hover {
+    .el-date-table-cell__text:hover {
       color: eleVar('datepicker', 'hover-color');
       background: eleVar('datepicker', 'hover-bg');
     }
 
-    &.current:not(.disabled) .cell {
+    &.current:not(.disabled) .el-date-table-cell__text {
       color: eleVar('datepicker', 'active-color');
       background: eleVar('datepicker', 'active-bg');
     }
@@ -295,7 +295,7 @@
         background: eleVar('datepicker', 'disabled-bg');
       }
 
-      .cell {
+      .el-date-table-cell__text {
         color: eleVar('datepicker', 'disabled-color');
         background: none;
       }
@@ -319,7 +319,7 @@
         background: eleVar('datepicker', 'disabled-bg');
       }
 
-      .cell {
+      .el-date-table-cell__text {
         color: eleVar('datepicker', 'disabled-color');
         background: none;
       }
@@ -444,7 +444,8 @@
   }
 
   // 月范围
-  .el-month-table td {
+  .el-month-table td,
+  .el-year-table td {
     &.start-date > div {
       border-top-left-radius: eleVar('datepicker', 'year-radius');
       border-bottom-left-radius: eleVar('datepicker', 'year-radius');
@@ -465,18 +466,19 @@
       }
     }
 
-    &.in-range .cell:hover {
+    &.in-range .el-date-table-cell__text:hover {
       background: none;
     }
 
-    &.in-range.start-date:not(.disabled) .cell,
-    &.in-range.end-date:not(.disabled) .cell {
+    &.in-range.start-date:not(.disabled) .el-date-table-cell__text,
+    &.in-range.end-date:not(.disabled) .el-date-table-cell__text {
       color: eleVar('datepicker', 'active-color');
       background: eleVar('datepicker', 'active-bg');
     }
   }
 
-  .el-month-table {
+  .el-month-table,
+  .el-year-table {
     border-collapse: separate;
     border-spacing: 0;
   }

package/es/ele-app/style/overwrite/index.js

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

package/es/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/es/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/es/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;
   /** 样式 */