hy-virtual-tree 1.1.63 → 1.1.65

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 ## Changelog
 
+### 1.1.65
+
+_2026-01-23_
+
+- 扩展[VirtualTree] 功能
+（1）修复树形节点内容添加溢出省略时，移入显示tooltip后，在节点刷新时出现问题
+（2）优化 Tooltip 交互效果
+
+### 1.1.64
+
+_2026-01-23_
+
+- 扩展[VirtualTree] 功能
+（1）优化树形，节点内容添加溢出省略时，移入显示tooltip
+
 ### 1.1.63
 
 _2026-01-16_

package/dist/index.css

@@ -14,6 +14,11 @@
   background: var(--hy-tooltip-bg);
   border: 1px solid #375C86;
   transform: translateX(-50%) translateY(calc(-100% - 10px));
+  opacity: 0;
+  transition: opacity 0.2s linear;
+}
+.hy-tooltip.hy-tooltip-show {
+  opacity: 1;
 }
 .hy-tooltip.top .hy-popper__arrow {
   left: 50%;

package/dist/index.js

@@ -8,6 +8,7 @@ const isBoolean = (e) => typeof e === 'boolean';
 const isUndefined = (e) => e === undefined;
 const isNull = (e) => e === null;
 const isEmpty = (e) => isUndefined(e) || isNull(e) || (!isNumber(e) && !e);
+const isOverflowing = (e) => e.clientWidth < e.scrollWidth;
 
 var workCard_svg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICAgICA8ZyBpZD0i5bel54mMLXNlbCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTE0Ljc3NjI5NTEsMiBDMTUuNzI4MjcxLDIgMTYuNSwyLjc3MTcyODk1IDE2LjUsMy43MjM3MDQ4NiBMMTYuNSwxNi4yNzYyOTUxIEMxNi41LDE3LjIyODI3MSAxNS43MjgyNzEsMTggMTQuNzc2Mjk1MSwxOCBMNS4yMjM3MDQ4NiwxOCBDNC4yNzE3Mjg5NSwxOCAzLjUsMTcuMjI4MjcxIDMuNSwxNi4yNzYyOTUxIEwzLjUsMy43MjM3MDQ4NiBDMy41LDIuNzcxNzI4OTUgNC4yNzE3Mjg5NSwyIDUuMjIzNzA0ODYsMiBMMTQuNzc2Mjk1MSwyIFogTTEwLjA2NjI5NDUsMTIuMTc1NzU3NyBDOS4wNDEyODMwMywxMi4xNDA3MTQ2IDguMTgwNjcwNzUsMTIuOTA3NzMxOCA4LjE0NDA2MzIsMTMuODg4OTM4NiBDOC4xMDc0NTU2NSwxNC44NzAxNDU0IDguOTA4NzE1MzYsMTUuNjkzOTc4OCA5LjkzMzcyNjg1LDE1LjcyOTAyMTkgQzEwLjU5Njc5MywxNS43NTE2OTA4IDExLjIyMjEyNTEsMTUuNDM0MDEzNiAxMS41NzQxNjY0LDE0Ljg5NTY1NjEgQzExLjkyNjIwNzgsMTQuMzU3Mjk4NyAxMS45NTE0NzUxLDEzLjY4MDA1MDQgMTEuNjQwNDUwMywxMy4xMTkwMjQgQzExLjMyOTQyNTUsMTIuNTU3OTk3NyAxMC43MjkzNjA3LDEyLjE5ODQyNjYgMTAuMDY2Mjk0NSwxMi4xNzU3NTc3IFogTTEzLjgwNTU1NTMsNC4xOTA5NTkwNyBMNi4zMzA0NTEyLDQuMTkwNDc2MTkgQzUuODMwNDY1LDQuMTkwNDc2MTkgNS40MjUxNDYxLDQuNDA2NjY3MzUgNS40MjUxNDYxLDQuNjczMzUyNjUgTDUuNDI1MTQ2MSw5Ljg5ODA3NTkyIEM1LjQyNTE0NjEsMTAuMTY0NzYxMiA1LjgzMDQ2NSwxMC4zODA5NTI0IDYuMzMwNDUxMiwxMC4zODA5NTI0IEwxMy44MDU1NTUzLDEwLjM4MDk1MjQgQzE0LjMwNTU0MTUsMTAuMzgwOTUyNCAxNC43MTA4NjA0LDEwLjE2NDc2MTIgMTQuNzEwODYwNCw5Ljg5ODA3NTkyIEwxNC43MTA4NjA0LDQuNjczODM1NTIgQzE0LjcxMDg2MDQsNC40MDcxNTAyMyAxNC4zMDU1NDE1LDQuMTkwOTU5MDggMTMuODA1NTU1Myw0LjE5MDk1OTA3IFoiIGlkPSIy5aSH5Lu9LTIiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=';
 
@@ -169,6 +170,7 @@ class Tooltip {
     _config;
     _focus;
     _timer;
+    _openTimer;
     constructor(props) {
         if (!props.bind || !isElement(props.bind))
             throw Error('【bind参数错误】：请传入元素节点');
@@ -180,11 +182,14 @@ class Tooltip {
             placement: "top",
             offset: 0,
             trigger: "hover",
+            openDelay: 200,
             autoClose: 0,
             ...config
         };
     }
     _render() {
+        if (!this._config)
+            return;
         const { bind, content } = this._config;
         const el = document.createElement('div');
         el.classList.add('hy-tooltip');
@@ -200,20 +205,32 @@ class Tooltip {
         this._el = el;
         this._focus = setElementFocus({
             container: bind,
-            trigger: this._config.trigger,
+            trigger: this._config.trigger === 'click' ? 'click' : 'hover',
             onFocus: () => {
                 closeActiveTooltip && closeActiveTooltip();
-                if (!this._el)
+                if (!this._el || !this._config)
                     return;
-                const container = getContainer$1();
-                container.appendChild(this._el);
-                this.setPopper();
-                if (this._config?.autoClose && isNumber(this._config?.autoClose)) {
-                    this._timer && clearTimeout(this._timer);
-                    this._timer = setTimeout(() => {
-                        this._focus && this._focus.blur();
-                    }, this._config?.autoClose);
-                }
+                if (this._config?.trigger === 'hover-overflow' && !isOverflowing(this._config.bind))
+                    return;
+                this._openTimer && clearTimeout(this._openTimer);
+                this._openTimer = setTimeout(() => {
+                    if (!this._config || !this._el)
+                        return;
+                    const container = getContainer$1();
+                    container.appendChild(this._el);
+                    setTimeout(() => {
+                        if (!this._el)
+                            return;
+                        this._el.classList.add('hy-tooltip-show');
+                    });
+                    this.setPopper();
+                    if (this._config?.autoClose && isNumber(this._config.autoClose)) {
+                        this._timer && clearTimeout(this._timer);
+                        this._timer = setTimeout(() => {
+                            this._focus && this._focus.blur();
+                        }, this._config?.autoClose);
+                    }
+                }, this._config.openDelay || 0);
             },
             onBlur: () => {
                 this._timer && clearTimeout(this._timer);
@@ -248,11 +265,13 @@ class Tooltip {
         closeActiveTooltip = this.hide.bind(this);
     }
     hide() {
+        this._openTimer && clearTimeout(this._openTimer);
         if (!this._el || !this._el.parentElement)
             return;
         this._el.style.setProperty('top', '-10000px');
         this._el.style.setProperty('left', '-10000px');
         this._el.parentElement.removeChild(this._el);
+        this._el.classList.remove('hy-tooltip-show');
     }
     destroy() {
         this._timer && clearTimeout(this._timer);
@@ -1952,6 +1971,25 @@ const useIcon = (config, data, node) => {
         return new Icon({ svgName: 'menu_acquisitionStation_svg' });
     }
 };
+// 生成内容节点
+const useContent = (data, node) => {
+    const el = document.createElement('div');
+    el.innerHTML = node.label || '';
+    if (node.label) {
+        new Tooltip({
+            bind: el,
+            content: node.label,
+            placement: 'top',
+            trigger: 'hover-overflow'
+        });
+        // // @ts-ignore
+        // el.$destroy = () => {
+        //   tooltip.hide()
+        //   tooltip && tooltip.destroy()
+        // }
+    }
+    return el;
+};
 
 function decodeBase64(base64, enableUnicode) {
     var binaryString = atob(base64);
@@ -9267,12 +9305,6 @@ class VirtualTree {
                     return;
                 return icon._el;
             };
-            /** 生成内容 */
-            const generateContent = (data, item) => {
-                const el = document.createElement('div');
-                el.innerHTML = item.label || '';
-                return el;
-            };
             /** 生成统计 */
             const generateStats = (data, item) => {
                 if (!isShowCount(this._props.showCount, item))
@@ -9403,7 +9435,7 @@ class VirtualTree {
                         // 图标
                         this._customRender(config.renderIcon, node, { inset: true, parent: content, className: 'hy-tree-icon', defaultFn: generateIcon });
                         // 内容
-                        this._customRender(config.renderContent, node, { inset: true, parent: content, className: 'hy-tree-node__content', defaultFn: generateContent });
+                        this._customRender(config.renderContent, node, { inset: true, parent: content, className: 'hy-tree-node__content', defaultFn: useContent });
                         // 统计
                         this._customRender(generateStats, node, { parent: content });
                         // 右侧内容
@@ -9864,4 +9896,4 @@ class VirtualTree {
     };
 }
 
-export { Business, DataType, DeviceStatus, VirtualScroll, VirtualTree, getGlobalDeviceStatus, isArray, isBoolean, isElement, isEmpty, isFunction, isNull, isNumber, isObject, isString, isUndefined, setGlobalDeviceStatus };
+export { Business, DataType, DeviceStatus, VirtualScroll, VirtualTree, getGlobalDeviceStatus, isArray, isBoolean, isElement, isEmpty, isFunction, isNull, isNumber, isObject, isOverflowing, isString, isUndefined, setGlobalDeviceStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-virtual-tree",
-  "version": "1.1.63",
+  "version": "1.1.65",
   "type": "module",
   "scripts": {
     "dev": "vite",