fix: docs and slot

Author: Create-Peace

examples/src/main.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
-import VueTree from '../../lib'
-import '../../lib/style/index.css'
+// import VueTree from '../../lib'
+// import '../../lib/style/index.css'
+import VueTree from '../../src/components/Tree/Tree.js'
+import '../../src/components/Tree/styles/index.less'
 import router from './router'
 
 Vue.component(VueTree.name, VueTree)

examples/src/views/custom/index.vue

@@ -4,12 +4,19 @@
         ref="tree4"
         :treeData="treeData"
         showCheckbox>
+
         <template v-slot="{ node, treeNode }">
           <span style="color: #f00">{{node.name}}</span> 
           <a class="link-color ml20" @click.stop="handleAddChild(treeNode)">增加</a>
           <a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)">删除</a>
           <a class="link-color ml20" @click.stop="toggleDisable(node)">{{ node.disabled ? '开启' : '禁用'}}</a>
         </template>
+        <template #expandIcon="{expanded, toggleFold, node}">
+          <div style="padding: 2px">
+            <div @click="toggleFold(node)" v-if="expanded">+</div>
+            <div @click="toggleFold(node)" v-else>-</div>
+          </div>
+        </template>
       </VueTree>
     </div>
 </template>
@@ -21,9 +28,13 @@ export default {
   name: 'Custom',
   data () {
     return {
-      treeData
+      treeData,
+      count: 0
     }
   },
+  updated () {
+    console.log('updated')
+  },
   methods: {
     handleAddChild(treeNode) {
       this.maxId += 1

examples/src/views/loadLazy/index.vue

@@ -5,7 +5,11 @@
         lazy
         immediatelyLoad
         :load="loadMore"
-       />
+       >
+       <template #loading="{loading}">
+         <div v-if="loading" id="circle"></div>
+       </template>
+       </VueTree>
     </div>
 </template>
 <script>
@@ -33,4 +37,20 @@ export default {
   }
 }
 
-</script>
+</script>
+<style>
+#circle{
+    display: inline-block;
+    margin: 20px auto;
+    width: 10px;
+    height: 10px;
+    border: 2px white solid;
+    border-left-color: #ff5500;
+    border-right-color:#0c80fe;
+    border-radius: 100%;
+    animation: loading1 1s infinite linear;
+}
+@keyframes loading1{
+    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
+}
+</style>

src/components/Tree/TreeNodeContent.js

@@ -74,14 +74,14 @@ export default {
       e.stopPropagation()
     },
     renderExpandSlot () {
-      const { expandIcon: expandIconSlot } = this.tree
+      const { $scopedSlots: { expandIcon: expandIconSlot } } = this.tree
       const { node, toggleFold, visibleExpand } = this
       const { expanded } = node.data
-      return expandIconSlot ? expandIconSlot({ expanded, toggleFoldCb: toggleFold }) : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} style={{ display: visibleExpand }}>▼</span>)
+      return expandIconSlot ? <div style={{ display: visibleExpand }}>{expandIconSlot({ expanded, node, toggleFold })}</div> : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} >▼</span>)
     },
     renderCheckbox () {
       const { node, handleClickCheckBox, selectToggle } = this
-      const { checkbox: checkboxSlot, showCheckbox } = this.tree
+      const { $scopedSlots: { checkbox: checkboxSlot }, showCheckbox } = this.tree
       const { checked, partialSelected, exceptDisabledChecked, disabled, } = node.data
       return showCheckbox ? checkboxSlot ? checkboxSlot({handleClickCheckBox, selectToggle, node: node.data }) : (<Checkbox
         value={checked}
@@ -93,7 +93,7 @@ export default {
         onChange={(val) => selectToggle(val, node)} />) : null
     },
     renderLoading () {
-      const { loading: loadingSlot } = this.tree
+      const { $scopedSlots: { loading: loadingSlot } } = this.tree
       const { loading } = this
       return loading? loadingSlot ? loadingSlot({ loading }) : (<div>↻</div>) : null
     },