Merge pull request #4 from halower/master

merge

Author: odanzhou

README.md

@@ -7,16 +7,6 @@
 `
 The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others.
 `
-## Last Version Update Log
-  adjusted some style problems, perfected the demo 
-### (Version 1.5.4)
-1. fix bugs that are not selected by some nodes in the radio mode caused by the previous version (1.5.3) 
-2. perfect Domo Example
-### (Version 1.5.3)
-1. add  ```canDeleteRoot``` option to support the removal of root nodes
-2. fix the ```async``` Invalid bug of the first level node
-### (Version 1.5.2)
-add a ```node-check``` event, ande remove ```nodeChecked``` event， because the ```nodeChecked``` event may be bubbling
 # Version: 2.x  ([中文文档](https://github.com/halower/vue2-tree/blob/master/README_CN.md))
 ```QQ Group: 255965810``` <br/>
 `we guess you may also see` [version 1.0](https://github.com/halower/vue2-tree/tree/1.x)

README_CN.md

@@ -12,15 +12,6 @@
 [https://halower.github.io/vue-tree](http://120.77.84.4/)
 
 
-## Last Version Update Log
-1. 修复上一个版本（1.5.3）造成的单选模式下某些节点不能选中的bug
-2. 完善domo 示例
-### (Version 1.5.3)
-1. 新增 ```canDeleteRoot```选项，用以支持是否可以删除根节点
-2. 修复一级节点的```async```无效的bug
-### (Version 1.5.2)
-添加了一个 ```node-check``` 事件, 并移除了原有的```nodeChecked``` 事件，因为```nodeChecked``` 可能存在冒泡出发效果
-
 # SelectTree API （2018-4-15 ）
 最新的发布版本已经支持下拉树功能, 在基本属性和事件(与 [Tree API](https://github.com/halower/vue-tree/blob/master/README_CN.md#tree-api-%E6%96%87%E6%A1%A3)一致)不变的前提下扩展了如下 
 

dist/v2-tree.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-tree-halower",
   "description": "This tree and treeSelect component is based on the Vue.js 2.0",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "author": "halower (youzisoft@qq.com)",
   "license": "MIT",
   "private": false,

dist/v2-tree.js.map

@@ -1,56 +1,73 @@
 <template>
-  <li
-    v-if="itemVisible"
-    :class='liClass'
-  >
+  <li v-if="itemVisible" :class="liClass">
     <div class="tree-node-el" :draggable="draggable" @dragstart="drag(item, $event)">
-      <span @click="expandNode(item)" v-if="showExpand" class='tree-expand' 
+      <span
+        @click="expandNode(item)"
+        v-if="showExpand"
+        class="tree-expand"
         :class="item.expanded ? 'tree-open' : 'tree-close'"
+      ></span>
+      <span
+        v-if="multiple && !item.nocheck"
+        :class="[item.checked ? (item.halfcheck ? 'box-halfchecked' : 'box-checked') : 'box-unchecked', 'inputCheck']"
       >
-      </span>
-      <span v-if='multiple && !item.nocheck' :class="[item.checked ? (item.halfcheck ? 'box-halfchecked' : 'box-checked') : 'box-unchecked', 'inputCheck']">
-        <input :disabled="item.chkDisabled"
+        <input
+          :disabled="item.chkDisabled"
           :class="['check', item.chkDisabled ? 'chkDisabled' : '']"
-          v-if='multiple' type="checkbox" @change="changeNodeCheckStatus(item, $event)" :checked="item.checked"/>
+          v-if="multiple"
+          type="checkbox"
+          @change="changeNodeCheckStatus(item, $event)"
+          :checked="item.checked"
+        >
       </span>
       <loading v-if="item.loading && item.expanded"/>
-      <Render :node="item" :parent='parent' :index='index' :tpl ='tpl' :nodeMouseOver='nodeMouseOver' :level='level'/>
+      <Render
+        :node="item"
+        :parent="parent"
+        :index="index"
+        :tpl="tpl"
+        :nodeMouseOver="nodeMouseOver"
+        :level="level"
+      />
     </div>
     <template v-if="showNextUl">
       <collapse-transition>
         <TreeUl
           v-show="item.expanded"
           :dragAfterExpanded="dragAfterExpanded"
           :draggable="draggable"
-          :tpl ="tpl"
+          :tpl="tpl"
           :data="item.children"
-          :halfcheck='halfcheck'
-          :scoped ='scoped'
-          :parent ='item'
-          :canDeleteRoot ='canDeleteRoot'
+          :halfcheck="halfcheck"
+          :scoped="scoped"
+          :parent="item"
+          :canDeleteRoot="canDeleteRoot"
           :multiple="multiple"
-          :level='level'
-          :maxLevel='maxLevel'
-          :topMustExpand='topMustExpand'
-          :allowGetParentNode='allowGetParentNode'
+          :level="level"
+          :maxLevel="maxLevel"
+          :topMustExpand="topMustExpand"
+          :allowGetParentNode="allowGetParentNode"
         />
       </collapse-transition>
     </template>
   </li>
 </template>
 <script>
-import mixins from './mixins'
-import Render from './render'
-import Loading from './loading'
-import CollapseTransition from './collapse-transition'
+import mixins from "./mixins";
+import Render from "./render";
+import Loading from "./loading";
+import CollapseTransition from "./collapse-transition";
 export default {
-  name: 'TreeLi',
+  name: "TreeLi",
   mixins: [mixins],
-  components: {Render, Loading, CollapseTransition, 
+  components: {
+    Render,
+    Loading,
+    CollapseTransition
     // TreeUl: () => import('./treeUl.vue') // 解决循环引用的问题
   },
   beforeCreate() {
-    this.$options.components.TreeUl = require('./treeUl.vue').default
+    this.$options.components.TreeUl = require("./treeUl.vue").default;
   },
   props: {
     item: {
@@ -94,60 +111,73 @@ export default {
     maxLevel: Number,
     level: Number,
     topMustExpand: Boolean,
-    allowGetParentNode: Boolean,
+    allowGetParentNode: Boolean
   },
-  inject:['isLeaf', 'childChecked', 'parentChecked', 'nodeSelected', 'emitEventToTree', 'setAttr'],
+  inject: [
+    "isLeaf",
+    "childChecked",
+    "parentChecked",
+    "nodeSelected",
+    "emitEventToTree",
+    "setAttr"
+  ],
   computed: {
     itemVisible() {
-      const {visible = true} = this.item
-      return visible
+      const { visible = true } = this.item;
+      return visible;
     },
-    hasExpended() { // 已经展开过
-      let {hasExpended = false, expanded = false} = this.item
-      return this.itemVisible && (expanded || hasExpended)
+    hasExpended() {
+      // 已经展开过
+      let { hasExpended = false, expanded = false } = this.item;
+      return this.itemVisible && (expanded || hasExpended);
     },
-    liClass (){
-      const index = this.index
-      let res
+    liClass() {
+      const index = this.index;
+      let res;
       if (this.parent) {
         res = {
-          leaf: this.isLeaf(this.item),
-        }
-      } else { // top node
+          leaf: this.isLeaf(this.item)
+        };
+      } else {
+        // top node
         res = {
-          'first-node': index === 0,
-          'only-node': this.dataLength === 1,
-          'second-node': index === 1
-        }
+          "first-node": index === 0,
+          "only-node": this.dataLength === 1,
+          "second-node": index === 1
+        };
       }
-      return res
-    },
-    hasChildren () {
-      const item = this.item
-      return item.children && item.children.length > 0
-    },
-    showExpand () {
-      const item = this.item
-      const isShow = !this.parent ? this.topMustExpand : false
-      return isShow || this.hasChildren || item.async
-    },
-    showNextUl () {
-      return !this.isLeaf(this.item) && this.maxLevel > this.level && this.hasExpended
-    },
-    position () {
-      return {level: this.level, index: this.index}
+      return res;
+    },
+    hasChildren() {
+      const item = this.item;
+      return item.children && item.children.length > 0;
+    },
+    showExpand() {
+      const item = this.item;
+      const isShow = !this.parent ? this.topMustExpand : false;
+      return isShow || this.hasChildren || item.async;
+    },
+    showNextUl() {
+      return (
+        !this.isLeaf(this.item) &&
+        this.maxLevel > this.level &&
+        this.hasExpended
+      );
+    },
+    position() {
+      return { level: this.level, index: this.index };
     }
   },
   watch: {
-    'item.checked': {
-      handler () {
-        this.checkedChange()
+    "item.checked": {
+      handler() {
+        this.checkedChange();
       },
       immediate: true
     },
-    'item.halfcheck': {
-      handler () {
-        this.checkedChange()
+    "item.halfcheck": {
+      handler() {
+        this.checkedChange();
       },
       immediate: true
     }
@@ -156,66 +186,65 @@ export default {
     /* @method drag node
      * @param node draged node
      * @param ev  $event
-    */
-    drag (node, ev) {
-      let guid = this.guid()
-      this.setDragNode(guid, node, this.parent)
-      ev.dataTransfer.setData('guid', guid)
+     */
+    drag(node, ev) {
+      let guid = this.guid();
+      this.setDragNode(guid, node, this.parent);
+      ev.dataTransfer.setData("guid", guid);
     },
     /* @method expand or close node
      * @param node current node
-    */
-    expandNode (node) {
-      const expended = !node.expanded
-      this.setAttr(node, 'expanded', expended)
-      this.setAttr(node, 'hasExpended', true)
+     */
+    expandNode(node) {
+      const expended = !node.expanded;
+      this.setAttr(node, "expanded", expended);
+      this.setAttr(node, "hasExpended", true);
       if (node.async && !node.children) {
-        this.emitEventToTree('async-load-nodes', node)
+        this.emitEventToTree("async-load-nodes", node);
       }
-      this.emitEventToTree('node-expand', node, expended, this.position)
+      this.emitEventToTree("node-expand", node, expended, this.position);
     },
     /* @event passing the node-check event to the parent component
      * @param node clicked node
      */
-    nodeCheck (node, checked) {
-      this.$set(node, 'checked', checked)
-      const halfcheck = this.halfcheck
-      if (halfcheck) {
-        this.$set(node, 'halfcheck', false)
-      }
+    nodeCheck(node, checked) {
+      this.$set(node, "checked", checked);
       if (!this.scoped) {
-        this.childChecked(node, checked, halfcheck)
-        // this.theParentChecked(checked, halfcheck)
+        const halfcheck = this.halfcheck;
+        if (halfcheck) {
+          this.$set(node, "halfcheck", false);
+        }
+        this.childChecked(node, checked, halfcheck);
       }
     },
     /* @event passing the node-mouse-over event to the parent component
      * @param node overed node
      */
-    nodeMouseOver (node, index, parent) {
-      this.emitEventToTree('node-mouse-over', node, index, parent)
+    nodeMouseOver(node, index, parent) {
+      this.emitEventToTree("node-mouse-over", node, index, parent);
       // this.$emit('node-mouse-over', node)
     },
     /*
      *@method change the check box status method
      *@param node current node
      *@param $event event object
      */
-    changeNodeCheckStatus (node, $event) {
-      const checked = $event.target.checked
-      this.nodeCheck(node, checked)
-      this.emitEventToTree('node-check', node, checked, this.position)
-    },
-    theParentChecked(checked, halfcheck){
-      const parentNode = this.parent
-      this.parentChecked(parentNode, checked, halfcheck)
-    },
-    checkedChange () {
-      const {checked = false} = this.item
-      this.theParentChecked(checked, this.halfcheck)
+    changeNodeCheckStatus(node, $event) {
+      const checked = $event.target.checked;
+      this.nodeCheck(node, checked);
+      this.emitEventToTree("node-check", node, checked, this.position);
+    },
+    theParentChecked(checked, halfcheck) {
+      const parentNode = this.parent;
+      this.parentChecked(parentNode, checked, halfcheck);
+    },
+    checkedChange() {
+      const { checked = false } = this.item;
+      this.theParentChecked(checked, this.halfcheck);
       // if (!checked) {
       //   this.$set(this.item, 'selected', checked)
       // }
-    },
+    }
   }
-}
+};
 </script>