hy-virtual-tree 1.1.15 → 1.1.17

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 ## Changelog
 
+### 1.1.17
+
+_2025-09-10_
+
+- 扩展[VirtualTree] 功能
+（1）CustomRenderFn 内置一层dom元素，兼容vue2的new Vue()挂载问题
+
+### 1.1.16
+
+_2025-09-09_
+
+- 扩展[VirtualTree] 功能
+（1）CustomRenderFn 函数类型添加 true返回类型，当返回 true 时，会使用默认渲染逻辑
+
 ### 1.1.15
 
 _2025-09-04_

package/dist/index.js

@@ -1400,10 +1400,26 @@ function getContainer(config) {
     return el;
 }
 /** 获取自定义元素函数的值 */
-function customRender(fn, node, parent, className) {
-    if (!fn || !isFunction(fn))
-        return;
-    const value = fn(node.data, node);
+function customRender(fn, node, options) {
+    const { parent, className, defaultFn } = options || {};
+    let value;
+    if (!fn || !isFunction(fn)) {
+        value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
+    }
+    else {
+        const dom = fn(node.data, node);
+        if (isBoolean(dom) && dom) {
+            value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
+        }
+        else if (isElement(dom)) {
+            value = document.createElement('div');
+            className && value.classList.add(className);
+            value.appendChild(dom);
+        }
+        else {
+            value = dom;
+        }
+    }
     if (isEmpty(value))
         return;
     if (isElement(value)) {
@@ -1769,7 +1785,6 @@ class VirtualTree {
             this._refreshRender();
         };
         const useRenderItems = (config) => {
-            const { renderIcon, renderItem, renderContent, renderStatus, renderRight, onNodeClick, onNodeContextmenu } = config;
             /** 生成展开图标 */
             const generateExpandIcon = (item) => {
                 const el = document.createElement('div');
@@ -1797,8 +1812,6 @@ class VirtualTree {
             };
             /** 生成图标 */
             const generateIcon = (data, item) => {
-                if (renderIcon)
-                    return renderIcon(data, item);
                 const icon = useIcon(config, data);
                 if (!icon)
                     return;
@@ -1806,12 +1819,8 @@ class VirtualTree {
             };
             /** 生成内容 */
             const generateContent = (data, item) => {
-                if (renderContent)
-                    return renderContent(data, item);
                 const el = document.createElement('div');
-                if (item.label) {
-                    el.innerHTML = item.label;
-                }
+                el.innerHTML = item.label || '';
                 return el;
             };
             /** 生成统计 */
@@ -1828,18 +1837,14 @@ class VirtualTree {
                 let statusSlot, rightSlot;
                 // 是否显示状态
                 if (this._props.showStatus) {
-                    // 自定义状态
-                    if (renderStatus) {
-                        statusSlot = customRender(renderStatus, item, undefined, 'hy-tree-node__status');
-                    }
-                    // 业务状态
-                    else {
-                        statusSlot = useStatus(config, data);
-                    }
+                    statusSlot = customRender(config.renderStatus, item, {
+                        className: 'hy-tree-node__status',
+                        defaultFn: (data, node) => useStatus(config, data)
+                    });
                 }
                 // 右侧内容
-                if (renderRight) {
-                    rightSlot = customRender(renderRight, item, undefined, 'hy-tree-node__right-content');
+                if (config.renderRight) {
+                    rightSlot = customRender(config.renderRight, item, { className: 'hy-tree-node__right-content' });
                 }
                 if (!isElement(statusSlot) && !isElement(rightSlot))
                     return;
@@ -1904,7 +1909,7 @@ class VirtualTree {
                     ? showSelect
                     : isFunction(showSelect) && showSelect(item.data, item)) && config.rowSelection.showSelectBox) {
                     if (type === 'checkbox') {
-                        const checkbox = new Checkbox({
+                        new Checkbox({
                             checked: isChecked(item),
                             disabled: getDisabled(config, item),
                             indeterminate: isIndeterminate(item),
@@ -1918,11 +1923,10 @@ class VirtualTree {
                                 }
                                 this.refresh();
                             }
-                        });
-                        checkbox.mount(content);
+                        }).mount(content);
                     }
                     else if (type === 'radio') {
-                        const radio = new Radio({
+                        new Radio({
                             checked: isChecked(item),
                             disabled: getDisabled(config, item),
                             onClick: () => {
@@ -1930,25 +1934,24 @@ class VirtualTree {
                                 toggleCheckbox(item, checked, true, false);
                                 this.refresh();
                             }
-                        });
-                        radio.mount(content);
+                        }).mount(content);
                     }
                 }
-                // 自定义整个节点内容
-                if (renderItem) {
-                    customRender(renderItem, item, content, 'hy-tree-node__node-content');
-                }
-                // 通用节点内容
-                else {
-                    // 图标
-                    customRender(generateIcon, item, content, 'hy-tree-icon');
-                    // 内容
-                    customRender(generateContent, item, content, 'hy-tree-node__content');
-                    // 统计
-                    customRender(generateStats, item, content);
-                    // 右侧内容
-                    customRender(generateRight, item, content);
-                }
+                // 整个节点内容
+                customRender(config.renderItem, item, {
+                    parent: content,
+                    className: 'hy-tree-node__node-content',
+                    defaultFn: (data, node) => {
+                        // 图标
+                        customRender(config.renderIcon, node, { parent: content, className: 'hy-tree-icon', defaultFn: generateIcon });
+                        // 内容
+                        customRender(config.renderContent, node, { parent: content, className: 'hy-tree-node__content', defaultFn: generateContent });
+                        // 统计
+                        customRender(generateStats, node, { parent: content });
+                        // 右侧内容
+                        customRender(generateRight, node, { parent: content });
+                    }
+                });
                 nodeContainer.appendChild(content);
                 let nodeClickTimer;
                 let nodeClickCount = 0;
@@ -1973,7 +1976,7 @@ class VirtualTree {
                         this._expandedHandle(item);
                         this._refreshVirtualScroll();
                     }
-                    onNodeClick && onNodeClick(item.data, item, e);
+                    config.onNodeClick && config.onNodeClick(item.data, item, e);
                 };
                 // 鼠标左键点击事件
                 nodeContainer.addEventListener('click', (e) => {
@@ -2011,8 +2014,8 @@ class VirtualTree {
                 });
                 // 鼠标右键点击事件
                 nodeContainer.addEventListener('contextmenu', (e) => {
-                    if (onNodeContextmenu) {
-                        onNodeContextmenu(item.data, item, e);
+                    if (config.onNodeContextmenu) {
+                        config.onNodeContextmenu(item.data, item, e);
                         e.preventDefault();
                     }
                 });

package/package.json

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