sculp-js 1.9.0 → 1.10.0

package/lib/es/number.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
@@ -76,11 +76,17 @@ const numberAbbr = (num, units, options = { ratio: 1000, decimals: 0, separator:
  *            ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
  * @returns
  */
-function humanFileSize(num, options) {
-    const { decimals = 0, si = false, separator = ' ', maxUnit } = options;
-    const units = si
+function humanFileSize(num, options = { decimals: 0, si: false, separator: ' ' }) {
+    const { decimals = 0, si = false, separator = ' ', baseUnit, maxUnit } = options;
+    let units = si
         ? ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
         : ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    if (!isNullOrUnDef(baseUnit)) {
+        const targetIndex = units.findIndex(el => el === baseUnit);
+        if (targetIndex !== -1) {
+            units = units.slice(targetIndex);
+        }
+    }
     if (!isNullOrUnDef(maxUnit)) {
         const targetIndex = units.findIndex(el => el === maxUnit);
         if (targetIndex !== -1) {

package/lib/es/object.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/path.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/qs.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/random.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/string.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/tooltip.js

@@ -1,55 +1,59 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
 
 import { getStrWidthPx } from './dom.js';
+import { isString } from './type.js';
 
 /**
  * @title tooltip
  * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
  * Created by chendeqiao on 2017/5/8.
  * @example
- *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
- * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+ *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+ * 		onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">title content </span>
  */
 /**
  * 自定义title提示功能的mouseenter事件句柄
  * @param {ITooltipParams} param1
  * @returns {*}
  */
-function handleMouseEnter({ rootElId = '#root', title, event }) {
+function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
     try {
-        const $rootEl = document.querySelector(rootElId);
-        console.assert($rootEl !== null, `未找到id为 ${rootElId} 的dom元素`);
+        const $rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
+        if (!$rootEl) {
+            throw new Error(`${rootContainer} is not valid Html Element or element selector`);
+        }
         let $customTitle = null;
+        const styleId = 'style-tooltip-inner1494304949567';
         // 动态创建class样式，并加入到head中
-        if (!document.querySelector('.tooltip-inner1494304949567')) {
+        if (!document.querySelector(`#${styleId}`)) {
             const tooltipWrapperClass = document.createElement('style');
             tooltipWrapperClass.type = 'text/css';
+            tooltipWrapperClass.id = styleId;
             tooltipWrapperClass.innerHTML = `
         .tooltip-inner1494304949567 {
           max-width: 250px;
           padding: 3px 8px;
-          color: #fff;
+          color: ${color};
           text-decoration: none;
           border-radius: 4px;
           text-align: left;
+          background-color: ${bgColor};
         }
       `;
             document.querySelector('head').appendChild(tooltipWrapperClass);
         }
-        if (document.querySelector('#customTitle1494304949567')) {
-            $customTitle = document.querySelector('#customTitle1494304949567');
+        $customTitle = document.querySelector('#customTitle1494304949567');
+        if ($customTitle) {
             mouseenter($customTitle, title, event);
         }
         else {
             const $contentContainer = document.createElement('div');
-            $contentContainer.className = 'customTitle';
             $contentContainer.id = 'customTitle1494304949567';
-            $contentContainer.className = 'tooltip';
-            $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
+            $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden; position: absolute;';
             $contentContainer.innerHTML =
                 '<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
             $rootEl.appendChild($contentContainer);
@@ -102,11 +106,11 @@ function mouseenter($customTitle, title, e) {
 }
 /**
  * 移除提示文案dom的事件句柄
- * @param {string} rootElId
+ * @param {string} rootContainer
  * @returns {*}
  */
-function handleMouseLeave(rootElId = '#root') {
-    const rootEl = document.querySelector(rootElId), titleEl = document.querySelector('#customTitle1494304949567');
+function handleMouseLeave(rootContainer = '#root') {
+    const rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer, titleEl = document.querySelector('#customTitle1494304949567');
     if (rootEl && titleEl) {
         rootEl.removeChild(titleEl);
     }

package/lib/es/tree.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/type.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/unique.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/url.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/validator.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/variable.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/watermark.js

@@ -1,9 +1,11 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
 
+import { isString, isNullOrUnDef } from './type.js';
+
 /*
  * @created: Saturday, 2020-04-18 14:38:23
  * @author: chendq
@@ -15,15 +17,14 @@
  * @param {ICanvasWM} canvasWM
  * @example genCanvasWM({ content: 'QQMusicFE' })
  */
-function genCanvasWM(canvasWM) {
-    const { container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
+function genCanvasWM(content = '请勿外传', canvasWM) {
+    const { rootContainer = document.body, width = '300px', height = '150px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
     // fontWeight = 500,
-    fillStyle = 'rgba(189, 177, 167, .3)', content = '请勿外传', rotate = 30, zIndex = 2147483647 } = canvasWM;
-    // 仅限主页面添加水印
-    // if (!location.pathname.includes('/home')) {
-    //   return;
-    // }
-    const args = canvasWM;
+    fillStyle = 'rgba(189, 177, 167, .3)', rotate = -20, zIndex = 2147483647, watermarkId = '__wm' } = isNullOrUnDef(canvasWM) ? {} : canvasWM;
+    const container = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
+    if (!container) {
+        throw new Error(`${rootContainer} is not valid Html Element or element selector`);
+    }
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', width);
     canvas.setAttribute('height', height);
@@ -36,36 +37,36 @@ function genCanvasWM(canvasWM) {
     ctx.rotate((Math.PI / 180) * rotate);
     ctx.fillText(content, parseFloat(width) / 4, parseFloat(height) / 2);
     const base64Url = canvas.toDataURL();
-    const __wm = document.querySelector('.__wm');
+    const __wm = document.querySelector(`#${watermarkId}`);
     const watermarkDiv = __wm || document.createElement('div');
     const styleStr = `opacity: 1 !important; display: block !important; visibility: visible !important;         position:absolute;          left:0; top:0;         width:100%;          height:100%;          z-index:${zIndex};          pointer-events:none;          background-repeat:repeat;          background-image:url('${base64Url}')`;
     watermarkDiv.setAttribute('style', styleStr);
-    watermarkDiv.classList.add('__wm');
+    watermarkDiv.setAttribute('id', watermarkId);
     watermarkDiv.classList.add('nav-height');
     if (!__wm) {
         container.style.position = 'relative';
         container.appendChild(watermarkDiv);
     }
     const getMutableStyle = (ele) => {
-        const computedStle = getComputedStyle(ele);
+        const computedStyle = getComputedStyle(ele);
         return {
-            opacity: computedStle.getPropertyValue('opacity'),
-            zIndex: computedStle.getPropertyValue('z-index'),
-            display: computedStle.getPropertyValue('display'),
-            visibility: computedStle.getPropertyValue('visibility')
+            opacity: computedStyle.getPropertyValue('opacity'),
+            zIndex: computedStyle.getPropertyValue('z-index'),
+            display: computedStyle.getPropertyValue('display'),
+            visibility: computedStyle.getPropertyValue('visibility')
         };
     };
     //@ts-ignore
     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
     if (MutationObserver) {
         let mo = new MutationObserver(function () {
-            const __wm = document.querySelector('.__wm'); // 只在__wm元素变动才重新调用 __canvasWM
+            const __wm = document.querySelector(`#${watermarkId}`); // 只在__wm元素变动才重新调用 __canvasWM
             if (!__wm) {
                 // 避免一直触发
                 // console.log('regenerate watermark by delete::')
                 mo.disconnect();
                 mo = null;
-                genCanvasWM(JSON.parse(JSON.stringify(args)));
+                genCanvasWM(content, canvasWM);
             }
             else {
                 const { opacity, zIndex, display, visibility } = getMutableStyle(__wm);
@@ -77,7 +78,7 @@ function genCanvasWM(canvasWM) {
                     mo.disconnect();
                     mo = null;
                     container.removeChild(__wm);
-                    genCanvasWM(JSON.parse(JSON.stringify(args)));
+                    genCanvasWM(content, canvasWM);
                 }
             }
         });

package/lib/es/we-decode.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/index.d.ts

@@ -285,10 +285,10 @@ declare function getComputedCssVal(el: HTMLElement, property: string, reNumber?:
  * 字符串的像素宽度
  * @param {string} str 目标字符串
  * @param {number} fontSize 字符串字体大小
- * @param {boolean} isRemoveDom 计算后是否移除中间dom元素
+ * @param {boolean} isRemove 计算后是否移除创建的dom元素
  * @returns {*}
  */
-declare function getStrWidthPx(str: string, fontSize?: number, isRemoveDom?: boolean): number;
+declare function getStrWidthPx(str: string, fontSize?: number, isRemove?: boolean): number;
 
 interface Params<T = string | number> {
     [key: string]: T | Array<T>;
@@ -596,23 +596,23 @@ interface ICompressOptions {
 declare function compressImg(file: File | FileList, options: ICompressOptions): Promise<object> | undefined;
 
 interface ICanvasWM {
-    container: HTMLElement;
-    width: string;
-    height: string;
-    textAlign: CanvasTextAlign;
-    textBaseline: CanvasTextBaseline;
-    font: string;
-    fillStyle: string;
-    content: string;
-    rotate: number;
-    zIndex: number;
+    rootContainer?: HTMLElement | string;
+    width?: string;
+    height?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+    font?: string;
+    fillStyle?: string;
+    rotate?: number;
+    zIndex?: number;
+    watermarkId?: string;
 }
 /**
  * canvas 实现 水印, 具备防删除功能
  * @param {ICanvasWM} canvasWM
  * @example genCanvasWM({ content: 'QQMusicFE' })
  */
-declare function genCanvasWM(canvasWM: ICanvasWM): void;
+declare function genCanvasWM(content?: string, canvasWM?: ICanvasWM): void;
 
 interface DebounceFunc<F extends AnyFunc> {
     (...args: Parameters<F>): void;
@@ -715,6 +715,7 @@ interface IHumanFileSizeOptions {
     decimals?: number;
     si?: boolean;
     separator?: string;
+    baseUnit?: string;
     maxUnit?: string;
 }
 /**
@@ -728,7 +729,7 @@ interface IHumanFileSizeOptions {
  *            ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
  * @returns
  */
-declare function humanFileSize(num: number | string, options: IHumanFileSizeOptions): string;
+declare function humanFileSize(num: number | string, options?: IHumanFileSizeOptions): string;
 /**
  * 将数字格式化成千位分隔符显示的字符串
  * @param {number|string} num 数字
@@ -763,26 +764,28 @@ declare const uniqueString: UniqueString;
  * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
  * Created by chendeqiao on 2017/5/8.
  * @example
- *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
- * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+ *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+ * 		onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">title content </span>
  */
 interface ITooltipParams {
-    rootElId: string;
+    rootContainer: HTMLElement | string;
     title: string;
-    event: PointerEvent;
+    event: PointerEvent | MouseEvent;
+    bgColor?: string;
+    color?: string;
 }
 /**
  * 自定义title提示功能的mouseenter事件句柄
  * @param {ITooltipParams} param1
  * @returns {*}
  */
-declare function handleMouseEnter({ rootElId, title, event }: ITooltipParams): void;
+declare function handleMouseEnter({ rootContainer, title, event, bgColor, color }: ITooltipParams): void;
 /**
  * 移除提示文案dom的事件句柄
- * @param {string} rootElId
+ * @param {string} rootContainer
  * @returns {*}
  */
-declare function handleMouseLeave(rootElId?: string): void;
+declare function handleMouseLeave(rootContainer?: HTMLElement | string): void;
 declare const tooltipEvent: {
     handleMouseEnter: typeof handleMouseEnter;
     handleMouseLeave: typeof handleMouseLeave;

package/lib/umd/index.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.0
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
@@ -964,28 +964,32 @@
      * 字符串的像素宽度
      * @param {string} str 目标字符串
      * @param {number} fontSize 字符串字体大小
-     * @param {boolean} isRemoveDom 计算后是否移除中间dom元素
+     * @param {boolean} isRemove 计算后是否移除创建的dom元素
      * @returns {*}
      */
-    function getStrWidthPx(str, fontSize = 14, isRemoveDom = false) {
+    function getStrWidthPx(str, fontSize = 14, isRemove = true) {
         let strWidth = 0;
         console.assert(isString(str), `${str} 不是有效的字符串`);
         if (isString(str) && str.length > 0) {
-            let getEle = document.querySelector('#getStrWidth1494304949567');
+            const id = 'getStrWidth1494304949567';
+            let getEle = document.querySelector(`#${id}`);
             if (!getEle) {
                 const _ele = document.createElement('span');
-                _ele.id = 'getStrWidth1494304949567';
+                _ele.id = id;
                 _ele.style.fontSize = fontSize + 'px';
                 _ele.style.whiteSpace = 'nowrap';
                 _ele.style.visibility = 'hidden';
+                _ele.style.position = 'absolute';
+                _ele.style.top = '-9999px';
+                _ele.style.left = '-9999px';
                 _ele.textContent = str;
                 document.body.appendChild(_ele);
                 getEle = _ele;
             }
             getEle.textContent = str;
             strWidth = getEle.offsetWidth;
-            if (isRemoveDom) {
-                document.body.appendChild(getEle);
+            if (isRemove) {
+                getEle.remove();
             }
         }
         return strWidth;
@@ -1606,15 +1610,14 @@
      * @param {ICanvasWM} canvasWM
      * @example genCanvasWM({ content: 'QQMusicFE' })
      */
-    function genCanvasWM(canvasWM) {
-        const { container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
+    function genCanvasWM(content = '请勿外传', canvasWM) {
+        const { rootContainer = document.body, width = '300px', height = '150px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
         // fontWeight = 500,
-        fillStyle = 'rgba(189, 177, 167, .3)', content = '请勿外传', rotate = 30, zIndex = 2147483647 } = canvasWM;
-        // 仅限主页面添加水印
-        // if (!location.pathname.includes('/home')) {
-        //   return;
-        // }
-        const args = canvasWM;
+        fillStyle = 'rgba(189, 177, 167, .3)', rotate = -20, zIndex = 2147483647, watermarkId = '__wm' } = isNullOrUnDef(canvasWM) ? {} : canvasWM;
+        const container = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
+        if (!container) {
+            throw new Error(`${rootContainer} is not valid Html Element or element selector`);
+        }
         const canvas = document.createElement('canvas');
         canvas.setAttribute('width', width);
         canvas.setAttribute('height', height);
@@ -1627,36 +1630,36 @@
         ctx.rotate((Math.PI / 180) * rotate);
         ctx.fillText(content, parseFloat(width) / 4, parseFloat(height) / 2);
         const base64Url = canvas.toDataURL();
-        const __wm = document.querySelector('.__wm');
+        const __wm = document.querySelector(`#${watermarkId}`);
         const watermarkDiv = __wm || document.createElement('div');
         const styleStr = `opacity: 1 !important; display: block !important; visibility: visible !important;         position:absolute;          left:0; top:0;         width:100%;          height:100%;          z-index:${zIndex};          pointer-events:none;          background-repeat:repeat;          background-image:url('${base64Url}')`;
         watermarkDiv.setAttribute('style', styleStr);
-        watermarkDiv.classList.add('__wm');
+        watermarkDiv.setAttribute('id', watermarkId);
         watermarkDiv.classList.add('nav-height');
         if (!__wm) {
             container.style.position = 'relative';
             container.appendChild(watermarkDiv);
         }
         const getMutableStyle = (ele) => {
-            const computedStle = getComputedStyle(ele);
+            const computedStyle = getComputedStyle(ele);
             return {
-                opacity: computedStle.getPropertyValue('opacity'),
-                zIndex: computedStle.getPropertyValue('z-index'),
-                display: computedStle.getPropertyValue('display'),
-                visibility: computedStle.getPropertyValue('visibility')
+                opacity: computedStyle.getPropertyValue('opacity'),
+                zIndex: computedStyle.getPropertyValue('z-index'),
+                display: computedStyle.getPropertyValue('display'),
+                visibility: computedStyle.getPropertyValue('visibility')
             };
         };
         //@ts-ignore
         const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
         if (MutationObserver) {
             let mo = new MutationObserver(function () {
-                const __wm = document.querySelector('.__wm'); // 只在__wm元素变动才重新调用 __canvasWM
+                const __wm = document.querySelector(`#${watermarkId}`); // 只在__wm元素变动才重新调用 __canvasWM
                 if (!__wm) {
                     // 避免一直触发
                     // console.log('regenerate watermark by delete::')
                     mo.disconnect();
                     mo = null;
-                    genCanvasWM(JSON.parse(JSON.stringify(args)));
+                    genCanvasWM(content, canvasWM);
                 }
                 else {
                     const { opacity, zIndex, display, visibility } = getMutableStyle(__wm);
@@ -1668,7 +1671,7 @@
                         mo.disconnect();
                         mo = null;
                         container.removeChild(__wm);
-                        genCanvasWM(JSON.parse(JSON.stringify(args)));
+                        genCanvasWM(content, canvasWM);
                     }
                 }
             });
@@ -1921,11 +1924,17 @@
      *            ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
      * @returns
      */
-    function humanFileSize(num, options) {
-        const { decimals = 0, si = false, separator = ' ', maxUnit } = options;
-        const units = si
+    function humanFileSize(num, options = { decimals: 0, si: false, separator: ' ' }) {
+        const { decimals = 0, si = false, separator = ' ', baseUnit, maxUnit } = options;
+        let units = si
             ? ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
             : ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+        if (!isNullOrUnDef(baseUnit)) {
+            const targetIndex = units.findIndex(el => el === baseUnit);
+            if (targetIndex !== -1) {
+                units = units.slice(targetIndex);
+            }
+        }
         if (!isNullOrUnDef(maxUnit)) {
             const targetIndex = units.findIndex(el => el === maxUnit);
             if (targetIndex !== -1) {
@@ -2027,45 +2036,48 @@
      * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
      * Created by chendeqiao on 2017/5/8.
      * @example
-     *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
-     * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+     *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+     * 		onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">title content </span>
      */
     /**
      * 自定义title提示功能的mouseenter事件句柄
      * @param {ITooltipParams} param1
      * @returns {*}
      */
-    function handleMouseEnter({ rootElId = '#root', title, event }) {
+    function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
         try {
-            const $rootEl = document.querySelector(rootElId);
-            console.assert($rootEl !== null, `未找到id为 ${rootElId} 的dom元素`);
+            const $rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
+            if (!$rootEl) {
+                throw new Error(`${rootContainer} is not valid Html Element or element selector`);
+            }
             let $customTitle = null;
+            const styleId = 'style-tooltip-inner1494304949567';
             // 动态创建class样式，并加入到head中
-            if (!document.querySelector('.tooltip-inner1494304949567')) {
+            if (!document.querySelector(`#${styleId}`)) {
                 const tooltipWrapperClass = document.createElement('style');
                 tooltipWrapperClass.type = 'text/css';
+                tooltipWrapperClass.id = styleId;
                 tooltipWrapperClass.innerHTML = `
         .tooltip-inner1494304949567 {
           max-width: 250px;
           padding: 3px 8px;
-          color: #fff;
+          color: ${color};
           text-decoration: none;
           border-radius: 4px;
           text-align: left;
+          background-color: ${bgColor};
         }
       `;
                 document.querySelector('head').appendChild(tooltipWrapperClass);
             }
-            if (document.querySelector('#customTitle1494304949567')) {
-                $customTitle = document.querySelector('#customTitle1494304949567');
+            $customTitle = document.querySelector('#customTitle1494304949567');
+            if ($customTitle) {
                 mouseenter($customTitle, title, event);
             }
             else {
                 const $contentContainer = document.createElement('div');
-                $contentContainer.className = 'customTitle';
                 $contentContainer.id = 'customTitle1494304949567';
-                $contentContainer.className = 'tooltip';
-                $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
+                $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden; position: absolute;';
                 $contentContainer.innerHTML =
                     '<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
                 $rootEl.appendChild($contentContainer);
@@ -2118,11 +2130,11 @@
     }
     /**
      * 移除提示文案dom的事件句柄
-     * @param {string} rootElId
+     * @param {string} rootContainer
      * @returns {*}
      */
-    function handleMouseLeave(rootElId = '#root') {
-        const rootEl = document.querySelector(rootElId), titleEl = document.querySelector('#customTitle1494304949567');
+    function handleMouseLeave(rootContainer = '#root') {
+        const rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer, titleEl = document.querySelector('#customTitle1494304949567');
         if (rootEl && titleEl) {
             rootEl.removeChild(titleEl);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sculp-js",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "packageManager": "npm@8.19.2",
   "description": "js utils library, includes function library、class library",
   "scripts": {
@@ -79,6 +79,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.2.2",
     "prettier": "^3.0.3",