chore: Add slot nodeKey. (#195)

Author: mutdmour

README.md

@@ -142,6 +142,7 @@ plugins: [
 
 | Slot Name | Description       | Parameters             |
 | --------- | ----------------- | ---------------------- |
+| nodeKey | render node key | { node, defaultKey } |
 | nodeValue | render node value | { node, defaultValue } |
 
 ## Contributors

README.zh-CN.md

@@ -45,4 +45,5 @@
 
 | 插槽名    | 描述       | 参数                   |
 | --------- | ---------- | ---------------------- |
+| nodeKey | 渲染节点键 | { node, defaultKey } |
 | nodeValue | 渲染节点值 | { node, defaultValue } |

example/Basic.vue

@@ -46,6 +46,10 @@
 
       <h3>Slots:</h3>
       <div class="options">
+        <div>
+          <label>nodeKey</label>
+          <input v-model="useNodeKeySlot" type="checkbox" />
+        </div>
         <div>
           <label>nodeValue</label>
           <input v-model="useNodeValueSlot" type="checkbox" />
@@ -66,6 +70,13 @@
         :show-icon="showIcon"
         style="position: relative"
       >
+        <template v-if="useNodeKeySlot" #nodeKey="{ node, defaultKey }">
+          <template v-if="node.key === 'title'">
+            <a>"{{ node.key }}":</a>
+          </template>
+          <template v-else>{{ defaultKey }}:</template>
+        </template>
+
         <template v-if="useNodeValueSlot" #nodeValue="{ node, defaultValue }">
           <template v-if="typeof node.content === 'string' && node.content.startsWith('http://')">
             <a href="node.content" target="_blank">{{ node.content }}</a>
@@ -122,6 +133,7 @@ export default {
       highlightMouseoverNode: true,
       collapsedOnClickBrackets: true,
       useNodeValueSlot: false,
+      useNodeKeySlot: false,
       deep: 3,
       showIcon: false,
     };

src/components/Tree/index.vue

@@ -45,6 +45,14 @@
             @value-change="handleValueChange"
             :style="itemHeight && itemHeight !== 20 ? { lineHeight: `${itemHeight}px` } : {}"
           >
+            <template #key="slotProps">
+              <slot
+                name="nodeKey"
+                :node="slotProps.node"
+                :defaultKey="slotProps.defaultKey"
+              />
+            </template>
+
             <template #value="slotProps">
               <slot
                 name="nodeValue"

src/components/TreeNode/index.vue

@@ -33,7 +33,9 @@
       <carets v-if="showIcon" :node-type="node.type" @click="handleIconClick" />
     </div>
 
-    <span v-if="node.key" class="vjs-key">{{ prettyKey }}:</span>
+    <slot v-if="node.key" name="key" :node="node" :defaultKey="prettyKey">
+      <span class="vjs-key">{{ prettyKey }}:</span>
+    </slot>
 
     <span>
       <brackets v-if="node.type !== 'content'" :data="node.content" @click="handleBracketsClick" />