feat(): slot方式自定义按钮

Author: wangdabaoqq

packages/style/index.styl

@@ -66,22 +66,24 @@
     box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
   }
 }
-.org-tree-node-btn {
+.org-tree-node-icon {
   position: absolute;
   top: 100%;
   left: 50%;
-  width: 20px;
-  height: 20px;
-  z-index: 10;
   margin-left: -11px;
   margin-top: 9px;
   background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 50%;
-  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
+  z-index: 10;
   cursor: pointer;
   transition: all .35s ease;
-
+}
+.org-tree-node-btn {
+  @extend .org-tree-node-icon
+  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
   &:hover {
     background-color: #e7e8e9;
     transform: scale(1.15);

packages/vueDragTree/model/util.js

@@ -38,7 +38,6 @@ export function hasClass(el, cls) {
 
 export function addClass(el, cls) {
   if (!el) return
-  console.log(el)
   var curClass = el.className
   var classes = (cls || '').split(' ')
 

packages/vueDragTree/src/node-content.vue

@@ -12,9 +12,10 @@ export default {
     const tree = parent.tree
     const node = this.node
     const { data, store } = node
+    // console.log(tree.$scopedSlots.default({ node, data }))
     return (
       parent.renderContent
-        ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
+        ? parent.renderContent(h, { _self: tree.$vnode.context, node, data, store })
         : tree.$scopedSlots.default
           ? tree.$scopedSlots.default({ node, data })
           : h('span', { class: 'org-tree-node-label-inner' }, [node.label])

packages/vueDragTree/src/node-icon.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  name: 'NodeIcon',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleExpandIconClick() {
+      if (this.node.isLeaf) return
+      if (this.node.expanded) {
+        this.$emit('node-collapse', this.node.data, this.node, this)
+        this.node.collapse()
+      } else {
+        this.node.expand()
+        this.$emit('node-expand', this.node.data, this.node, this)
+      }
+    }
+  },
+  render(h) {
+    const parent = this.$parent
+    const tree = parent.tree
+    const node = this.node
+    const { data } = node
+    return (
+      tree.$scopedSlots['node-icon']
+        ? h('div', {
+          class: 'org-tree-node-icon',
+          on: {
+            click: () => this.handleExpandIconClick()
+          }
+        },
+        [
+          tree.$scopedSlots['node-icon']({ node, data })
+        ])
+        : h('span', {
+          class: ['org-tree-node-btn', { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && node.expanded }],
+          on: {
+            click: () => this.handleExpandIconClick()
+          }
+        }
+        )
+    )
+  }
+}
+</script>

packages/vueDragTree/src/tree-node.vue

@@ -18,51 +18,30 @@
     @dragend.stop="handleDragEnd"
     @drop.stop="handleDrop"
   >
-    <div class="org-tree-node-label" ref="nodelabel" @click="handleClick">
-      <!-- <span @click.prevent.stop="toggle" :class="['org-tree-node-btn', { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }]" v-if="node.children &&  node.children.length > 0"></span> -->
-      <span
+    <div class="org-tree-node-label" ref="nodelabel">
+      <node-icon
         v-if="node.childNodes && node.childNodes.length > 0"
-        :class="[
-          'org-tree-node-btn',
-          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
-          'org-tree-node__expand-icon'
-        ]"
-        @click.stop="handleExpandIconClick"
+        :node="node"
       />
-      <!-- <el-checkbox
-        v-if="showCheckbox"
-        v-model="node.checked"
-        :indeterminate="node.indeterminate"
-        :disabled="!!node.disabled"
-        @click.native.stop
-        @change="handleCheckChange"
-      >
-      </el-checkbox> -->
-      <!-- <span
-        v-if="node.loading"
-        class="org-tree-node__loading-icon el-icon-loading"
-      /> -->
       <node-content :node="node" />
     </div>
-    <!-- <el-collapse-transition> -->
-    <div
-      v-if="(!renderAfterExpand || childNodeRendered) && node.childNodes.length > 0"
-      v-show="expanded"
-      class="org-tree-node-children"
-      role="group"
-      :aria-expanded="expanded"
-    >
-      <tree-node
-        v-for="child in node.childNodes"
-        :key="getNodeKey(child)"
-        :render-content="renderContent"
-        :render-after-expand="renderAfterExpand"
-        :node="child"
-        @node-expand="handleChildNodeExpand"
-      />
+      <div
+        v-if="(!renderAfterExpand || childNodeRendered) && node.childNodes.length > 0"
+        v-show="expanded"
+        class="org-tree-node-children"
+        role="group"
+        :aria-expanded="expanded"
+      >
+        <tree-node
+          v-for="child in node.childNodes"
+          :key="getNodeKey(child)"
+          :render-content="renderContent"
+          :render-after-expand="renderAfterExpand"
+          :node="child"
+          @node-expand="handleChildNodeExpand"
+        />
+      </div>
     </div>
-    <!-- </el-collapse-transition> -->
-  </div>
 </template>
 
 <script>
@@ -71,6 +50,7 @@
 import emitter from '../model/emiter'
 import { getNodeKey } from '../model/util'
 import NodeContent from './node-content'
+import NodeIcon from './node-icon'
 export default {
   name: 'TreeNode',
 
@@ -79,7 +59,8 @@ export default {
   components: {
     // ElCollapseTransition,
     // ElCheckbox,
-    NodeContent
+    NodeContent,
+    NodeIcon
   },
 
   mixins: [emitter],
@@ -114,27 +95,10 @@ export default {
       console.log(this.node.expanded, this.node, val)
       this.$nextTick(() => {
         this.expanded = val
-        // this.expanded =
-        // if (val) {
-        //   this.expanded = false
-        // } else {
-        //   this.expanded = true
-        // }
-        // if (val && this.node.childNodes.length > 0) {
-        //   this.expanded = false
-        // } else {
-        //   console.log(this.node.childNodes)
-        //   this.expanded = true
-        // }
       })
       if (val) {
         this.childNodeRendered = true
       }
-      // if (this.node.childNodes && this.node.childNodes.length > 0) {
-      //   this.leaf = false
-      // } else {
-      //   this.leaf = true
-      // }
     }
    },
 
@@ -159,7 +123,6 @@ export default {
       this.node.updateChildren()
     })
     if (this.node.expanded) {
-      console.log('extendsextends')
       this.expanded = true
       this.childNodeRendered = true
     }
@@ -214,12 +177,10 @@ export default {
     handleExpandIconClick() {
       if (this.node.isLeaf) return
       if (this.expanded) {
-        console.log(1233)
         this.tree.$emit('node-collapse', this.node.data, this.node, this)
         this.node.collapse()
       } else {
         this.node.expand()
-        console.log(789, this.node.data)
         this.$emit('node-expand', this.node.data, this.node, this)
       }
     },