├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── README_CN.md ├── demo ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ └── main.js └── yarn.lock ├── dist ├── halower-tree.min.css ├── halower-tree.min.css.map ├── v2-tree.js └── v2-tree.js.map ├── docs ├── app.5eff19d53f4dd681b9d99313132dfe70.css ├── app.8764e0e73d92f21a8726.js ├── index.html ├── manifest.c57b3379a0776b06afff.js └── vendor.52b7260f9c35a60d3253.js ├── index.html ├── package.json ├── screenshots └── selectTree.png ├── src ├── App.vue ├── assets │ └── hello.png ├── components │ ├── collapse-transition.js │ ├── index.js │ ├── loading.vue │ ├── mixins.js │ ├── render.js │ ├── selectTree.vue │ ├── tree.css │ ├── tree.vue │ ├── treeLi.vue │ └── treeUl.vue └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ], 6 | "plugins": ["transform-vue-jsx"] 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | package-lock.json 6 | demo/package.lock.json 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 halower 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/v/vue-tree-halower.svg )](https://www.npmjs.com/package/vue-tree-halower) 2 | [![npm](https://img.shields.io/npm/dt/vue-tree-halower.svg)](https://www.npmjs.com/package/vue-tree-halower) 3 | [![GitHub stars](https://img.shields.io/github/stars/halower/vue-tree.svg?style=social&label=Stars&style=for-the-badge)](https://github.com/halower/vue-tree/stargazers) 4 | [![GitHub forks](https://img.shields.io/github/forks/halower/vue-tree.svg?style=social&label=Fork&style=for-the-badge)](https://github.com/halower/vue-tree/network) 5 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]() 6 | 7 | ` 8 | The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others. 9 | ` 10 | # Version: 2.x  ([中文文档](https://github.com/halower/vue2-tree/blob/master/README_CN.md)) 11 | ```QQ Group: 255965810```
12 | `we guess you may also see` [version 1.0](https://github.com/halower/vue2-tree/tree/1.x) 13 | # Online Demo 14 | [https://halower.github.io/vue-tree](http://120.77.84.4/) 15 | 16 | # SelectTree API 17 | The latest release has the ability to support the dropdown tree, extending the following with the same basic attributes and events (consistent with the [Tree API](https://github.com/halower/vue-tree#tree-api-doc)) 18 | 19 | | Parameters | Description | Type | Optional value |Default value | 20 | |---------- |-------- |---------- |---------- |---------- | 21 | |searchable | Search Functionality Required | Boolean | Y |true | 22 | |pleasechoosetext | Dropdown box default prompts this article | String | Y |Please choose ... | 23 | |searchtext | Search box default prompts this article | String | Y |Search ... | 24 | |searchfilter | Custom search pull down tree filter function | Function | Y |node => node.title.indexOf (This.searchworld) > 1 | 25 | ## Effect Chart (no demo here, other effects like Onlinedemo) 26 | ![](https://github.com/halower/vue-tree/blob/master/screenshots/selectTree.png) 27 | ### How to use 28 | Please read the [Tree API](https://github.com/halower/vue-tree#tree-api-doc) documentation before using the selectTree 29 | ``` 30 | import { VTree, VSelectTree } from 'vue-tree-halower' 31 | Vue.use (VTree) 32 | Vue.use (VSelectTree) 33 | ------------------- 34 | 35 | ``` 36 | # Tree API Doc 37 | ### Node Property 38 | | Parameters | Description | Type | Optional values | Default value | 39 | |---------- |-------- |---------- |---------- |---------- | 40 | |id | when this property is empty, the title property will be used as the key | String | Y | -| 41 | |title | node name | String | N | -| 42 | |children | child nodes | Array[object] | Y | -| 43 | |async | whether to load child nodes asynchronously | Boolean | Y | false | 44 | |expanded | node Expansion | Boolean | Y | false | 45 | |halfcheck | whether the node is half optional (subordinate selected) | Boolean | Y | false | 46 | |visible | is the node visible | Boolean | Y | true | 47 | |selected | whether the node is selected | Boolean | Y | false | 48 | |checked | whether the node check box is selected | Boolean | Y | false | 49 | |nocheck | specifies that a node does not render check box when multiple checkboxes are open | Boolean | Y | false | 50 | |loading | open load effect | Boolean | Y | false | 51 | |chkDisabled | disable the function of a check box for a node | Boolean | Y | false | 52 | |hasExpanded | node has expanded| Boolean | Y | false | 53 | |parent | get parent node(when `allowGetParentNode=true`,the node will add `parent`method)) | Function | - | undefined | 54 | |selDisabled | disable the select function of a node| Boolean | Y | false | 55 | 56 | ### Tree Property 57 | | Parameters | Description | Type | Optional values | default value | 58 | |---------- |-------- |---------- |---------- |---------- | 59 | |data | tree Data Source | Array[object] | N | -| 60 | |multiple | turn on Check mode | Boolean | Y | false | 61 | |tpl | custom templates | JSX | Y | false | 62 | |halfcheck | turn on semi-select mode | Boolean | Y | select all | 63 | |scoped | quarantine node Selected state | Boolean | Y | false | 64 | |draggable | support drag? | Boolean | Y | false | 65 | |dragafterexpanded | ro expand after dragging | Boolean | Y | true | 66 | |canDeleteRoot | can delete the root node | Boolean | Y | false | 67 | |maxLevel | node max level | Number | Y | 1024 | 68 | |topMustExpand | the top level must can expand | Boolean | Y | true | 69 | |allowGetParentNode | allow get the parent node | Boolean | Y | false | 70 | |radio | the selected node only one | Boolean | Y | false | 71 | |selectAlone | select is alone | Boolean | Y | false | 72 | 73 | ### method 74 | | Method name | Description | Parameters | 75 | |---------- |-------- |---------- | 76 | | getSelectedNodes | returns an array of currently selected nodes,isOriginal:false, | isOriginal: Boolean, ignoreInvisibleNode: Boolean | 77 | | getCheckedNodes | returns the array of nodes selected by the current check box | isOriginal: Boolean,ignoreInvisibleNode: Boolean | 78 | | getNodes |the options objects such as {selected:true}, if empty, use {} | options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean| 79 | | searchNodes | filter:function/string (if it is a function, it will eventually return a Boolean type) |node| 80 | | nodeSelected | to select a node |node: Object| 81 | | addNode | add a node |parentNode: Object, node: Object| 82 | | addNodes | add some nodes |parentNode: Object, nodes: Array| 83 | 84 | ### events 85 | | Event name | Description | Parameters | 86 | |---------- |-------- |---------- | 87 | | node-click | click the node to trigger the event | node: Object | 88 | | node-select | click the select to trigger the event | node: Object, selected: boolean, position: {level, index}| 89 | | node-check | click the checkbox to trigger the event | node: Object, checked: boolean, position: {level, index} | 90 | | node-mouse-over | over the node to trigger the event | node: Object, index: Number, parentNode: node, position: {level, index} | 91 | | async-load-nodes | event used to implement asynchronous loading | node: Object | 92 | | drag-node-end | drag node end trigger the event | {dragNode: Object, targetNode: Object} | 93 | | del-node | after delete a node | { parentNode: Object || null, delNode: Object } | 94 | | node-expand | click the expand to trigger the event | node: Object, expand: boolean, position: {level, index}| 95 | 96 | ### How to use 97 | 98 | Step1: install plugins (Vue Cli3 not necessary, Demo based on VueCli3) 99 | ``` 100 | npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev 101 | 102 | npm install vue-tree-halower --save 103 | ``` 104 | Step2: In your .babelrc (Vue Cli3 not necessary,Demo based on VueCli3) 105 | ``` 106 | { 107 | "presets": ["env"], 108 | "plugins": ["transform-vue-jsx"] 109 | } 110 | ``` 111 | Step3： In your main.js 112 | ``` 113 | import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree 114 | import VTree from 'vue-tree-halower' 115 | 116 | Vue.use(VTree) 117 | ``` 118 | 119 | 120 | ### Demo 121 | 122 | `Html` 123 | ``` 124 |
125 | 126 | 127 | 128 |
129 | ``` 130 | `JS` 131 | ``` 132 | export default { 133 | name: 'HelloWorld', 134 | data () { 135 | return { 136 | searchword: '', 137 | initSelected: ['node-1'], 138 | treeData1: [{ 139 | title: 'node1', 140 | expanded: true, 141 | children: [{ 142 | title: 'node 1-1', 143 | expanded: true, 144 | children: [{ 145 | title: 'node 1-1-1' 146 | }, { 147 | title: 'node 1-1-2' 148 | }, { 149 | title: 'node 1-1-3' 150 | }] 151 | }, { 152 | title: 'node 1-2', 153 | children: [{ 154 | title: "node 1-2-1" 155 | }, { 156 | title: "node 1-2-2" 157 | }] 158 | }] 159 | }], 160 | treeData2: [{ 161 | title: 'node1', 162 | expanded: false, 163 | async: true 164 | }], 165 | 166 | treeData3: [{ 167 | title: 'node1', 168 | expanded: true, 169 | children: [{ 170 | title: 'node 1-1', 171 | expanded: true, 172 | children: [{ 173 | title: 'node 1-1-1' 174 | }, { 175 | title: 'node 1-1-2' 176 | }, { 177 | title: 'node 1-1-3' 178 | }] 179 | }] 180 | }] 181 | } 182 | }, 183 | methods: { 184 | // tpl (node, ctx, parent, index, props) { 185 | tpl (...args) { 186 | let {0: node, 2: parent, 3: index} = args 187 | let titleClass = node.selected ? 'node-title node-selected' : 'node-title' 188 | if (node.searched) titleClass += ' node-searched' 189 | return 190 | 191 | { 192 | this.$refs.tree.nodeSelected(node) 193 | }}> 194 | 195 | 196 | 197 | }, 198 | async asyncLoad (node) { 199 | this.$set(node, 'loading', true) 200 | let pro = new Promise(resolve => { 201 | setTimeout(resolve, 2000, ['async node1', 'async node2']) 202 | }) 203 | this.$refs.tree1.addNodes(node, await pro) 204 | this.$set(node, 'loading', false) 205 | }, 206 | search () { 207 | this.$refs.tree.searchNodes(this.searchword) 208 | } 209 | } 210 | } 211 | 212 | ``` 213 | ### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 214 | 215 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/v/vue-tree-halower.svg )](https://www.npmjs.com/package/vue-tree-halower) 2 | [![npm](https://img.shields.io/npm/dt/vue-tree-halower.svg)](https://www.npmjs.com/package/vue-tree-halower) 3 | [![GitHub stars](https://img.shields.io/github/stars/halower/vue-tree.svg?style=social&label=Stars&style=for-the-badge)](https://github.com/halower/vue-tree/stargazers) 4 | [![GitHub forks](https://img.shields.io/github/forks/halower/vue-tree.svg?style=social&label=Fork&style=for-the-badge)](https://github.com/halower/vue-tree/network) 5 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]() 6 | 7 | `文档写得很简单，欢迎大家在使用的过程中完善文档，以更好的为其它人提供帮助。` 8 | # Version: 2.x  ([English Document](https://github.com/halower/vue2-tree/blob/master/README.md)) 9 | ```QQ Group: 255965810```
10 | `如果看老版本请点击这里` [version 1.0](https://github.com/halower/vue2-tree/tree/1.x) 11 | # Online Demo 12 | [https://halower.github.io/vue-tree](http://120.77.84.4/) 13 | 14 | 15 | # SelectTree API 16 | 最新的发布版本已经支持下拉树功能, 在基本属性和事件(与 [Tree API](https://github.com/halower/vue-tree/blob/master/README_CN.md#tree-api-%E6%96%87%E6%A1%A3)一致)不变的前提下扩展了如下 17 | 18 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 19 | |---------- |-------- |---------- |---------- |---------- | 20 | |searchable     | 是否需要搜索功能 | Boolean | Y | true | 21 | |pleasechoosetext     | 下拉框默认提示本文 | String | Y | please choose... | 22 | |searchtext     | 搜索框框默认提示本文 | String | Y | search... | 23 | |searchFilter | 自定义搜索下拉树过滤函数 | Function | Y | node => mode.title.indexOf(this.searchworld) > -1 | 24 | 25 | ### 效果图（这里不做Demo，其它效果和OnlineDemo一样） 26 | ![效果图](https://github.com/halower/vue-tree/blob/master/screenshots/selectTree.png) 27 | ### 如何使用 28 | 使用选择树组件请先阅读[Tree API](https://github.com/halower/vue-tree/blob/master/README_CN.md#tree-api-%E6%96%87%E6%A1%A3) 文档 29 | 30 | ``` 31 | import { VTree, VSelectTree } from 'vue-tree-halower' 32 | Vue.use (VTree) 33 | Vue.use (VSelectTree) 34 | ------------------- 35 | 36 | ``` 37 | # Tree API 文档 38 | ### Node 属性 39 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 40 | |---------- |-------- |---------- |---------- |---------- | 41 | |id     | 当这个属性为空，title属性将作为key | String | Y | — | 42 | |title     | 节点名称 | String | N | — | 43 | |expanded | 节点是否展开 | Boolean | Y | false | 44 | |checked | 节点复选框是否选中 | Boolean | Y | false | 45 | |halfcheck | 节点是否为半选（下级被选中） | Boolean | Y | false | 46 | |visible | 节点是否可见 | Boolean | Y | true | 47 | |selected | 节点是否被选中 | Boolean | Y | false | 48 | |children | 子节点 | Array[Object] | Y | — | 49 | |async | 是否异步加载子节点 | Boolean | Y | false | 50 | |loading | 开启加载效果 | Boolean | Y | false | 51 | |nocheck | 多复选框开启时指定某一节点不渲染复选框 | Boolean | Y | false | 52 | |chkDisabled | 禁用某一结点的复选框的功能 | Boolean | Y | false | 53 | |hasExpanded | 某一结点是否已经展开过(之前错误拼写成了hasExpended) | Boolean | Y | false | 54 | |parent | 获取父节点(当allowGetParentNode=true时,增加parent方法,若父节点不存在时,会返回null)) | Function | - | undefined | 55 | |selDisabled | 禁用某一结点的select的功能 | Boolean | Y | false | 56 | ### Tree 属性 57 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 58 | |---------- |-------- |---------- |---------- |---------- | 59 | |data     | 树数据源 | Array[Object] | N | — | 60 | |multiple | 开启复选模式 | Boolean | Y | false | 61 | |tpl | 自定义模板 | JSX | Y | false | 62 | |halfcheck | 开启半选模式 | Boolean | Y | 全选 | 63 | |scoped | 隔离节点选中状态 | Boolean | Y | false | 64 | |draggable | 是否支持拖拽 | Boolean | Y | false | 65 | |dragAfterExpanded | 拖拽后展开 | Boolean | Y | true | 66 | |canDeleteRoot | 是否可以删除根节点 | Boolean | Y | false | 67 | |maxLevel | 最大层级数 | Number | Y | 1024 | 68 | |topMustExpand | 首层是否必须可展开 | Boolean | Y | true | 69 | |allowGetParentNode | 是否允许节点获取父节点 | Boolean | Y | false | 70 | |radio | selected 只允许单选 | Boolean | Y | false | 71 | |selectAlone | select事件不影响checkbox | Boolean | Y | false | 72 | 73 | ### 方法 74 | | 方法名 | 说明 | 参数 | 75 | |---------- |-------- |---------- | 76 | | getSelectedNodes | 返回目前被选中的节点所组成的数组,isOriginal:默认false, ignoreInvisibleNode:默认false| isOriginal: Boolean,ignoreInvisibleNode: Boolean | 77 | | getCheckedNodes | 返回目前复选框选中的节点组成的数组 | isOriginal: Boolean,ignoreInvisibleNode: Boolean | 78 | | getNodes | options: 可以包含一些过滤属性对象如{selected: true}，如果为空，请使用 {}; data: 数组,内容为[node,...],默认为传入的data数据;isOriginal:获取的数据是否保持原样,默认为false,会去掉`children``hasExpanded``parent`属性,ignoreInvisibleNode:忽略不可见节点,默认false|options: Object, data: Array,isOriginal: Boolean,ignoreInvisibleNode: Boolean| 79 | | searchNodes | filter:function/string (如果是函数则最终会返回一个boolean类型);data:默认为this.data |filter:Function || String, data: Array| 80 | | nodeSelected | 选中节点方法 |node: Object| 81 | | addNode | 增加节点 |parentNode: Object(不能为空), node: Object| 82 | | addNodes | 增加多个节点 |parentNode: Object(不能为空), nodes: Array| 83 | 84 | ### 事件 85 | | 事件名 | 说明 | 参数 | 86 | |---------- |-------- |---------- | 87 | | node-click | 单击节点触发的事件 | node: Object | 88 | | node-select | 选择节点后触发的事件(和node-click是一样的)；position: 位置信息level：层级 | node: Object, selected: boolean, position: {level, index}| 89 | | node-check | 点击checkbox触发事件 | node: Object, checked: boolean, position: {level, index} | 90 | | node-mouse-over | 鼠标滑过节点触发事件 | node: Object, index: Number, parentNode: node, position: {level, index} | 91 | | async-load-nodes | 用于实现异步加载 | node: Object | 92 | | drag-node-end | 节点拖拽结束后触发事件 | {dragNode: Object, targetNode: Object} | 93 | | del-node | 删除节点后触发事件 | { parentNode: Object || null, delNode: Object } | 94 | | node-expand | expand触发事件 | node: Object, expand: boolean, position: {level, index} | 95 | 96 | ### 如何使用 97 | 98 | Step1: install plugins （Vue Cli3 不需要,请查看demo） 99 | ``` 100 | npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev 101 | 102 | npm install vue-tree-halower --save 103 | ``` 104 | ``` 105 | Step2: In your .babelrc （Vue Cli3 不需要,请查看demo） 106 | ``` 107 | { 108 | "presets": ["env"], 109 | "plugins": ["transform-vue-jsx"] 110 | } 111 | 112 | Step3： In your main.js 113 | ``` 114 | import 'vue-tree-halower/dist/halower-tree.min.css' // 你可以自定义树的样式 115 | import VTree from 'vue-tree-halower' 116 | 117 | Vue.use(VTree) 118 | 119 | ``` 120 | 121 | ### Demo 122 | 123 | `Html` 124 | ``` 125 |
126 | 127 | 128 | 129 |
130 | ``` 131 | `JS` 132 | ``` 133 | export default { 134 | name: 'DemoTree', 135 | data () { 136 | return { 137 | lang: 'zh', 138 | searchword: '', 139 | treeData: [{ 140 | title: '一级节点', 141 | expanded: true, 142 | children: [{ 143 | title: '二级节点1', 144 | expanded: true, 145 | children: [{ 146 | title: '三级节点1-1' 147 | }, { 148 | title: '三级节点1-2' 149 | }, { 150 | title: '三级节点1-3' 151 | }] 152 | }, { 153 | title: '二级节点2', 154 | children: [{ 155 | title: "三级节点2-1" 156 | }, { 157 | title: "三级节点2-2" 158 | }] 159 | }] 160 | }] 161 | } 162 | }, 163 | methods: { 164 | // tpl (node, ctx, parent, index, props) { 165 | tpl (...args) { 166 | let {0: node, 2: parent, 3: index} = args 167 | let titleClass = node.selected ? 'node-title node-selected' : 'node-title' 168 | if (node.searched) titleClass += ' node-searched' 169 | return 170 | 171 | { 172 | this.$refs.tree.nodeSelected(node) 173 | }}> 174 | 175 | 176 | 177 | }, 178 | async asyncLoad (node) { 179 | this.$set(node, 'loading', true) 180 | let pro = new Promise(resolve => { 181 | setTimeout(resolve, 2000, ['async node1', 'async node2']) 182 | }) 183 | this.$refs.tree1.addNodes(node, await pro) 184 | this.$set(node, 'loading', false) 185 | }, 186 | search () { 187 | this.$refs.tree.searchNodes(this.searchword) 188 | } 189 | } 190 | } 191 | ``` 192 | ### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 193 | 194 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn run lint 21 | ``` 22 | -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve", 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.5.17", 13 | "vue-tree-halower": "^1.8.1" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^3.0.1", 17 | "@vue/cli-plugin-eslint": "^3.0.1", 18 | "@vue/cli-service": "^3.0.1", 19 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 20 | "babel-plugin-syntax-jsx": "^6.18.0", 21 | "babel-plugin-transform-vue-jsx": "^3.7.0", 22 | "babel-preset-env": "^1.7.0", 23 | "schema-utils": "^1.0.0", 24 | "vue-template-compiler": "^2.5.17" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "rules": {}, 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | } 39 | }, 40 | "postcss": { 41 | "plugins": { 42 | "autoprefixer": {} 43 | } 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions", 48 | "not ie <= 8" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halower/vue-tree/72edddcdc7540bc1cb995c7c68ff0ba4f9505c43/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | demo 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halower/vue-tree/72edddcdc7540bc1cb995c7c68ff0ba4f9505c43/demo/src/assets/logo.png -------------------------------------------------------------------------------- /demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 116 | 167 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import 'vue-tree-halower/dist/halower-tree.min.css' 5 | import {VTree, VSelectTree} from 'vue-tree-halower' 6 | Vue.use(VTree) 7 | Vue.use(VSelectTree) 8 | 9 | Vue.config.productionTip = false 10 | 11 | new Vue({ 12 | render: h => h(App) 13 | }).$mount('#app') 14 | -------------------------------------------------------------------------------- /dist/halower-tree.min.css: -------------------------------------------------------------------------------- 1 | .halo-tree li span:hover{background-color:transparent}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.halo-tree .expand-enter-active{transition:all 3s ease;height:50px;overflow:hidden}.halo-tree .expand-leave-active{transition:all 3s ease;height:0;overflow:hidden}.halo-tree .expand-enter,.halo-tree .expand-leave{height:0;opacity:0}.halo-tree{font-size:14px;-webkit-transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out;transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.halo-tree ul{box-sizing:border-box}.halo-tree li,.halo-tree ul{list-style-type:none;text-align:left}.halo-tree .inputCheck{display:inline-block;position:relative;width:14px;height:14px;border:1px solid #888;border-radius:2px;top:4px;text-align:center;font-size:14px;line-height:14px}.halo-tree .inputCheck.notAllNodes:before{content:"\2713";display:block;position:absolute;width:100%;height:100%;background-color:#888;z-index:1;color:#fff}.halo-tree .inputCheck.box-checked:after{content:"\2713";display:block;position:absolute;z-index:1;width:100%;text-align:center}.halo-tree .box-halfchecked{background-color:#888}.halo-tree .box-halfchecked:after{content:"\2713";display:block;position:absolute;z-index:1;width:100%;text-align:center;color:#fff}.halo-tree .check{display:block;position:absolute;font-size:14px;width:16px;height:16px;left:-5px;top:-4px;border:1px solid #000;opacity:0;cursor:pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);z-index:2}.halo-tree .chkDisabled{background-color:#f5f5f5;opacity:1;cursor:not-allowed}.halo-tree li{margin:0;padding:5px 5px 5px 15px;position:relative;list-style:none}.halo-tree li:after,.halo-tree li:before{content:"";left:-8px;position:absolute;right:auto;border-width:1px}.halo-tree li:before{border-left:1px dashed #999;bottom:50px;height:100%;top:-8px;width:1px}.halo-tree li:after{border-top:1px dashed #999;height:20px;top:17px;width:28px}.halo-tree li:last-child:before{height:26px}.halo-tree>li.first-node:before{top:17px}.halo-tree>li.second-node:before{top:4px}.halo-tree>li.first-node.only-node:before{border-left:none}.halo-tree>li.only-node:after{border-top:none}.halo-tree>ul{padding-left:0}.halo-tree ul{padding-left:17px;padding-top:10px}.halo-tree .tree-expand{display:inline-block;width:14px;height:14px;text-align:center;line-height:13px;border:1px solid #888;border-radius:2px;background:#fff;font-style:normal}.halo-tree .tree-open{line-height:13px}.halo-tree .tree-close:after{content:"+"}.halo-tree .tree-open:after{content:"\2013"}.halo-tree .tree-empty:after{content:""}.halo-tree .tree-node-el{background-color:#fff;padding-left:2px;position:relative;z-index:3}.halo-tree li.leaf{padding-left:15px}.halo-tree li.leaf:after{content:"";left:-7px;position:absolute;right:auto;border-width:1px;border-top:1px dashed #999;height:20px;top:17px;width:25px}.halo-tree-search-box{height:18px;line-height:18px;outline:none;border:1px solid #888;border-radius:3px}.halo-tree-search-box:focus{border:1px solid #108ee9;-webkit-box-shadow:0 2px 2px rgba(16,142,233,.2);box-shadow:0 2px 2px rgba(16,142,233,.2);-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.halo-tree .node-title{padding:3px;border-radius:3px;cursor:pointer;margin:0 2px}.halo-tree .node-title:hover{background-color:#ccc}.halo-tree .node-title-disabled{padding:3px;border-radius:3px;background-color:#f5f5f5;opacity:1;cursor:not-allowed;margin:0 2px}.halo-tree .node-title-disabled:hover{background-color:#f5f5f5}.halo-tree .node-selected{border:1px solid #ddd;background-color:#ddd}.halo-tree .node-title.node-searched{border:1px solid #ff8247}svg[data-v-e7743bdc]{height:14px;width:14px;overflow:visible;line-height:14px}circle[data-v-e7743bdc]{fill:#1e90ff;fill-opacity:0;-webkit-animation:opacity-data-v-e7743bdc 1.2s linear infinite;animation:opacity-data-v-e7743bdc 1.2s linear infinite}circle[data-v-e7743bdc]:nth-child(12n+1){-webkit-animation-delay:-.1s;animation-delay:-.1s}circle[data-v-e7743bdc]:nth-child(12n+2){-webkit-animation-delay:-.2s;animation-delay:-.2s}circle[data-v-e7743bdc]:nth-child(12n+3){-webkit-animation-delay:-.3s;animation-delay:-.3s}circle[data-v-e7743bdc]:nth-child(12n+4){-webkit-animation-delay:-.4s;animation-delay:-.4s}circle[data-v-e7743bdc]:nth-child(12n+5){-webkit-animation-delay:-.5s;animation-delay:-.5s}circle[data-v-e7743bdc]:nth-child(12n+6){-webkit-animation-delay:-.6s;animation-delay:-.6s}circle[data-v-e7743bdc]:nth-child(12n+7){-webkit-animation-delay:-.7s;animation-delay:-.7s}circle[data-v-e7743bdc]:nth-child(12n+8){-webkit-animation-delay:-.8s;animation-delay:-.8s}circle[data-v-e7743bdc]:nth-child(12n+9){-webkit-animation-delay:-.9s;animation-delay:-.9s}circle[data-v-e7743bdc]:nth-child(12n+10){-webkit-animation-delay:-1s;animation-delay:-1s}circle[data-v-e7743bdc]:nth-child(12n+11){-webkit-animation-delay:-1.1s;animation-delay:-1.1s}circle[data-v-e7743bdc]:nth-child(12n+12){-webkit-animation-delay:-1.2s;animation-delay:-1.2s}.g-circles--v2 circle[data-v-e7743bdc]{fill-opacity:0;stroke-opacity:0;stroke-width:1;stroke:#9acd32;-webkit-animation-name:opacity-stroke-data-v-e7743bdc,colors-data-v-e7743bdc,colors-stroke-data-v-e7743bdc,transform-2-data-v-e7743bdc;animation-name:opacity-stroke-data-v-e7743bdc,colors-data-v-e7743bdc,colors-stroke-data-v-e7743bdc,transform-2-data-v-e7743bdc}.g-circles--v3 circle[data-v-e7743bdc]{fill-opacity:1;-webkit-animation-name:opacity-data-v-e7743bdc,colors-data-v-e7743bdc;animation-name:opacity-data-v-e7743bdc,colors-data-v-e7743bdc}.g-circles--v4 circle[data-v-e7743bdc]{fill-opacity:1;fill:orange;-webkit-transform-origin:60px 60px;-ms-transform-origin:60px 60px;transform-origin:60px 60px;-webkit-animation-name:opacity-data-v-e7743bdc,colors-3-data-v-e7743bdc,transform-data-v-e7743bdc;animation-name:opacity-data-v-e7743bdc,colors-3-data-v-e7743bdc,transform-data-v-e7743bdc}@-webkit-keyframes opacity-data-v-e7743bdc{3%{fill-opacity:1}75%{fill-opacity:0}}@keyframes opacity-data-v-e7743bdc{3%{fill-opacity:1}75%{fill-opacity:0}}@-webkit-keyframes opacity-stroke-data-v-e7743bdc{10%{stroke-opacity:1}85%{stroke-opacity:0}}@keyframes opacity-stroke-data-v-e7743bdc{10%{stroke-opacity:1}85%{stroke-opacity:0}}@-webkit-keyframes colors-data-v-e7743bdc{0%{fill:#9acd32}10%{fill:gold}75%{fill:crimson}}@keyframes colors-data-v-e7743bdc{0%{fill:#9acd32}10%{fill:gold}75%{fill:crimson}}@-webkit-keyframes colors-stroke-data-v-e7743bdc{0%{stroke:#9acd32}10%{stroke:gold}75%{stroke:crimson}}@keyframes colors-stroke-data-v-e7743bdc{0%{stroke:#9acd32}10%{stroke:gold}75%{stroke:crimson}}@-webkit-keyframes colors-2-data-v-e7743bdc{0%{fill:#ff0}50%{fill:red}65%{fill:#ff4500}95%{fill:gold}}@keyframes colors-2-data-v-e7743bdc{0%{fill:#ff0}50%{fill:red}65%{fill:#ff4500}95%{fill:gold}}@-webkit-keyframes colors-3-data-v-e7743bdc{0%{fill:#9acd32}50%{fill:#40e0d0}65%{fill:#ff0}95%{fill:orange}}@keyframes colors-3-data-v-e7743bdc{0%{fill:#9acd32}50%{fill:#40e0d0}65%{fill:#ff0}95%{fill:orange}}@-webkit-keyframes transform-data-v-e7743bdc{10%{-webkit-transform:scale(.75);transform:scale(.75)}}@keyframes transform-data-v-e7743bdc{10%{-webkit-transform:scale(.75);transform:scale(.75)}}@-webkit-keyframes transform-2-data-v-e7743bdc{40%{-webkit-transform:scale(.85);transform:scale(.85)}60%{stroke-width:20}}@keyframes transform-2-data-v-e7743bdc{40%{-webkit-transform:scale(.85);transform:scale(.85)}60%{stroke-width:20}}.tree-container{position:relative;width:90%;height:36px;border:1px solid #ccc;border-radius:6px}.tag-box-container{position:relative;width:100%;height:36px;overflow:hidden}.tag-box{width:2000%;height:36px}.tree-box{margin-top:3px;border-radius:6px;border:1px solid #ccc;box-shadow:0 0 5px rgba(0,0,0,.4)}.tree-box ul{margin-left:0;-webkit-padding-start:10px}.search-input{width:96%;height:30px;box-sizing:border-box;margin:5px auto 0;font-size:14px;text-indent:1em;outline:none}.search-input,.tag{border:1px solid #ccc;border-radius:6px}.tag{float:left;position:relative;min-width:50px;height:26px;margin:4px;padding:0 10px;line-height:26px;text-align:center;background-color:#fff;user-select:none;cursor:default;transition:padding .3s}.tag .rmNode{display:none}.tag:hover{padding-right:25px}.tag:hover>.rmNode{display:block!important}.blank{background-color:#fff;border:0}.rmNode{position:absolute;right:5px;top:5px;width:15px;height:15px;line-height:15px;font-size:12px;background-color:#b3b3b3;color:#ececec;border-radius:50%;cursor:pointer}.fade-enter-active,.fade-leave-active{transition:opacity .5s,transform .5s}.fade-enter,.fade-leave-active{opacity:0;transform:translateY(-10px)} 2 | /*# sourceMappingURL=halower-tree.min.css.map*/ -------------------------------------------------------------------------------- /dist/halower-tree.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"halower-tree.min.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/v2-tree.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("VTree",[],t):"object"==typeof exports?exports.VTree=t():e.VTree=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=9)}([function(e,t){e.exports=function(e,t,n,r,a,i){var o,s=e=e||{},d=typeof e.default;"object"!==d&&"function"!==d||(o=e,s=e.default);var l="function"==typeof s?s.options:s;t&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0),n&&(l.functional=!0),a&&(l._scopeId=a);var c;if(i?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},l._ssrRegister=c):r&&(c=r),c){var h=l.functional,u=h?l.render:l.beforeCreate;h?(l._injectStyles=c,l.render=function(e,t){return c.call(t),u(e,t)}):l.beforeCreate=u?[].concat(u,c):[c]}return{esModule:o,exports:s,options:l}}},function(e,t,n){"use strict";function r(e){n(10)}var a=n(2),i=n(19),o=n(0),s=r,d=o(a.a,i.a,!1,s,null,null);t.a=d.exports},function(e,t,n){"use strict";function r(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t2&&void 0!==arguments[2]&&arguments[2],a=e.children;a&&a.length&&a.forEach(function(e){e.chkDisabled||(n.$set(e,"checked",t),r&&n.$set(e,"halfcheck",!1),n.$set(e,"parentCheckedToChildren",!0)),n.allowCheckedChildrenOfDisabledChild&&n.childCheckedHandle(e,t,r)})},parentCheckedHandle:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!e||e.chkDisabled||!!e.checked===t)return!1;var r=t,a=t,i=e.children;if(t?a=i.every(function(e){return e.checked&&!e.halfcheck}):r=i.some(function(e){return e.checked}),n){var o=t?!a:r,s=e.halfcheck;if((void 0!==s&&s)!==o)this.$set(e,"halfcheck",o);else if(o)return!1;var d=t||o;this.$set(e,"checked",d)}else this.$set(e,"checked",a);return!0},emitEventToParent:function(e){if(e&&"node-mouse-over"!=e)switch(e){case"node-mouse-over":case"node-check":case"drag-node-end":case"del-node":case"node-click":case"node-select":case"async-load-nodes":case"node-expand":for(var t=arguments.length,n=Array(t>1?t-1:0),a=1;a2&&void 0!==arguments[2])||arguments[2],r=e[t];(void 0===r?this._getDefVal(t):r)!==n&&this.$set(e,t,n)},setAttrs:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=this.setAttr;t.forEach(function(t){return r(e,t,n)})},updateRadioNode:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(t){var n=this.radioNode;n&&this.setNodeAttr(n,"selected",!t),this.radioNode=e}},setNodeAttr:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];e&&t&&(e.hasOwnProperty(t)?this.setAttr(e,t,n):this.$set(e,t,n))},nodeSelected:function(e,t){var n=!e.selected,r=this.multiple&&!this.selectAlone;r&&this.$set(e,"checked",n),this.radio&&this.updateRadioNode(e,n),this.$set(e,"selected",n),r&&this.childCheckedHandle(e,n,this.halfcheck),this.emitEventToParent("node-click",e,n,t),this.emitEventToParent("node-select",e,n,t)},addNode:function(e,t){if(e){var n=null;this.$set(e,"expanded",!0);var r=void 0===t?"undefined":o(t);if("undefined"===r)throw new ReferenceError("newNode is required but undefined");if("string"===r)n={title:t};else{if("object"!==r)throw new ReferenceError("newNode type error, not allowed "+r);if(!t.hasOwnProperty("title"))throw new ReferenceError("the title property is missed");n=t}var a=e.halfcheck,i=e.checked;n=Object.assign({checked:!a&&i},n),this.isLeaf(e)?(this.$set(e,"children",[]),e.children.push(n)):e.children.push(n)}},addNodes:function(e,t){if(e){var n=!0,r=!1,a=void 0;try{for(var i,o=t[Symbol.iterator]();!(n=(i=o.next()).done);n=!0){var s=i.value;this.addNode(e,s)}}catch(e){r=!0,a=e}finally{try{!n&&o.return&&o.return()}finally{if(r)throw a}}}},delNode:function(e,t,n){if(null===t||void 0===t){if(!this.canDeleteRoot)throw new ReferenceError("the root element can't deleted!");this.data.splice(n,1)}else t.children.splice(n,1);this.emitEventToParent("del-node",{parentNode:t,delNode:e})},getNodes:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments[1],n=arguments[2],r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=Object.entries(e),i=a.length>0;return this._getNodes(a,i,t,n,r)},_getNodes:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.data,r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=arguments[4],o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:[],s=function(e,t,n){if(n)e.push(t);else{var r=Object.assign({},t);Reflect.deleteProperty(r,"hasExpanded"),Reflect.deleteProperty(r,"children"),Reflect.deleteProperty(r,"parent"),e.push(r)}},d=function(e){return s(o,e,r)},l=this._getDefVal,c=function(e,t){var n=!0,r=!0,a=!1,o=void 0;try{for(var s,d=t[Symbol.iterator]();!(r=(s=d.next()).done);r=!0){var c=s.value,h=i(c,2),u=h[0],f=h[1];if(e.hasOwnProperty(u)){var p=e[u];n=(void 0===p?l(u):p)===f}else n=!1;if(!n)break}}catch(e){a=!0,o=e}finally{try{!r&&d.return&&d.return()}finally{if(a)throw o}}return n},h=!0,u=!1,f=void 0;try{for(var p,v=n[Symbol.iterator]();!(h=(p=v.next()).done);h=!0){var g=p.value,m=g.children,y=g.visible,x=void 0===y||y;a&&!x||(t?function(t){return c(t,e)}(g)&&d(g):d(g),m&&m.length&&this._getNodes(e,t,m,r,a,o))}}catch(e){u=!0,f=e}finally{try{!h&&v.return&&v.return()}finally{if(u)throw f}}return o},getSelectedNodes:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return this.getNodes({selected:!0},this.data,e,t)},getCheckedNodes:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return this.getNodes({checked:!0},this.data,e,t)},searchNodes:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.data;if(null==e||"string"==typeof e&&""===e.trim())return void n.forEach(function(e){return t._modifyAllNode(e)});var r="function"==typeof e?e:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.title;return(void 0===n?"":n).includes(e)},a=Array.from({length:n.length},function(){return[]});n.forEach(function(e,n){var i=a[n];if(t._searchNodes(r,e,n,i),i.length>0){i.sort(function(e,t){return e.length-t.length});var o=["visible","expanded"];i.some(function(e){return 1===e.length})&&o.push("searched"),t.setAttrs(e,o),t._showSearchNodes(e,i.map(function(e){return e.slice(1)}).filter(function(e){return e.length}))}else t.setAttr(e,"visible",!1)})},_searchNodes:function(e,t,n,a){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=e(t);o=[].concat(r(o),[n]),s&&a.push(o);var d=t.children;if(d&&d.length){var l=!0,c=!1,h=void 0;try{for(var u,f=d.entries()[Symbol.iterator]();!(l=(u=f.next()).done);l=!0){var p=u.value,v=i(p,2),g=v[0],m=v[1];this._searchNodes(e,m,g,a,o)}}catch(e){c=!0,h=e}finally{try{!l&&f.return&&f.return()}finally{if(c)throw h}}}},_getDefVal:function(e){return this.$defVal[e]||!1},_dedupe:function(e){return[].concat(r(new Set(e)))},_showSearchNodes:function(e,t){var n=this;t=t.map(function(e){return[].concat(r(e))});for(var a=this.setAttrs,i=this._dedupe,o=!0;o&&t.length>0;)!function(){var r=e,s=r.children,d=[];t.filter(function(e){var t=e.length;return t>1&&d.push(e),1===t}).forEach(function(e){a(s[e[0]],["visible","expanded","searched"])});var l=i(t.map(function(e){return e[0]})),c=l.length;c!==s.length&&s.forEach(function(e,t){l.includes(t)||n.setAttr(e,"visible",!1)}),d.length>0?1===c?(t=d.map(function(e){return e.slice(1)}),e=s[l[0]],a(e,["visible","expanded"])):(l.forEach(function(e){var r=s[e];a(r,["visible","expanded"]),n._showSearchNodes(r,t.filter(function(t){return t[0]===e&&t.length>1}).map(function(e){return e.slice(1)}))}),o=!1):o=!1}()},_modifyAllNode:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{visible:!0,searched:!1},r=!0,a=!1,o=void 0;try{for(var s,d=Object.entries(n)[Symbol.iterator]();!(r=(s=d.next()).done);r=!0){var l=s.value,c=i(l,2),h=c[0],u=c[1];this.setAttr(e,h,u)}}catch(e){a=!0,o=e}finally{try{!r&&d.return&&d.return()}finally{if(a)throw o}}var f=e.children;f&&f.length>0&&f.forEach(function(e){return t._modifyAllNode(e,n)})}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(4),a=n(18),i=n(0),o=i(r.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,n){"use strict";function r(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}var a=n(11),i=n(6);t.a={name:"TreeUl",mixins:[i.a],inheritAttrs:!1,components:{TreeLi:a.a},inject:["isLeaf","childChecked","parentChecked","emitEventToTree"],props:{data:{type:Array,default:function(){return[]}},parent:{type:Object,default:function(){return null}},dragAfterExpanded:{type:Boolean,default:!0},level:{type:Number,default:0},allowGetParentNode:{type:Boolean,default:!1}},computed:{childBind:function(){var e=this.$props,t=e.data,n=r(e,["data"]),a=t.filter(function(e){return!1!==e.visible}).length;return Object.assign({},this.$attrs,n,{dataLength:a,level:this.treeLevel})},treeLevel:function(){return this.level+1}},methods:{drop:function(e,t){t.preventDefault(),t.stopPropagation();var n=t.dataTransfer.getData("guid"),r=this.getDragNode(n),a=r.node,i=r.parent;if(i===e||null===i||a===e)return!1;if(this.hasInGenerations(a,e))return!1;var o=i.children;e.children&&-1===e.children.indexOf(a)?(e.children.push(a),o.splice(o.indexOf(a),1)):(this.$set(e,"children",[a]),o.splice(o.indexOf(a),1)),this.$set(e,"expanded",this.dragAfterExpanded),this.dragNodeEnd({dragNode:a,targetNode:e,event:t})},drag:function(e,t){var n=this.guid();this.setDragNode(n,e,this.parent),t.dataTransfer.setData("guid",n)},dragover:function(e){e.preventDefault(),e.stopPropagation()},dragNodeEnd:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.emitEventToTree("drag-node-end",e)}},created:function(){if(!0===this.allowGetParentNode){var e=this.data;if(!(e[0]&&"function"==typeof e[0].parent)){var t=this.parent;this.data.forEach(function(e){e.parent=function(){return t}})}}}}},function(e,t,n){"use strict";var r=n(6),a=n(12),i=n(13),o=n(16);t.a={name:"TreeLi",mixins:[r.a],components:{Render:a.a,Loading:i.a,CollapseTransition:o.a},beforeCreate:function(){this.$options.components.TreeUl=n(3).default},props:{item:{type:Object,default:function(){}},index:Number,dataLength:{type:Number,default:0},parent:{type:Object,default:function(){return null}},multiple:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},dragAfterExpanded:{type:Boolean,default:!0},halfcheck:{type:Boolean,default:!1},scoped:{type:Boolean,default:!1},canDeleteRoot:{type:Boolean,default:!1},tpl:Function,maxLevel:Number,level:Number,topMustExpand:Boolean,allowGetParentNode:Boolean},inject:["isLeaf","childChecked","parentChecked","nodeSelected","emitEventToTree","setAttr"],computed:{itemVisible:function(){var e=this.item.visible;return void 0===e||e},hasExpanded:function(){var e=this.item,t=e.hasExpanded,n=void 0!==t&&t,r=e.expanded,a=void 0!==r&&r;return this.itemVisible&&(a||n)},liClass:function(){var e=this.index;return this.parent?{leaf:this.isLeaf(this.item)}:{"first-node":0===e,"only-node":1===this.dataLength,"second-node":1===e}},hasChildren:function(){var e=this.item;return e.children&&e.children.length>0},showExpand:function(){var e=this.item;return!this.parent&&this.topMustExpand||this.hasChildren||e.async},showNextUl:function(){return!this.isLeaf(this.item)&&this.maxLevel>this.level&&this.hasExpanded},position:function(){return{level:this.level,index:this.index}}},watch:{"item.checked":{handler:function(){this.checkedChange()},immediate:!0},"item.halfcheck":{handler:function(){this.checkedChange()},immediate:!0}},methods:{drag:function(e,t){var n=this.guid();this.setDragNode(n,e,this.parent),t.dataTransfer.setData("guid",n)},expandNode:function(e){var t=!e.expanded;this.setAttr(e,"expanded",t),this.setAttr(e,"hasExpanded",!0),e.async&&!e.children&&this.emitEventToTree("async-load-nodes",e),this.emitEventToTree("node-expand",e,t,this.position)},nodeCheck:function(e,t){if(this.$set(e,"checked",t),!this.scoped){var n=this.halfcheck;n&&this.$set(e,"halfcheck",!1),this.childChecked(e,t,n)}},nodeMouseOver:function(e,t,n){this.emitEventToTree("node-mouse-over",e,t,n)},changeNodeCheckStatus:function(e,t){var n=t.target.checked;this.nodeCheck(e,n),this.emitEventToTree("node-check",e,n,this.position)},theParentChecked:function(e,t){var n=this.parent;this.parentChecked(n,e,t)},checkedChange:function(){var e=this.item,t=e.checked,n=void 0!==t&&t,r=e.parentCheckedToChildren,a=void 0!==r&&r;this.scoped&&a||this.theParentChecked(n,this.halfcheck),a&&this.$delete(this.item,"parentCheckedToChildren")}}}},function(e,t,n){"use strict";function r(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})}function a(e,t,n){window.treeDrag={},window.treeDrag[e]={node:t,parent:n}}function i(e){return window.treeDrag[e]}function o(e,t){var n=!1;if(e.hasOwnProperty("children")&&e.children){var r=!0,a=!1,i=void 0;try{for(var s,d=e.children[Symbol.iterator]();!(r=(s=d.next()).done);r=!0){var l=s.value;if(l===t)return!0;l.children&&(n|=o(l,t))}}catch(e){a=!0,i=e}finally{try{!r&&d.return&&d.return()}finally{if(a)throw i}}}return n}t.a={methods:{guid:r,setDragNode:a,getDragNode:i,hasInGenerations:o}}},function(e,t,n){"use strict";t.a={name:"tree-load-svg"}},function(e,t,n){"use strict";function r(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t-1&&(t.$set(e,"selected",!0),t.$set(e,"checked",!0)),e.children&&e.children.length&&t.initTreeStatus(e.children)}(s)}}catch(e){r=!0,a=e}finally{try{!n&&o.return&&o.return()}finally{if(r)throw a}}},getTreeRef:function(){return this.$refs.dropTree}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),a=n(20);n.d(t,"VTree",function(){return r.a}),n.d(t,"VSelectTree",function(){return a.a}),r.a.install=function(e){e.component("VTree",r.a)},a.a.install=function(e){e.component("VSelectTree",a.a)},t.default=r.a},function(e,t){},function(e,t,n){"use strict";var r=n(5),a=n(17),i=n(0),o=i(r.a,a.a,!1,null,null,null);t.a=o.exports},function(e,t,n){"use strict";t.a={name:"render",functional:!0,props:{node:Object,parent:null,tpl:Function,index:Number,nodeMouseOver:Function,level:Number},render:function(e,t){var n=t.props,r=n.node,a=n.parent,i=n.tpl,o=n.index,s=n.nodeMouseOver,d=n.level,l=r.selected,c=r.selDisabled,h=void 0!==c&&c,u=void 0;return u=h?"node-title-disabled":l?"node-title node-selected":"node-title",r.searched&&(u+=" node-searched"),i?i(r,t,a,o,t.props):e("span",{domProps:{innerHTML:r.title},attrs:{title:r.title},class:u,on:{mouseover:function(){return s(r,o,a)},click:function(){h||t.parent.nodeSelected(r,{level:d,index:o})}},style:"user-select: none"})}}},function(e,t,n){"use strict";function r(e){n(14)}var a=n(7),i=n(15),o=n(0),s=r,d=o(a.a,i.a,!1,s,"data-v-e7743bdc",null);t.a=d.exports},function(e,t){},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("svg",{attrs:{viewBox:"0 0 120 120",version:"1.1"}},[n("g",{staticClass:"g-circles g-circles--v3",attrs:{id:"circle"}},[n("circle",{attrs:{id:"12",transform:"translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) ",cx:"35",cy:"16.6987298",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"11",transform:"translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) ",cx:"16.6987298",cy:"35",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"10",transform:"translate(10, 60) rotate(-90) translate(-10, -60) ",cx:"10",cy:"60",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"9",transform:"translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) ",cx:"16.6987298",cy:"85",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"8",transform:"translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) ",cx:"35",cy:"103.30127",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"7",cx:"60",cy:"110",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"6",transform:"translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) ",cx:"85",cy:"103.30127",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"5",transform:"translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) ",cx:"103.30127",cy:"85",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"4",transform:"translate(110, 60) rotate(-90) translate(-110, -60) ",cx:"110",cy:"60",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"3",transform:"translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) ",cx:"103.30127",cy:"35",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"2",transform:"translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) ",cx:"85",cy:"16.6987298",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"1",cx:"60",cy:"10",r:"10"}})])])},a=[],i={render:r,staticRenderFns:a};t.a=i},function(e,t,n){"use strict";var r={"before-enter":function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},enter:function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},"after-enter":function(e){e.style.height="",e.style.overflow=e.dataset.oldOverflow},"before-leave":function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave:function(e){0!==e.scrollHeight&&(e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},"after-leave":function(e){e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};t.a={name:"CollapseTransition",functional:!0,render:function(e,t){var n=t.children;return e("transition",{on:r},n)}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.itemVisible?n("li",{class:e.liClass},[n("div",{staticClass:"tree-node-el",attrs:{draggable:e.draggable},on:{dragstart:function(t){e.drag(e.item,t)}}},[e.showExpand?n("span",{staticClass:"tree-expand",class:e.item.expanded?"tree-open":"tree-close",on:{click:function(t){e.expandNode(e.item)}}}):e._e(),e._v(" "),e.multiple&&!e.item.nocheck?n("span",{class:[e.item.checked?e.item.halfcheck?"box-halfchecked":"box-checked":"box-unchecked","inputCheck"]},[e.multiple?n("input",{class:["check",e.item.chkDisabled?"chkDisabled":""],attrs:{disabled:e.item.chkDisabled,type:"checkbox"},domProps:{checked:e.item.checked},on:{change:function(t){e.changeNodeCheckStatus(e.item,t)}}}):e._e()]):e._e(),e._v(" "),e.item.loading&&e.item.expanded?n("loading"):e._e(),e._v(" "),n("Render",{attrs:{node:e.item,parent:e.parent,index:e.index,tpl:e.tpl,nodeMouseOver:e.nodeMouseOver,level:e.level}})],1),e._v(" "),e.showNextUl?[n("collapse-transition",[n("TreeUl",{directives:[{name:"show",rawName:"v-show",value:e.item.expanded,expression:"item.expanded"}],attrs:{dragAfterExpanded:e.dragAfterExpanded,draggable:e.draggable,tpl:e.tpl,data:e.item.children,halfcheck:e.halfcheck,scoped:e.scoped,parent:e.item,canDeleteRoot:e.canDeleteRoot,multiple:e.multiple,level:e.level,maxLevel:e.maxLevel,topMustExpand:e.topMustExpand,allowGetParentNode:e.allowGetParentNode}})],1)]:e._e()],2):e._e()},a=[],i={render:r,staticRenderFns:a};t.a=i},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",{staticClass:"halo-tree"},e._l(e.data,function(t,r){return n("treeLi",e._b({key:t.id?t.id:r,attrs:{item:t,index:r},nativeOn:{drop:function(n){n.stopPropagation(),e.drop(t,n)},dragover:function(t){return t.stopPropagation(),e.dragover(t)}}},"treeLi",e.childBind,!1))}))},a=[],i={render:r,staticRenderFns:a};t.a=i},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;return(e._self._c||t)("TreeUl",e._b({},"TreeUl",e.childBind,!1))},a=[],i={render:r,staticRenderFns:a};t.a=i},function(e,t,n){"use strict";function r(e){n(21)}var a=n(8),i=n(22),o=n(0),s=r,d=o(a.a,i.a,!1,s,null,null);t.a=d.exports},function(e,t){},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tree-container"},[n("div",{staticClass:"tag-box-container"},[n("div",{ref:"txtbox",staticClass:"tag-box",on:{click:function(t){e.open=!e.open},mouseleave:e.leaveTextTag}},[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.selectedItems.length,expression:"!selectedItems.length"}],staticClass:"tag blank"},[e._v(e._s(e.pleasechoosetext))]),e._v(" "),e._l(e.selectedItems,function(t,r){return n("div",{key:r,ref:"txttag",refInFor:!0,staticClass:"tag",on:{click:function(t){t.stopPropagation(),e.tagClick(t)}}},[e._v("\n "+e._s(t)+"\n "),n("span",{staticClass:"rmNode",on:{click:function(n){n.stopPropagation(),e.rmNode(t)}}},[e._v("x")])])})],2)]),e._v(" "),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.open,expression:"open"}],staticClass:"tree-box"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.searchword,expression:"searchword"},{name:"show",rawName:"v-show",value:e.searchable,expression:"searchable"}],staticClass:"search-input",attrs:{type:"text",placeholder:e.searchtext},domProps:{value:e.searchword},on:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.searchNodes(t):null},input:function(t){t.target.composing||(e.searchword=t.target.value)}}}),e._v(" "),n("v-tree",e._g(e._b({ref:"dropTree",attrs:{data:e.data,dragAfterExpanded:e.dragAfterExpanded,draggable:e.draggable,tpl:e.tpl,multiple:e.multiple},on:{dropTreeNodeChecked:e.nodeCheckStatusChange,"async-load-nodes":e.asyncLoadNodes,"node-expanded":e.asyncLoadNodes,"node-click":e.nodeClick,"node-check":e.nodeClick}},"v-tree",e.vTreeObj,!1),e.$listeners))],1)])],1)},a=[],i={render:r,staticRenderFns:a};t.a=i}])}); 2 | //# sourceMappingURL=v2-tree.js.map -------------------------------------------------------------------------------- /docs/app.5eff19d53f4dd681b9d99313132dfe70.css: -------------------------------------------------------------------------------- 1 | #app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.halo-tree li span:hover{background-color:#dddddde3}.halo-tree .expand-enter-active,.halo-tree .expand-leave-active{transition:all 3s ease;overflow:hidden}svg[data-v-2038c618]{height:14px;width:14px;overflow:visible;line-height:14px}circle[data-v-2038c618]{fill:#1e90ff;fill-opacity:0;animation:opacity-data-v-2038c618 1.2s linear infinite}circle[data-v-2038c618]:nth-child(12n+1){animation-delay:-.1s}circle[data-v-2038c618]:nth-child(12n+2){animation-delay:-.2s}circle[data-v-2038c618]:nth-child(12n+3){animation-delay:-.3s}circle[data-v-2038c618]:nth-child(12n+4){animation-delay:-.4s}circle[data-v-2038c618]:nth-child(12n+5){animation-delay:-.5s}circle[data-v-2038c618]:nth-child(12n+6){animation-delay:-.6s}circle[data-v-2038c618]:nth-child(12n+7){animation-delay:-.7s}circle[data-v-2038c618]:nth-child(12n+8){animation-delay:-.8s}circle[data-v-2038c618]:nth-child(12n+9){animation-delay:-.9s}circle[data-v-2038c618]:nth-child(12n+10){animation-delay:-1s}circle[data-v-2038c618]:nth-child(12n+11){animation-delay:-1.1s}circle[data-v-2038c618]:nth-child(12n+12){animation-delay:-1.2s}.g-circles--v2 circle[data-v-2038c618]{fill-opacity:0;stroke-opacity:0;stroke-width:1;stroke:#9acd32;animation-name:opacity-stroke-data-v-2038c618,colors-data-v-2038c618,colors-stroke-data-v-2038c618,transform-2-data-v-2038c618}.g-circles--v3 circle[data-v-2038c618]{fill-opacity:1;animation-name:opacity-data-v-2038c618,colors-data-v-2038c618}.g-circles--v4 circle[data-v-2038c618]{fill-opacity:1;fill:orange;transform-origin:60px 60px;animation-name:opacity-data-v-2038c618,colors-3-data-v-2038c618,transform-data-v-2038c618}@keyframes opacity-data-v-2038c618{3%{fill-opacity:1}75%{fill-opacity:0}}@keyframes opacity-stroke-data-v-2038c618{10%{stroke-opacity:1}85%{stroke-opacity:0}}@keyframes colors-data-v-2038c618{0%{fill:#9acd32}10%{fill:gold}75%{fill:crimson}}@keyframes colors-stroke-data-v-2038c618{0%{stroke:#9acd32}10%{stroke:gold}75%{stroke:crimson}}@keyframes colors-2-data-v-2038c618{0%{fill:#ff0}50%{fill:red}65%{fill:#ff4500}95%{fill:gold}}@keyframes colors-3-data-v-2038c618{0%{fill:#9acd32}50%{fill:#40e0d0}65%{fill:#ff0}95%{fill:orange}}@keyframes transform-data-v-2038c618{10%{transform:scale(.75)}}@keyframes transform-2-data-v-2038c618{40%{transform:scale(.85)}60%{stroke-width:20}}.tag-box-container,.tree-container{position:relative;width:100%;height:40px}.tag-box{height:40px}.ding{position:absolute;z-index:3;right:12px;top:-15px;height:16px;width:16px;border-radius:50% 50% 50% 0;text-indent:-1px;font-size:10px;background:rgba(255,0,0,.5);color:#fff;cursor:default}.search-input{height:40px;margin:10px auto 0}.tag{height:30px;padding:0 25px 0 10px;line-height:30px}.blank,.tag{background-color:#fff}.rmNode{line-height:13px;border:1px solid #ccc;background-color:#494949;color:#fff}.halo-tree li span:hover{background-color:transparent}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.halo-tree .expand-enter-active{height:50px}.halo-tree .expand-enter-active,.halo-tree .expand-leave-active{transition:all 3s ease;overflow:hidden}.halo-tree .expand-leave-active{height:0}.halo-tree .expand-enter,.halo-tree .expand-leave{height:0;opacity:0}.halo-tree{font-size:14px;transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.halo-tree ul{box-sizing:border-box}.halo-tree li,.halo-tree ul{list-style-type:none;text-align:left}.halo-tree .inputCheck{display:inline-block;position:relative;width:14px;height:14px;border:1px solid #888;border-radius:2px;top:4px;text-align:center;font-size:14px;line-height:14px}.halo-tree .inputCheck.notAllNodes:before{content:"\2713";display:block;position:absolute;width:100%;height:100%;background-color:#888;z-index:1;color:#fff}.halo-tree .inputCheck.box-checked:after{content:"\2713";display:block;position:absolute;z-index:1;width:100%;text-align:center}.halo-tree .box-halfchecked{background-color:#888}.halo-tree .box-halfchecked:after{content:"\2713";display:block;position:absolute;z-index:1;width:100%;text-align:center;color:#fff}.halo-tree .check{display:block;position:absolute;font-size:14px;width:16px;height:16px;left:-5px;top:-4px;border:1px solid #000;opacity:0;cursor:pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);z-index:2}.halo-tree .chkDisabled{background-color:#f5f5f5;opacity:1;cursor:not-allowed}.halo-tree li{margin:0;padding:5px 5px 5px 15px;position:relative;list-style:none}.halo-tree li:after,.halo-tree li:before{content:"";left:-8px;position:absolute;right:auto;border-width:1px}.halo-tree li:before{border-left:1px dashed #999;bottom:50px;height:100%;top:-8px;width:1px}.halo-tree li:after{border-top:1px dashed #999;height:20px;top:17px;width:28px}.halo-tree li:last-child:before{height:26px}.halo-tree>li.first-node:before{top:17px}.halo-tree>li.second-node:before{top:4px}.halo-tree>li.first-node.only-node:before{border-left:none}.halo-tree>li.only-node:after{border-top:none}.halo-tree>ul{padding-left:0}.halo-tree ul{padding-left:17px;padding-top:10px}.halo-tree .tree-close,.halo-tree .tree-open{display:inline-block;width:14px;height:14px;text-align:center;line-height:13px;border:1px solid #888;border-radius:2px;background:#fff}.halo-tree .tree-open{line-height:13px}.halo-tree .tree-close:after{content:"+";font-style:normal}.halo-tree .tree-open:after{content:"\2013";font-style:normal}.halo-tree .tree-node-el{background-color:#fff;padding-left:2px;position:relative;z-index:3}.halo-tree li.leaf{padding-left:15px}.halo-tree li.leaf:after{content:"";left:-7px;position:absolute;right:auto;border-width:1px;border-top:1px dashed #999;height:20px;top:17px;width:25px}.halo-tree-search-box{height:18px;line-height:18px;outline:none;border:1px solid #888;border-radius:3px}.halo-tree-search-box:focus{border:1px solid #108ee9;box-shadow:0 2px 2px rgba(16,142,233,.2);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.halo-tree .node-title{padding:3px;border-radius:3px;cursor:pointer;margin:0 2px}.halo-tree .node-title:hover{background-color:#ccc}.halo-tree .node-selected{border:1px solid #ddd;background-color:#ddd}.halo-tree .node-title.node-searched{border:1px solid #ff8247}svg[data-v-2987f7ac]{height:14px;width:14px;overflow:visible;line-height:14px}circle[data-v-2987f7ac]{fill:#1e90ff;fill-opacity:0;animation:opacity-data-v-2987f7ac 1.2s linear infinite}circle[data-v-2987f7ac]:nth-child(12n+1){animation-delay:-.1s}circle[data-v-2987f7ac]:nth-child(12n+2){animation-delay:-.2s}circle[data-v-2987f7ac]:nth-child(12n+3){animation-delay:-.3s}circle[data-v-2987f7ac]:nth-child(12n+4){animation-delay:-.4s}circle[data-v-2987f7ac]:nth-child(12n+5){animation-delay:-.5s}circle[data-v-2987f7ac]:nth-child(12n+6){animation-delay:-.6s}circle[data-v-2987f7ac]:nth-child(12n+7){animation-delay:-.7s}circle[data-v-2987f7ac]:nth-child(12n+8){animation-delay:-.8s}circle[data-v-2987f7ac]:nth-child(12n+9){animation-delay:-.9s}circle[data-v-2987f7ac]:nth-child(12n+10){animation-delay:-1s}circle[data-v-2987f7ac]:nth-child(12n+11){animation-delay:-1.1s}circle[data-v-2987f7ac]:nth-child(12n+12){animation-delay:-1.2s}.g-circles--v2 circle[data-v-2987f7ac]{fill-opacity:0;stroke-opacity:0;stroke-width:1;stroke:#9acd32;animation-name:opacity-stroke-data-v-2987f7ac,colors-data-v-2987f7ac,colors-stroke-data-v-2987f7ac,transform-2-data-v-2987f7ac}.g-circles--v3 circle[data-v-2987f7ac]{fill-opacity:1;animation-name:opacity-data-v-2987f7ac,colors-data-v-2987f7ac}.g-circles--v4 circle[data-v-2987f7ac]{fill-opacity:1;fill:orange;transform-origin:60px 60px;animation-name:opacity-data-v-2987f7ac,colors-3-data-v-2987f7ac,transform-data-v-2987f7ac}@keyframes opacity-data-v-2987f7ac{3%{fill-opacity:1}75%{fill-opacity:0}}@keyframes opacity-stroke-data-v-2987f7ac{10%{stroke-opacity:1}85%{stroke-opacity:0}}@keyframes colors-data-v-2987f7ac{0%{fill:#9acd32}10%{fill:gold}75%{fill:crimson}}@keyframes colors-stroke-data-v-2987f7ac{0%{stroke:#9acd32}10%{stroke:gold}75%{stroke:crimson}}@keyframes colors-2-data-v-2987f7ac{0%{fill:#ff0}50%{fill:red}65%{fill:#ff4500}95%{fill:gold}}@keyframes colors-3-data-v-2987f7ac{0%{fill:#9acd32}50%{fill:#40e0d0}65%{fill:#ff0}95%{fill:orange}}@keyframes transform-data-v-2987f7ac{10%{transform:scale(.75)}}@keyframes transform-2-data-v-2987f7ac{40%{transform:scale(.85)}60%{stroke-width:20}}.tree-container{position:relative;width:90%;height:36px;border:1px solid #ccc;border-radius:6px}.tag-box-container{position:relative;width:100%;height:36px;overflow:hidden}.tag-box{width:2000%;height:36px}.tree-box{margin-top:3px;border-radius:6px;border:1px solid #ccc;box-shadow:0 0 5px rgba(0,0,0,.4)}.tree-box ul{margin-left:0;-webkit-padding-start:10px}.search-input{width:96%;height:30px;box-sizing:border-box;margin:5px auto 0;font-size:14px;text-indent:1em;outline:none}.search-input,.tag{border:1px solid #ccc;border-radius:6px}.tag{float:left;position:relative;min-width:50px;height:26px;margin:4px;padding:0 10px;line-height:26px;text-align:center;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;transition:padding .3s}.tag .rmNode{display:none}.tag:hover{padding-right:25px}.tag:hover>.rmNode{display:block!important}.blank{background-color:#fff;border:0}.rmNode{position:absolute;right:5px;top:5px;width:15px;height:15px;line-height:15px;font-size:12px;background-color:#b3b3b3;color:#ececec;border-radius:50%;cursor:pointer}.fade-enter-active,.fade-leave-active{transition:opacity .5s,transform .5s}.fade-enter,.fade-leave-active{opacity:0;transform:translateY(-10px)} -------------------------------------------------------------------------------- /docs/app.8764e0e73d92f21a8726.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([2],{"+6b9":function(e,t,n){"use strict";var a=n("Xxa5"),r=n.n(a),o=n("exGp"),i=n.n(o),s=n("Zx67"),c=n.n(s),d=n("Zrlr"),l=n.n(d),u=n("wxAW"),h=n.n(u),f=n("zwoO"),p=n.n(f),v=n("Pf15"),g=n.n(v),m=n("eL7n"),y=function(e){function t(){return l()(this,t),p()(this,(t.__proto__||c()(t)).apply(this,arguments))}return g()(t,e),h()(t,[{key:"getChild",value:function(){function e(){return t.apply(this,arguments)}var t=i()(r.a.mark(function e(){var t;return r.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.get(this.demo.test);case 2:return t=e.sent,e.abrupt("return",t);case 4:case"end":return e.stop()}},e,this)}));return e}()}]),t}(m.a);t.a=new y},"/KZR":function(e,t,n){"use strict";function a(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})}function r(e,t){window.treeDrag={},window.treeDrag[e]=t}function o(e){return window.treeDrag[e]}function i(e,t){if(e.hasOwnProperty("children")&&e.children){var n=!0,a=!1,r=void 0;try{for(var o,s=c()(e.children);!(n=(o=s.next()).done);n=!0){var d=o.value;if(d===t)return!0;if(d.children)return i(d,t)}}catch(e){a=!0,r=e}finally{try{!n&&s.return&&s.return()}finally{if(a)throw r}}return!1}}var s=n("BO1k"),c=n.n(s);t.a={methods:{guid:a,setDragNode:r,getDragNode:o,hasInGenerations:i}}},"0JLP":function(e,t,n){"use strict";t.a={name:"tree-load-svg"}},"0yIN":function(e,t,n){"use strict";var a={"before-enter":function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},enter:function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},"after-enter":function(e){e.style.height="",e.style.overflow=e.dataset.oldOverflow},"before-leave":function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave:function(e){0!==e.scrollHeight&&(e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},"after-leave":function(e){e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};t.a={name:"CollapseTransition",functional:!0,render:function(e,t){var n=t.children;return e("transition",{on:a},n)}}},"3d7f":function(e,t,n){"use strict";var a=n("huAg"),r=[];r=r.concat(a.a),t.a=r},CYjI:function(e,t,n){"use strict";var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("router-view")],1)},r=[],o={render:a,staticRenderFns:r};t.a=o},DShT:function(e,t,n){"use strict";var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("svg",{attrs:{viewBox:"0 0 120 120",version:"1.1"}},[n("g",{staticClass:"g-circles g-circles--v3",attrs:{id:"circle"}},[n("circle",{attrs:{id:"12",transform:"translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) ",cx:"35",cy:"16.6987298",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"11",transform:"translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) ",cx:"16.6987298",cy:"35",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"10",transform:"translate(10, 60) rotate(-90) translate(-10, -60) ",cx:"10",cy:"60",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"9",transform:"translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) ",cx:"16.6987298",cy:"85",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"8",transform:"translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) ",cx:"35",cy:"103.30127",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"7",cx:"60",cy:"110",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"6",transform:"translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) ",cx:"85",cy:"103.30127",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"5",transform:"translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) ",cx:"103.30127",cy:"85",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"4",transform:"translate(110, 60) rotate(-90) translate(-110, -60) ",cx:"110",cy:"60",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"3",transform:"translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) ",cx:"103.30127",cy:"35",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"2",transform:"translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) ",cx:"85",cy:"16.6987298",r:"10"}}),e._v(" "),n("circle",{attrs:{id:"1",cx:"60",cy:"10",r:"10"}})])])},r=[],o={render:a,staticRenderFns:r};t.a=o},"Du/2":function(e,t,n){"use strict";n.d(t,"a",function(){return a});var a="CHANGE_CODE"},IcnI:function(e,t,n){"use strict";var a=n("7+uW"),r=n("NYxO"),o=n("uvKM");a.a.use(r.a);var i={},s={},c={},d={};t.a=new r.a.Store({modules:{test:o.a},state:i,getters:d,actions:c,mutations:s})},JQ4Z:function(e,t){},KgXo:function(e,t,n){"use strict";function a(e){n("JQ4Z")}var r=n("0JLP"),o=n("DShT"),i=n("VU/8"),s=a,c=i(r.a,o.a,!1,s,"data-v-2987f7ac",null);t.a=c.exports},LLdp:function(e,t){},LmM6:function(e,t,n){"use strict";t.a={install:function(e,t){e.directive("img",{inserted:function(e,t){var n=Math.floor(1e6*Math.random());e.style.backgroundColor="#"+n;var a=new Image;a.src=t.value,a.onload=function(){var n=t.value;e.style.backgroundImage="url("+n+")"}}}),e.directive("drag",{inserted:function(e,t){e.style.cursor=t.value&&t.value.cursor?t.value.cursor:"default";var n=t.value&&t.value.moveElId?document.getElementById(t.value.moveElId):e;n.style.position="absolute","static"===getComputedStyle(n.parentNode,null).position&&(n.parentNode.style.position="relative");var a=function(a){if(t.modifiers.shaow){var r=n.cloneNode(!0);n.style.opacity="0.5",n.parentNode.appendChild(r)}var o,i;t.modifiers.dragY||(o=a.clientX-n.offsetLeft),t.modifiers.dragX||(i=a.clientY-n.offsetTop);var s=function(a){a.preventDefault();var r=a.clientX-o,s=a.clientY-i,c=t.value&&t.value.dragOutX?n.offsetWidth-t.value.dragOutX:0;if(t.value&&t.value.dragOutY)var d=n.offsetHeight-t.value.dragOutY,l=e.offsetHeight-t.value.dragOutY;else d=0,l=0;r<0-c?r=0-c:r>n.parentNode.clientWidth-n.offsetWidth+c&&(r=n.parentNode.clientWidth-n.offsetWidth+c),s<0-l?s=0-l:s>n.parentNode.clientHeight-n.offsetHeight+d&&(s=n.parentNode.clientHeight-n.offsetHeight+d),n.style.left=r+"px",n.style.top=s+"px",t.value&&t.value.ondrag&&("function"!=typeof t.value.ondrag&&console.error("ondrag: should be a function"),t.value.ondrag(a,{left:r,top:s}))};document.addEventListener("mousemove",s);var c=function e(){r&&(n.style.opacity="1",r.parentNode.removeChild(r)),document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",e)};document.addEventListener("mouseup",c)};e.addEventListener("mousedown",a)}})}}},M93x:function(e,t,n){"use strict";function a(e){n("NGHB")}var r=n("xJD8"),o=n("CYjI"),i=n("VU/8"),s=a,c=i(r.a,o.a,!1,s,null,null);t.a=c.exports},Mwdv:function(e,t,n){"use strict";var a=n("7+uW"),r=new a.a,o={on:function(e,t){if(arguments.length>2&&void 0!==arguments[2]&&arguments[2])return r.$once(e,t),!1;r.$on(e,t)},emit:function(e,t){r.$emit(e,t)}};t.a=o},MxmB:function(e,t){},NGHB:function(e,t){},NHnr:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=n("7+uW"),r=n("M93x"),o=n("/ocq"),i=n("3d7f"),s=n("iT5x"),c=n("LmM6"),d=n("IcnI"),l=n("Mwdv"),u=n("rifk"),h=n.n(u),f=n("TXmL"),p=n("o7eJ"),v=n("ug9+"),g=(n.n(v),n("bGai"));a.a.use(c.a),a.a.use(o.a),a.a.use(h.a,{dialog:!0}),a.a.use(f.a),a.a.use(g.b),a.a.use(g.a);var m=new o.a({routes:i.a,mode:"history"}),y=new f.a({locale:"zh",messages:p.a});a.a.prototype.$api=s.a,a.a.prototype.$eventbus=l.a,a.a.config.productionTip=!1,new a.a({el:"#app",store:d.a,i18n:y,router:m,template:"",components:{App:r.a}})},Z5mG:function(e,t){e.exports={test:{title:"This page can be deleted in the actual development, this example is used to manage page status using vuex demo",currentcode:"Current Code",precode:"Previous Code",changecode:"Change Code",simplealert:"Simple Alert",alerttitle:"Alert Title",ok:"OK",close:"Close",welcome:"Welcome to VBP"}}},aXgP:function(e,t,n){"use strict";function a(e){n("LLdp")}var r=n("vpAk"),o=n("z3eH"),i=n("VU/8"),s=a,c=i(r.a,o.a,!1,s,null,null);t.a=c.exports},abZJ:function(e,t){e.exports={test:{title:"该页面在实际开发可以删除，本例用于使用vuex管理页面状态的演示",currentcode:"当前编码",precode:"之前编码",changecode:"改编编码",simplealert:"简单弹框",alerttitle:"弹框标题",ok:"确认",close:"关闭",welcome:"欢迎使用VBP"}}},bGai:function(e,t,n){"use strict";var a=n("zAgK"),r=n("aXgP");n.d(t,"b",function(){return a.a}),n.d(t,"a",function(){return r.a}),a.a.install=function(e){e.component("VTree",a.a)},r.a.install=function(e){e.component("VSelectTree",r.a)};a.a},eL7n:function(e,t,n){"use strict";var a=n("//Fk"),r=n.n(a),o=n("C4MV"),i=n.n(o),s=n("fZjL"),c=n.n(s),d=n("Zrlr"),l=n.n(d),u=n("wxAW"),h=n.n(u),f=n("mtWM"),p=n.n(f),v=n("f8nr"),g=n("vbRY"),m=function(){function e(){var t=this;l()(this,e),p.a.defaults.timeout=5e3,p.a.defaults.headers.post["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8",p.a.defaults.baseURL=v.a.baseURL,this._req=g,c()(this._req).forEach(function(e){return t._proxy(e)})}return h()(e,[{key:"_proxy",value:function(e){var t=this;i()(t,e,{configurable:!1,enumerable:!0,get:function(){return t._req[e]},set:function(n){t.data[e]=n}})}},{key:"get",value:function(e,t){return new r.a(function(n,a){p.a.get(e,{params:t}).then(function(e){n(e.data)},function(e){a(e)}).catch(function(e){a(e)})})}},{key:"post",value:function(e,t){return new r.a(function(n,a){p.a.post(e,t).then(function(e){n(e.data)},function(e){a(e)}).catch(function(e){a(e)})})}}]),e}();t.a=m},f8nr:function(e,t,n){"use strict";var a={};a.init={baseURL:""},t.a=a},huAg:function(e,t,n){"use strict";var a=[{path:"/",component:function(){return n.e(0).then(n.bind(null,"P1yf"))}}];t.a=a},iT5x:function(e,t,n){"use strict";n.d(t,"a",function(){return r});var a=n("+6b9"),r={demo:a.a}},iYQh:function(e,t,n){"use strict";var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",{staticClass:"halo-tree"},e._l(e.data,function(t,a){return n("li",{directives:[{name:"show",rawName:"v-show",value:!t.hasOwnProperty("visible")||t.visible,expression:"item.hasOwnProperty('visible') ? item.visible : true"}],key:t.id?t.id:t.title,class:{leaf:e.isLeaf(t),"first-node":!e.parent&&0===a,"only-node":!e.parent&&1===e.data.length,"second-node":!e.parent&&1===a},on:{drop:function(n){e.drop(t,n)},dragover:function(t){e.dragover(t)}}},[n("div",{staticClass:"tree-node-el",attrs:{draggable:e.draggable},on:{dragstart:function(n){e.drag(t,n)}}},[!t.parent||t.children&&t.children.length>0||t.async?n("span",{class:t.expanded?"tree-open":"tree-close",on:{click:function(n){e.expandNode(t)}}}):e._e(),e._v(" "),e.multiple&&!t.nocheck?n("span",{class:[t.checked?t.halfcheck?"box-halfchecked":"box-checked":"box-unchecked","inputCheck"]},[e.multiple?n("input",{directives:[{name:"model",rawName:"v-model",value:t.checked,expression:"item.checked"}],class:["check",t.chkDisabled?"chkDisabled":""],attrs:{disabled:t.chkDisabled,type:"checkbox"},domProps:{checked:Array.isArray(t.checked)?e._i(t.checked,null)>-1:t.checked},on:{change:[function(n){var a=t.checked,r=n.target,o=!!r.checked;if(Array.isArray(a)){var i=e._i(a,null);r.checked?i<0&&e.$set(t,"checked",a.concat([null])):i>-1&&e.$set(t,"checked",a.slice(0,i).concat(a.slice(i+1)))}else e.$set(t,"checked",o)},function(n){e.changeNodeCheckStatus(t,n)}]}}):e._e()]):e._e(),e._v(" "),t.loading&&t.expanded?n("loading"):e._e(),e._v(" "),n("Render",{attrs:{node:t,tpl:e.tpl}})],1),e._v(" "),n("collapse-transition",[e.isLeaf(t)?e._e():n("tree",{directives:[{name:"show",rawName:"v-show",value:t.expanded,expression:"item.expanded"}],attrs:{dragAfterExpanded:e.dragAfterExpanded,draggable:e.draggable,tpl:e.tpl,data:t.children,halfcheck:e.halfcheck,scoped:e.scoped,parent:t,canDeleteRoot:e.canDeleteRoot,multiple:e.multiple},on:{dropTreeNodeChecked:e.nodeCheckStatusChange,"async-load-nodes":e.asyncLoadNodes,"node-click":e.nodeClick,"node-single-check":e.nodeCheck,"drag-node-end":e.dragNodeEnd}})],1)],1)}))},r=[],o={render:a,staticRenderFns:r};t.a=o},o7eJ:function(e,t,n){"use strict";var a=n("Z5mG"),r=n.n(a),o=n("abZJ"),i=n.n(o),s={en:r.a,zh:i.a};t.a=s},p8GI:function(e,t,n){"use strict";t.a={name:"render",functional:!0,props:{node:Object,tpl:Function},render:function(e,t){var n=t.props.node.selected?"node-title node-selected":"node-title";return t.props.node.searched&&(n+=" node-searched"),t.props.tpl?t.props.tpl(t.props.node,t):e("span",{domProps:{innerHTML:t.props.node.title},attrs:{title:t.props.node.title},class:n,on:{mouseover:function(){return t.parent.nodeMouseOver(t.props.node)},click:function(){return t.parent.nodeSelected(t.props.node)}},style:"user-select: none"})}}},"ug9+":function(e,t){},uvKM:function(e,t,n){"use strict";var a=n("bOdI"),r=n.n(a),o=n("Du/2"),i={code:"000000",oldcode:""},s={precode:function(e){return e.oldcode?e.oldcode:"--------"}},c=r()({},o.a,function(e){e.oldcode=e.code,e.code=Math.ceil(1e5*Math.random())}),d={changeCode:function(e){(0,e.commit)(o.a)}};t.a={namespaced:!0,state:i,getters:s,mutations:c,actions:d}},vbRY:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"demo",function(){return a});var a={test:"/static/data.json"}},vpAk:function(e,t,n){"use strict";var a=n("BO1k"),r=n.n(a),o=n("zAgK");t.a={name:"selectTree",model:{event:"value-change"},data:function(){return{searchword:"",open:!1,selectedItems:[]}},watch:{selectedItems:function(e,t){this.$emit("value-change",this.selectedItems)}},mounted:function(){this.selectedItems=this.value,this.initTreeStatus()},props:{value:{type:Array,default:[]},searchable:{type:Boolean,default:!0},pleasechoosetext:{type:String,default:"please choose..."},serchtext:{type:String,default:"search..."},data:{type:Array,default:function(){return[]}},parent:{type:Object,default:function(){return null}},multiple:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},dragAfterExpanded:{type:Boolean,default:!0},halfcheck:{type:Boolean,default:!1},scoped:{type:Boolean,default:!1},tpl:Function,searchFilter:Function},methods:{asyncLoadNodes:function(e){e.async&&!e.children&&this.$emit("async-load-nodes",e)},dragNodeEnd:function(e){this.$emit("drag-node-end",e)},nodeClick:function(e){e.selected&&(this.$set(e,"selected",!0),this.$set(e,"checked",!0)),this.multiple||(this.selectedItems=[]),e.selected&&-1===this.selectedItems.findIndex(function(t){return t===e.title})&&this.selectedItems.push(e.title),e.selected||this.rmNode(e.title,!0),this.$emit("node-click",e)},rmNode:function(e,t){if(!t){var n=this.$refs.dropTree.getCheckedNodes(!0).find(function(t){return t.title===e});this.$set(n,"selected",!1),this.$set(n,"checked",!1)}var a=this.selectedItems.findIndex(function(t){return t===e});this.selectedItems.splice(a,1)},nodeCheckStatusChange:function(e,t){var n=this.$refs.dropTree.getCheckedNodes(!0);n||(this.selectedItems=[]),this.selectedItems=[];var a=!0,o=!1,i=void 0;try{for(var s,c=r()(n);!(a=(s=c.next()).done);a=!0){var d=s.value;this.selectedItems.push(d.title)}}catch(e){o=!0,i=e}finally{try{!a&&c.return&&c.return()}finally{if(o)throw i}}},searchNodes:function(){var e=this,t=function(t){return t.title.indexOf(e.searchword)>-1};this.searchFilter&&(t=this.searchFilter),this.$refs.dropTree.searchNodes(t)},tagClick:function(e){var t=e.target.offsetLeft-5;this.$refs.txtbox.style.transition="transform .3s linear",this.$refs.txtbox.style.transform="translateX(-"+t+"px)"},leaveTextTag:function(){this.$refs.txtbox.style.transition="transform 0.4s",this.$refs.txtbox.style.transform="translateX(0)"},initTreeStatus:function(e){var t=this;e=e||this.data;var n=!0,a=!1,o=void 0;try{for(var i,s=r()(e);!(n=(i=s.next()).done);n=!0){var c=i.value;!function(e){t.value.findIndex(function(t){return t===e.title})>-1&&(t.$set(e,"selected",!0),t.$set(e,"checked",!0)),e.children&&e.children.length&&t.initTreeStatus(e.children)}(c)}}catch(e){a=!0,o=e}finally{try{!n&&s.return&&s.return()}finally{if(a)throw o}}}},components:{VTree:o.a}}},xJD8:function(e,t,n){"use strict";t.a={name:"app"}},yeKN:function(e,t,n){"use strict";var a=n("woOf"),r=n.n(a),o=n("W3Iv"),i=n.n(o),s=n("d7EF"),c=n.n(s),d=n("pFYg"),l=n.n(d),u=n("BO1k"),h=n.n(u),f=n("/KZR"),p=n("p8GI"),v=n("KgXo"),g=n("0yIN");t.a={name:"Tree",mixins:[f.a],props:{data:{type:Array,default:function(){return[]}},parent:{type:Object,default:function(){return null}},multiple:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},dragAfterExpanded:{type:Boolean,default:!0},halfcheck:{type:Boolean,default:!1},scoped:{type:Boolean,default:!1},canDeleteRoot:{type:Boolean,default:!1},tpl:Function},components:{Render:p.a,Loading:v.a,CollapseTransition:g.a},watch:{data:function(){this.initHandle()}},mounted:function(){var e=this;this.$on("childChecked",function(t,n){if(t.children&&t.children.length){var a=!0,r=!1,o=void 0;try{for(var i,s=h()(t.children);!(a=(i=s.next()).done);a=!0){var c=i.value;e.$set(c,"checked",n),e.$emit("node-check",c,n)}}catch(e){r=!0,o=e}finally{try{!a&&s.return&&s.return()}finally{if(r)throw o}}}}),this.$on("parentChecked",function(t,n){if(e.$set(t,"checked",n),!t.parent)return!1;var a=t.parent.children.some(function(e){return e.checked}),r=t.parent.children.every(function(e){return e.checked});if(e.halfcheck){if(r?e.$set(t.parent,"halfcheck",!1):a?e.$set(t.parent,"halfcheck",!0):e.$set(t.parent,"halfcheck",!1),!n&&a)return e.$set(t.parent,"halfcheck",!0),!1;e.$emit("parentChecked",t.parent,n)}else n&&r&&e.$emit("parentChecked",t.parent,n),n||e.$emit("parentChecked",t.parent,n)}),this.$on("node-check",function(t,n){e.scoped?e.$set(t,"checked",n):(e.$emit("parentChecked",t,n),e.$emit("childChecked",t,n)),e.$emit("dropTreeNodeChecked",t,n)}),this.$on("toggleshow",function(t,n){e.$set(t,"visible",n),n&&t.parent&&e.$emit("toggleshow",t.parent,n)}),this.$on("cancelSelected",function(e){var t=!0,n=!1,a=void 0;try{for(var r,o=h()(e.$children);!(t=(r=o.next()).done);t=!0){var i=r.value,s=!0,c=!1,d=void 0;try{for(var l,u=h()(i.data);!(s=(l=u.next()).done);s=!0){var f=l.value;i.$set(f,"selected",!1)}}catch(e){c=!0,d=e}finally{try{!s&&u.return&&u.return()}finally{if(c)throw d}}i.$children&&i.$emit("cancelSelected",i)}}catch(e){n=!0,a=e}finally{try{!t&&o.return&&o.return()}finally{if(n)throw a}}}),this.initHandle()},methods:{drop:function(e,t){t.preventDefault(),t.stopPropagation();var n=t.dataTransfer.getData("guid"),a=this.getDragNode(n);if(a.parent===e||null===a.parent||a===e)return!1;if(this.hasInGenerations(a,e))return!1;var r=a.parent.children;e.children&&-1===e.children.indexOf(a)?(e.children.push(a),r.splice(r.indexOf(a),1)):(this.$set(e,"children",[a]),r.splice(r.indexOf(a),1)),this.$set(e,"expanded",this.dragAfterExpanded),this.$emit("drag-node-end",{dragNode:a,targetNode:e})},drag:function(e,t){var n=this.guid();this.setDragNode(n,e),t.dataTransfer.setData("guid",n)},dragover:function(e){e.preventDefault(),e.stopPropagation()},initHandle:function(){var e=!0,t=!1,n=void 0;try{for(var a,r=h()(this.data);!(e=(a=r.next()).done);e=!0){var o=a.value;this.$set(o,"parent",this.parent)}}catch(e){t=!0,n=e}finally{try{!e&&r.return&&r.return()}finally{if(t)throw n}}},expandNode:function(e){this.$set(e,"expanded",!e.expanded),e.async&&!e.children&&this.$emit("async-load-nodes",e)},asyncLoadNodes:function(e){e.async&&!e.children&&this.$emit("async-load-nodes",e)},isLeaf:function(e){return!(e.children&&e.children.length)&&e.parent},addNode:function(e,t){var n=null;if(this.$set(e,"expanded",!0),void 0===t)throw new ReferenceError("newNode is required but undefined");if("string"==typeof t&&(n={title:t}),"object"===(void 0===t?"undefined":l()(t))&&!t.hasOwnProperty("title"))throw new ReferenceError("the title property is missed");"object"===(void 0===t?"undefined":l()(t))&&t.hasOwnProperty("title")&&(n=t),this.isLeaf(e)?(this.$set(e,"children",[]),e.children.push(n)):e.children.push(n),this.$emit("addNode",{parentNode:e,newNode:t})},addNodes:function(e,t){var n=!0,a=!1,r=void 0;try{for(var o,i=h()(t);!(n=(o=i.next()).done);n=!0){var s=o.value;this.addNode(e,s)}}catch(e){a=!0,r=e}finally{try{!n&&i.return&&i.return()}finally{if(a)throw r}}},nodeClick:function(e){this.$emit("node-click",e)},nodeCheck:function(e,t){this.$emit("node-check",e,t)},nodeCheckStatusChange:function(e,t){this.$emit("dropTreeNodeChecked",e,t)},nodeMouseOver:function(e){this.$emit("node-mouse-over",e)},dragNodeEnd:function(e){this.$emit("drag-node-end",e)},delNode:function(e,t){if(null===e||void 0===e){if(!this.canDeleteRoot)throw new ReferenceError("the root element can't deleted!");this.data.splice(0,1)}else e.children.splice(e.children.indexOf(t),1);this.$emit("delNode",{parentNode:e,delNode:t})},changeNodeCheckStatus:function(e,t){this.$emit("node-check",e,t.target.checked),this.$emit("node-single-check",e,t.target.checked)},nodeSelected:function(e){var t=function e(t){return"UL"===t.$parent.$el.nodeName?(t=t.$parent,e(t)):t}(this);if(!this.multiple){var n=!0,a=!1,r=void 0;try{for(var o,i=h()(t.data||[]);!(n=(o=i.next()).done);n=!0){var s=o.value;this.$set(s,"selected",!1)}}catch(e){a=!0,r=e}finally{try{!n&&i.return&&i.return()}finally{if(a)throw r}}this.$emit("cancelSelected",t)}this.multiple&&this.$set(e,"checked",!e.selected),this.$set(e,"selected",!e.selected),this.$emit("node-click",e)},getNodes:function(e,t,n){t=t||this.data;var a=[],o=!0,s=!1,d=void 0;try{for(var l,u=h()(t);!(o=(l=u.next()).done);o=!0){var f=l.value,p=!0,v=!1,g=void 0;try{for(var m,y=h()(i()(e));!(p=(m=y.next()).done);p=!0){var x=m.value,k=c()(x,2),w=k[0],$=k[1];if(f[w]===$)if(n)a.push(f);else{var N=r()({},f);delete N.parent,delete N.children,a.push(N)}}}catch(e){v=!0,g=e}finally{try{!p&&y.return&&y.return()}finally{if(v)throw g}}f.children&&f.children.length&&(a=a.concat(this.getNodes(e,f.children,n)))}}catch(e){s=!0,d=e}finally{try{!o&&u.return&&u.return()}finally{if(s)throw d}}return a},getSelectedNodes:function(e){return this.getNodes({selected:!0},this.data,e)},getCheckedNodes:function(e){return this.getNodes({checked:!0},this.data,e)},searchNodes:function(e,t){t=t||this.data;var n=!0,a=!1,r=void 0;try{for(var o,i=h()(t);!(n=(o=i.next()).done);n=!0){var s=o.value,c=!!e&&("function"==typeof e?e(s):s.title.indexOf(e)>-1);this.$set(s,"searched",c),this.$set(s,"visible",!1),this.$emit("toggleshow",s,!e||c),s.children&&s.children.length&&(c&&this.$set(s,"expanded",!0),this.searchNodes(e,s.children))}}catch(e){a=!0,r=e}finally{try{!n&&i.return&&i.return()}finally{if(a)throw r}}}}}},z3eH:function(e,t,n){"use strict";var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tree-container"},[n("div",{staticClass:"tag-box-container"},[n("div",{ref:"txtbox",staticClass:"tag-box",on:{click:function(t){e.open=!e.open},mouseleave:e.leaveTextTag}},[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.selectedItems.length,expression:"!selectedItems.length"}],staticClass:"tag blank"},[e._v(e._s(e.pleasechoosetext))]),e._v(" "),e._l(e.selectedItems,function(t,a){return n("div",{key:a,ref:"txttag",refInFor:!0,staticClass:"tag",on:{click:function(t){e.tagClick(t)}}},[e._v(e._s(t)+"\n "),n("span",{staticClass:"rmNode",on:{click:function(n){n.stopPropagation(),e.rmNode(t)}}},[e._v("x")])])})],2)]),e._v(" "),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.open,expression:"open"}],staticClass:"tree-box"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.searchword,expression:"searchword"},{name:"show",rawName:"v-show",value:e.searchable,expression:"searchable"}],staticClass:"search-input",attrs:{type:"text",placeholder:e.serchtext},domProps:{value:e.searchword},on:{keyup:function(t){return"button"in t||13===t.keyCode?e.searchNodes(t):null},input:function(t){t.target.composing||(e.searchword=t.target.value)}}}),e._v(" "),n("v-tree",{ref:"dropTree",attrs:{data:e.data,dragAfterExpanded:e.dragAfterExpanded,draggable:e.draggable,tpl:e.tpl,halfcheck:e.halfcheck,scoped:e.scoped,multiple:e.multiple},on:{dropTreeNodeChecked:e.nodeCheckStatusChange,"async-load-nodes":e.asyncLoadNodes,"node-expanded":e.asyncLoadNodes,"node-click":e.nodeClick,"drag-node-end":e.dragNodeEnd}})],1)])],1)},r=[],o={render:a,staticRenderFns:r};t.a=o},zAgK:function(e,t,n){"use strict";function a(e){n("MxmB")}var r=n("yeKN"),o=n("iYQh"),i=n("VU/8"),s=a,c=i(r.a,o.a,!1,s,null,null);t.a=c.exports}},["NHnr"]); 2 | //# sourceMappingURL=app.8764e0e73d92f21a8726.js.map -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | treedemo 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/manifest.c57b3379a0776b06afff.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,l=[];s 2 | 3 | 4 | 5 | v2-tree 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tree-halower", 3 | "description": "This tree and treeSelect component is based on the Vue.js 2.0", 4 | "version": "1.8.2", 5 | "author": "halower (youzisoft@qq.com)", 6 | "license": "MIT", 7 | "private": false, 8 | "main": "dist/v2-tree.js", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/halower/vue2-tree" 12 | }, 13 | "scripts": { 14 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 15 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 16 | }, 17 | "dependencies": { 18 | "vue": "^2.4.4" 19 | }, 20 | "browserslist": [ 21 | "> 1%", 22 | "last 2 versions", 23 | "not ie <= 8" 24 | ], 25 | "devDependencies": { 26 | "babel-core": "^6.26.0", 27 | "babel-helper-vue-jsx-merge-props": "^2.0.2", 28 | "babel-loader": "^7.1.2", 29 | "babel-plugin-syntax-jsx": "^6.18.0", 30 | "babel-plugin-transform-vue-jsx": "^3.5.0", 31 | "babel-preset-env": "^1.6.1", 32 | "babel-preset-stage-3": "^6.24.1", 33 | "cross-env": "^5.0.5", 34 | "css-loader": "^0.28.7", 35 | "extract-text-webpack-plugin": "^3.0.2", 36 | "file-loader": "^1.1.4", 37 | "vue-loader": "^13.0.5", 38 | "vue-template-compiler": "^2.4.4", 39 | "webpack": "^3.6.0", 40 | "webpack-dev-server": "^2.9.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /screenshots/selectTree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halower/vue-tree/72edddcdc7540bc1cb995c7c68ff0ba4f9505c43/screenshots/selectTree.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | -------------------------------------------------------------------------------- /src/assets/hello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halower/vue-tree/72edddcdc7540bc1cb995c7c68ff0ba4f9505c43/src/assets/hello.png -------------------------------------------------------------------------------- /src/components/collapse-transition.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | var Transition = { 4 | 'before-enter' (el) { 5 | // _dom.addClass(el, 'wz-animate') 6 | if (!el.dataset) el.dataset = {} 7 | 8 | el.dataset.oldPaddingTop = el.style.paddingTop 9 | el.dataset.oldPaddingBottom = el.style.paddingBottom 10 | 11 | el.style.height = '0' 12 | el.style.paddingTop = 0 13 | el.style.paddingBottom = 0 14 | }, 15 | 'enter' (el) { 16 | el.dataset.oldOverflow = el.style.overflow 17 | if (el.scrollHeight !== 0) { 18 | el.style.height = el.scrollHeight + 'px' 19 | el.style.paddingTop = el.dataset.oldPaddingTop 20 | el.style.paddingBottom = el.dataset.oldPaddingBottom 21 | } else { 22 | el.style.height = '' 23 | el.style.paddingTop = el.dataset.oldPaddingTop 24 | el.style.paddingBottom = el.dataset.oldPaddingBottom 25 | } 26 | el.style.overflow = 'hidden' 27 | }, 28 | 'after-enter' (el) { 29 | // for safari: remove class then reset height is necessary 30 | // _dom.removeClass(el, 'wz-animate') 31 | el.style.height = '' 32 | el.style.overflow = el.dataset.oldOverflow 33 | }, 34 | 'before-leave' (el) { 35 | if (!el.dataset) el.dataset = {} 36 | el.dataset.oldPaddingTop = el.style.paddingTop 37 | el.dataset.oldPaddingBottom = el.style.paddingBottom 38 | el.dataset.oldOverflow = el.style.overflow 39 | 40 | el.style.height = el.scrollHeight + 'px' 41 | el.style.overflow = 'hidden' 42 | }, 43 | 'leave' (el) { 44 | if (el.scrollHeight !== 0) { 45 | // for safari: add class after set height, or it will jump to zero height suddenly, weired 46 | // (0, _dom.addClass)(el, 'wz-animate') 47 | el.style.height = 0 48 | el.style.paddingTop = 0 49 | el.style.paddingBottom = 0 50 | } 51 | }, 52 | 'after-leave' (el) { 53 | // _dom.removeClass(el, 'wz-animate') 54 | el.style.height = '' 55 | el.style.overflow = el.dataset.oldOverflow 56 | el.style.paddingTop = el.dataset.oldPaddingTop 57 | el.style.paddingBottom = el.dataset.oldPaddingBottom 58 | } 59 | } 60 | export default { 61 | name: 'CollapseTransition', 62 | functional: true, 63 | render (h, { children }) { 64 | const data = { 65 | on: Transition 66 | } 67 | return h('transition', data, children) 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import VTree from './tree' 2 | import VSelectTree from './selectTree' 3 | VTree.install = function (Vue) { 4 | Vue.component('VTree', VTree) 5 | } 6 | 7 | VSelectTree.install = function (Vue) { 8 | Vue.component('VSelectTree', VSelectTree) 9 | } 10 | 11 | export { VTree, VSelectTree } 12 | 13 | export default VTree 14 | -------------------------------------------------------------------------------- /src/components/loading.vue: -------------------------------------------------------------------------------- 1 | 19 | 24 | 301 | 302 | 303 | -------------------------------------------------------------------------------- /src/components/mixins.js: -------------------------------------------------------------------------------- 1 | function guid () { 2 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { 3 | let r = Math.random() * 16 | 0 4 | let v = c === 'x' ? r : (r & 0x3 | 0x8) 5 | return v.toString(16) 6 | }) 7 | } 8 | 9 | function setDragNode (guid, node, parent) { 10 | window['treeDrag'] = {} 11 | // window['treeDrag'][guid] = node 12 | window['treeDrag'][guid] = {node, parent} 13 | } 14 | 15 | function getDragNode (guid) { 16 | return window['treeDrag'][guid] 17 | } 18 | 19 | function hasInGenerations (root, node) { 20 | let ret = false 21 | if (root.hasOwnProperty('children') && root.children) { 22 | for (let rn of root.children) { 23 | if (rn === node) return true 24 | if (rn.children) ret |= hasInGenerations(rn, node) 25 | } 26 | } 27 | return ret 28 | } 29 | 30 | export default { 31 | methods: { 32 | guid, 33 | setDragNode, 34 | getDragNode, 35 | hasInGenerations 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/render.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'render', 3 | functional: true, 4 | props: { 5 | node: Object, 6 | parent: null, 7 | tpl: Function, 8 | index: Number, 9 | nodeMouseOver: Function, 10 | level: Number, 11 | }, 12 | render (h, ctx) { 13 | const {node, parent, tpl, index, nodeMouseOver, level} = ctx.props 14 | const {selected, selDisabled = false} = node 15 | let titleClass 16 | if (selDisabled) { 17 | titleClass = 'node-title-disabled' 18 | } else { 19 | titleClass = selected ? 'node-title node-selected' : 'node-title' 20 | } 21 | if (node.searched) titleClass += ' node-searched' 22 | return tpl ? tpl(node, ctx, parent, index, ctx.props) 23 | : nodeMouseOver(node, index, parent)} 25 | style='user-select: none' 26 | onClick={() => { 27 | if (selDisabled) return 28 | ctx.parent.nodeSelected(node, {level, index}) 29 | }}> 30 | 31 | } 32 | } -------------------------------------------------------------------------------- /src/components/selectTree.vue: -------------------------------------------------------------------------------- 1 | 35 | 204 | 304 | -------------------------------------------------------------------------------- /src/components/tree.css: -------------------------------------------------------------------------------- 1 | .halo-tree li span:hover { 2 | background-color: transparent; 3 | /* padding: 6px 0; */ 4 | } 5 | .fade-enter-active, .fade-leave-active { 6 | transition: opacity .2s 7 | } 8 | .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ { 9 | opacity: 0 10 | } 11 | .halo-tree .expand-enter-active { 12 | transition:all 3s ease; 13 | height:50px; 14 | overflow:hidden; 15 | } 16 | .halo-tree .expand-leave-active { 17 | transition:all 3s ease; 18 | height:0px; 19 | overflow:hidden; 20 | } 21 | .halo-tree .expand-enter, .halo-tree .expand-leave { 22 | height:0; 23 | opacity:0; 24 | } 25 | .halo-tree { 26 | font-size:14px; 27 | -webkit-transition: .3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out; 28 | transition: .3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out; 29 | 30 | } 31 | .halo-tree ul { 32 | box-sizing: border-box; 33 | } 34 | .halo-tree ul,.halo-tree li { 35 | list-style-type:none; 36 | text-align:left; 37 | } 38 | .halo-tree .inputCheck { 39 | display:inline-block; 40 | position:relative; 41 | width:14px; 42 | height:14px; 43 | border:1px solid #888888; 44 | border-radius:2px; 45 | top:4px; 46 | text-align:center; 47 | font-size:14px; 48 | line-height:14px; 49 | } 50 | .halo-tree .inputCheck.notAllNodes:before { 51 | content:"\2713"; 52 | display:block; 53 | position:absolute; 54 | width:100%; 55 | height:100%; 56 | background-color:#888888; 57 | z-index:1; 58 | color:#ffffff; 59 | } 60 | .halo-tree .inputCheck.box-checked:after { 61 | content:"\2713"; 62 | display:block; 63 | position:absolute; 64 | z-index:1; 65 | width:100%; 66 | text-align:center; 67 | } 68 | .halo-tree .box-halfchecked { 69 | background-color: #888888; 70 | } 71 | .halo-tree .box-halfchecked:after { 72 | content:"\2713"; 73 | display:block; 74 | position:absolute; 75 | z-index:1; 76 | width:100%; 77 | text-align:center; 78 | color: #FFFFFF; 79 | } 80 | .halo-tree .check{ 81 | display:block; 82 | position:absolute; 83 | font-size:14px; 84 | width:16px; 85 | height:16px; 86 | left:-5px; 87 | top:-4px; 88 | border:1px solid #000000; 89 | opacity:0; 90 | cursor:pointer; 91 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 92 | filter:alpha(opacity=0); 93 | z-index:2; 94 | } 95 | .halo-tree .chkDisabled { 96 | background-color: #F5F5F5; 97 | opacity: 1; 98 | cursor: not-allowed; 99 | } 100 | .halo-tree li { 101 | margin: 0; 102 | padding: 5px 5px 5px 15px; 103 | position: relative; 104 | list-style: none; 105 | } 106 | .halo-tree li:after, 107 | .halo-tree li:before { 108 | content: ''; 109 | left: -8px; 110 | position: absolute; 111 | right: auto; 112 | border-width: 1px 113 | } 114 | .halo-tree li:before { 115 | border-left: 1px dashed #999; 116 | bottom: 50px; 117 | height: 100%; 118 | top: -8px; 119 | width: 1px; 120 | } 121 | .halo-tree li:after { 122 | border-top: 1px dashed #999; 123 | height: 20px; 124 | top: 17px; 125 | width: 28px 126 | } 127 | .halo-tree li:last-child::before { 128 | height: 26px 129 | } 130 | .halo-tree>li.first-node:before { 131 | top: 17px; 132 | } 133 | .halo-tree>li.second-node:before { 134 | top: 4px; 135 | } 136 | .halo-tree>li.first-node.only-node::before { 137 | border-left: none; 138 | } 139 | .halo-tree>li.only-node:after { 140 | border-top: none; 141 | } 142 | .halo-tree > ul { 143 | padding-left: 0 144 | } 145 | .halo-tree ul { 146 | padding-left: 17px; 147 | padding-top: 10px; 148 | } 149 | .halo-tree .tree-expand{ 150 | display: inline-block; 151 | width:14px; 152 | height:14px; 153 | text-align: center; 154 | line-height: 13px; 155 | border: 1px solid #888888; 156 | border-radius: 2px; 157 | background: #FFFFFF; 158 | font-style: normal; 159 | } 160 | .halo-tree .tree-open { 161 | line-height: 13px; 162 | } 163 | .halo-tree .tree-close:after { 164 | content: "+"; 165 | } 166 | .halo-tree .tree-open:after { 167 | content: "\2013"; 168 | } 169 | .halo-tree .tree-empty:after { 170 | content: ""; 171 | } 172 | .halo-tree .tree-node-el { 173 | background-color: #FFFFFF; 174 | padding-left: 2px; 175 | position: relative; 176 | z-index: 3; 177 | } 178 | .halo-tree li.leaf { 179 | padding-left: 15px; 180 | } 181 | .halo-tree li.leaf:after { 182 | content: ''; 183 | left: -7px; 184 | position: absolute; 185 | right: auto; 186 | border-width: 1px; 187 | border-top: 1px dashed #999; 188 | height: 20px; 189 | top: 17px; 190 | width: 25px; 191 | } 192 | /*Dynamic style part*/ 193 | .halo-tree-search-box { 194 | height: 18px; 195 | line-height: 18px; 196 | outline: none; 197 | border: 1px solid #888888; 198 | border-radius: 3px; 199 | } 200 | .halo-tree-search-box:focus { 201 | border: 1px solid rgb(16, 142, 233); 202 | -webkit-box-shadow: 0 2px 2px rgba(16, 142, 233, .2); 203 | box-shadow: 0 2px 2px rgba(16, 142, 233,.2); 204 | -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 205 | -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 206 | transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 207 | } 208 | .halo-tree .node-title { 209 | padding: 3px 3px; 210 | border-radius: 3px; 211 | cursor: pointer; 212 | margin: 0 2px; 213 | } 214 | .halo-tree .node-title:hover{ 215 | background-color: #ccc; 216 | } 217 | .halo-tree .node-title-disabled { 218 | padding: 3px 3px; 219 | border-radius: 3px; 220 | background-color: #F5F5F5; 221 | opacity: 1; 222 | cursor: not-allowed; 223 | margin: 0 2px; 224 | } 225 | .halo-tree .node-title-disabled:hover{ 226 | background-color: #F5F5F5; 227 | } 228 | .halo-tree .node-selected { 229 | border: 1px solid #DDDDDD; 230 | background-color: #DDDDDD; 231 | } 232 | .halo-tree .node-title.node-searched { 233 | border: 1px solid #FF8247; 234 | } -------------------------------------------------------------------------------- /src/components/tree.vue: -------------------------------------------------------------------------------- 1 | 4 | 505 | -------------------------------------------------------------------------------- /src/components/treeLi.vue: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /src/components/treeUl.vue: -------------------------------------------------------------------------------- 1 | 13 | 124 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VTree from './lib' 4 | Vue.use(VTree) 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | module.exports = { 5 | entry: './src/components/index.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'v2-tree.js', 10 | library: 'VTree', 11 | libraryTarget: 'umd', 12 | umdNamedDefine: true 13 | }, 14 | module: { 15 | rules: [ 16 | { //处理js中引入的css 17 | test: /\.css$/, 18 | loader: ExtractTextPlugin.extract({ 19 | use: ['vue-style-loader', 'css-loader'] 20 | }) 21 | }, 22 | { 23 | test: /\.vue$/, 24 | loader: 'vue-loader', 25 | options: { 26 | loaders: { 27 | css: ExtractTextPlugin.extract({ 28 | use: 'css-loader', 29 | fallback: 'vue-style-loader' 30 | }) 31 | } 32 | // other vue-loader options go here 33 | } 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel-loader', 38 | exclude: /node_modules/ 39 | }, 40 | { 41 | test: /\.(png|jpg|gif|svg)$/, 42 | loader: 'file-loader', 43 | options: { 44 | name: '[name].[ext]?[hash]' 45 | } 46 | } 47 | ] 48 | }, 49 | plugins: [ 50 | new ExtractTextPlugin({filename: 'halower-tree.min.css', allChunks: true}) 51 | ], 52 | resolve: { 53 | alias: { 54 | 'vue$': 'vue/dist/vue.esm.js' 55 | }, 56 | extensions: ['*', '.js', '.vue', '.json'] 57 | }, 58 | externals: ['vue'], 59 | devServer: { 60 | historyApiFallback: true, 61 | noInfo: true, 62 | overlay: true 63 | }, 64 | performance: { 65 | hints: false 66 | }, 67 | devtool: '#eval-source-map' 68 | } 69 | 70 | if (process.env.NODE_ENV === 'production') { 71 | module.exports.devtool = '#source-map' 72 | // http://vue-loader.vuejs.org/en/workflow/production.html 73 | module.exports.plugins = (module.exports.plugins || []).concat([ 74 | new webpack.DefinePlugin({ 75 | 'process.env': { 76 | NODE_ENV: '"production"' 77 | } 78 | }), 79 | new webpack.optimize.UglifyJsPlugin({ 80 | sourceMap: true, 81 | compress: { 82 | warnings: false 83 | } 84 | }), 85 | new webpack.LoaderOptionsPlugin({ 86 | minimize: true 87 | }) 88 | ]) 89 | } 90 | --------------------------------------------------------------------------------