Merge branch 'master' of https://github.com/Create-Peace/vue-tree

Author: M-Ray

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env"], ["@vue/babel-preset-jsx", {
+      "injectH": false
+    }]
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+/node_modules
+/lib

.gitignore

@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.history
 
 # Log files
 npm-debug.log*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 M-Ray
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,101 @@
-# 基于Vue实现的Tree组件支持拖拽
+## Tree component based on Vue implementation
 
-### 支持搜索，checkbox勾选，大数据量时的虚拟滚动
+* Support drag, check, multiple check, bigData virtual scroll, lazy load, checkStrictly, add and delete node, etc.
 
-### 更详细的API 正在整理中
+## Simple usage
+```bash
+ npm install light-vue-tree
+```
 
+```js
+<template>
+    <div class="base">
+        <VueTree
+        ref="tree1"
+        draggable
+        :treeData="treeData"
+        @on-drop="dropNode"
+        @on-selected-change="clickNode"
+        />
+    </div>
+</template>
+<script>
+import { treeData } from '../../assets/treeData'
+export default {
+    name: 'Base',
+    data () {
+        return {
+            treeData
+        }
+    },
+    methods: {
+        dropNode({ parentNode, targetNode, callback }) {
+            console.log("dropNode", parentNode, targetNode);
+            callback(targetNode);
+        },
+        clickNode (node) {
+            console.log('clickNode', node)
+        }
+    }
+}
+</script>
+
+```
+
+## Screenshots
+
+Virtual tree render big data (100000 node):
+
+<img src="./screenshots/virtualTree@2x.png">
+
+
+## Advantages
+* Simple and very easy to use.
+
+* Big data list with high render performance and efficient.
+
+* Can Customize following components (e.g. checkbox, expand icon, loading)
+
+
+## Api
+
+### props
+
+
+Property | Type | Description | Default
+--- | --- | ---- | ----
+treeData |Array[Object] | <div style="width:200pt">The treeNodes data Array,if set it then you need not to construct children TreeNode.(key should be unique across the whole array)</div> | -
+showCheckbox | boolean | Add a Checkbox before the treeNodes | false
+draggable    | boolean | Whether to allow dropping on the node | false
+checkStrictly | boolean | <div style="width: 200pt">Check treeNode precisely; parent treeNode and children treeNodes are not associated</div> | false
+lazy          | boolean | Lazy load node data | false
+load          | function |Load data asynchronously | function(node)| -
+immediatelyLoad | boolean | First load data when lazy load | false
+virtual       | boolean  | Disable virtual scroll when set to false | false
+height      |  number    | When virtual scroll must set | -
+expandedAll | boolean    | Whether to expand all treeNodes by default | -
+keeps       | number     | <div style="width: 200pt">How many items you are expecting the virtual list to keep rendering in the real dom.</div> | 30
+searchVal   | String | Search keywords | -
+
+
+## Events
+Property | Type | Description | Params
+ -- | -- | -- | --
+ on-selected-change |function | <div style="width: 150pt">Callback function for when the user right clicks a treeNode</div> | function(node)
+ on-drop | function | Callback function for when the user drag node | function({ parentNode, targetNode, callback })
+ on-checked-item    | function | Callback function for when the user check node | function({ node, vNode })
+ on-checked-change  | function | Callback function for when checkbox change |function({ node, selectedData })
+
+ Scoped Slot
+
+ name | Description
+ -- | --
+ loading | customize loading component, params`({loading})`
+ check   | customize check component, params`({handleClickCheckBox, selectToggle, node})`
+expandIcon | customize expand icon and unexpanded icon, params`({ expanded, toggleFold })`
+
+## Contributions
+
+Welcome to improve this component with any issue, pull request or code review.
+## License
+[MIT License](https://github.com/Create-Peace/vue-tree/blob/master/LICENSE).

docs/css/app.1a4ddc1e.css

@@ -0,0 +1,3 @@
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>docs-example</title><link rel="stylesheet" href="milligram.css"><link rel="stylesheet" href="highlight/theme.css"><script src="highlight/pack.js"></script><style>.ml20 {
+        margin-left: 20px;
+      }</style><link href="css/app.1a4ddc1e.css" rel="preload" as="style"><link href="js/app.b6e66295.js" rel="preload" as="script"><link href="js/chunk-vendors.5d00ae1b.js" rel="preload" as="script"><link href="css/app.1a4ddc1e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but docs-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.5d00ae1b.js"></script><script src="js/app.b6e66295.js"></script></body></html>