hy-virtual-tree 1.1.64 → 1.1.66

package/CHANGELOG.md

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

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

@@ -170,6 +170,8 @@ class Tooltip {
     _config;
     _focus;
     _timer;
+    _openTimer;
+    _closeTimer;
     constructor(props) {
         if (!props.bind || !isElement(props.bind))
             throw Error('【bind参数错误】：请传入元素节点');
@@ -181,6 +183,7 @@ class Tooltip {
             placement: "top",
             offset: 0,
             trigger: "hover",
+            openDelay: 200,
             autoClose: 0,
             ...config
         };
@@ -201,26 +204,45 @@ class Tooltip {
         arrow.classList.add('hy-popper__arrow');
         el.appendChild(arrow);
         this._el = el;
+        el.addEventListener('mouseenter', () => {
+            this._focus && this._focus.focus();
+        });
+        el.addEventListener('mouseleave', () => {
+            this._focus && this._focus.blur();
+        });
         this._focus = setElementFocus({
             container: bind,
             trigger: this._config.trigger === 'click' ? 'click' : 'hover',
             onFocus: () => {
                 closeActiveTooltip && closeActiveTooltip();
-                if (!this._el)
+                if (!this._el || !this._config)
                     return;
                 if (this._config?.trigger === 'hover-overflow' && !isOverflowing(this._config.bind))
                     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);
-                }
+                this._openTimer && clearTimeout(this._openTimer);
+                this._closeTimer && clearTimeout(this._closeTimer);
+                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._openTimer && clearTimeout(this._openTimer);
+                this._closeTimer && clearTimeout(this._closeTimer);
                 this._timer && clearTimeout(this._timer);
                 this.hide();
             }
@@ -253,11 +275,23 @@ 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._closeTimer && clearTimeout(this._closeTimer);
+        this._closeTimer = setTimeout(() => {
+            if (!this._el || !this._el.parentElement)
+                return;
+            this._el.classList.remove('hy-tooltip-show');
+            this._closeTimer && clearTimeout(this._closeTimer);
+            this._closeTimer = setTimeout(() => {
+                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);
+            }, 200);
+        }, 200);
     }
     destroy() {
         this._timer && clearTimeout(this._timer);
@@ -1962,16 +1996,17 @@ const useContent = (data, node) => {
     const el = document.createElement('div');
     el.innerHTML = node.label || '';
     if (node.label) {
-        let tooltip = new Tooltip({
+        new Tooltip({
             bind: el,
             content: node.label,
             placement: 'top',
             trigger: 'hover-overflow'
         });
-        // @ts-ignore
-        el.$destroy = () => {
-            tooltip && tooltip.destroy();
-        };
+        // // @ts-ignore
+        // el.$destroy = () => {
+        //   tooltip.hide()
+        //   tooltip && tooltip.destroy()
+        // }
     }
     return el;
 };
@@ -9163,9 +9198,6 @@ class VirtualTree {
         let value, el, $destroy;
         if (!fn || !isFunction(fn)) {
             value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
-            if (value) {
-                $destroy = value.$destroy;
-            }
         }
         else {
             let dom = fn(node.data, node);

package/package.json

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