fix(tree): keep the default behavior keepace with layui

.pnpm-debug.log

@@ -1,23 +0,0 @@
-{
-  "0 debug pnpm:scope": {
-    "selected": 1
-  },
-  "1 info pnpm": {
-    "err": {
-      "name": "Error",
-      "message": "not found: insta",
-      "code": "ENOENT",
-      "stack": "Error: not found: insta\n    at getNotFoundError (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47811:51)\n    at Function.whichSync [as sync] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47888:13)\n    at getCommandAbsolutePathSync (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49453:44)\n    at Object.default_1 [as default] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49462:32)\n    at D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:129798:34"
-    }
-  },
-  "2 error pnpm": {
-    "code": "ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL",
-    "prefix": "D:\\layui-vue",
-    "err": {
-      "name": "pnpm",
-      "message": "not found: insta",
-      "code": "ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL",
-      "stack": "Error: not found: insta\n    at getNotFoundError (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47811:51)\n    at Function.whichSync [as sync] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47888:13)\n    at getCommandAbsolutePathSync (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49453:44)\n    at Object.default_1 [as default] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49462:32)\n    at D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:129798:34"
-    }
-  }
-}

src/module/tree/TreeEntity.vue

@@ -7,13 +7,14 @@ export default {
 import LayIcon from '../icon'
 import { TreeNode } from '/@src/module/tree/tree.type'
 
+type EventType = 'icon' | 'node'
+
 interface TreeEntityProps {
   node: TreeNode
-  onlyIconControl: boolean
 }
 
 interface EmitEvent {
-  (e: 'node-click', node: TreeNode): void
+  (e: 'node-click', node: TreeNode, type: EventType): void
 }
 
 const props = defineProps<TreeEntityProps>()
@@ -44,19 +45,27 @@ const nodeIconType = (node: TreeNode): string => {
 }
 
 /**
- * 发射至外层
+ * Node Icon Click
+ * @param node
+ */
+function handleIconClick(node: TreeNode) {
+  emit('node-click', node, 'icon')
+}
+
+/**
+ * Node Font Click
  * @param node
  */
 function handleNodeClick(node: TreeNode) {
-  emit('node-click', node)
+  emit('node-click', node, 'node')
 }
 
 /**
  * 递归事件
  * @param node
  */
-function innerClick(node: TreeNode) {
+function innerClick(node: TreeNode, type: EventType) {
-  emit('node-click', node)
+  emit('node-click', node, type)
 }
 </script>
 <template>
@@ -69,17 +78,18 @@ function innerClick(node: TreeNode) {
       }"
     >
       <div class="layui-tree-entry">
-        <div
+        <div class="layui-tree-main">
-          class="layui-tree-main"
-          @click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
-        >
           <span class="layui-tree-iconClick layui-tree-icon">
             <LayIcon
               :type="nodeIconType(node)"
-              @click.prevent.stop="handleNodeClick(node)"
+              @click.prevent.stop="handleIconClick(node, 'icon')"
             />
           </span>
-          <span class="layui-tree-txt">{{ node.title }}</span>
+          <span
+            class="layui-tree-txt"
+            @click.prevent.stop="handleNodeClick(node, 'node')"
+            >{{ node.title }}</span
+          >
         </div>
       </div>
       <div
@@ -91,7 +101,6 @@ function innerClick(node: TreeNode) {
           v-for="(item, index) in node.children"
           :key="index"
           :node="item"
-          :only-icon-control="onlyIconControl"
           @node-click="innerClick"
         />
       </div>
@@ -105,17 +114,18 @@ function innerClick(node: TreeNode) {
       }"
     >
       <div class="layui-tree-entry">
-        <div
+        <div class="layui-tree-main">
-          class="layui-tree-main"
-          @click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
-        >
           <span class="layui-tree-iconClick">
             <LayIcon
               type="layui-icon-file"
-              @click.prevent.stop="handleNodeClick(node)"
+              @click.prevent.stop="handleIconClick(node, 'icon')"
             />
           </span>
-          <span class="layui-tree-txt">{{ node.title }}</span>
+          <span
+            class="layui-tree-txt"
+            @click.prevent.stop="handleNodeClick(node, 'node')"
+            >{{ node.title }}</span
+          >
         </div>
       </div>
     </div>

src/module/tree/index.vue

@@ -167,10 +167,16 @@ const { innerTreeData, updateInnerTreeData, treeWrapperClass } = useTreeData(
   emit
 )
 
-function handleNodeClick(node: TreeNode) {
+function handleNodeClick(node: TreeNode, type: 'node' | 'icon') {
-  updateInnerTreeData(innerTreeData.value, node)
+  // 是否只通过icon控制展开收起
+  if (props.onlyIconControl) {
+    type === 'icon' && updateInnerTreeData(innerTreeData.value, node)
+  } else {
+    updateInnerTreeData(innerTreeData.value, node)
+  }
+  // icon 点击不emit出事件
   const emitNode = getEmitNode(props.data!, node)
-  emit('node-click', { data: emitNode! })
+  type !== 'icon' &&  emit('node-click', { data: emitNode! })
 }
 </script>
 <script lang="ts">
@@ -184,7 +190,6 @@ export default {
       v-for="(node, index) in innerTreeData"
       :key="node.id || index"
       :node="node"
-      :only-icon-control="onlyIconControl"
       @node-click="handleNodeClick"
     />
   </div>