├── . npmignore ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── lib ├── demo.html ├── vue-chart-tree.common.js ├── vue-chart-tree.common.js.map ├── vue-chart-tree.umd.js ├── vue-chart-tree.umd.js.map ├── vue-chart-tree.umd.min.js └── vue-chart-tree.umd.min.js.map ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── tree1.jpg ├── src ├── assets │ ├── add-round.png │ └── cut-round.png ├── const.js ├── index.js ├── util.js └── vue-chart-tree.vue ├── test ├── chart-tree.vue └── main.js ├── types ├── index.d.ts ├── node.d.ts └── utils.d.ts └── vue.config.js /. npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | public/ 3 | test/ 4 | babel.config.js 5 | *.map -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 KQ 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 | # vue-chart-tree 2 | 3 |  4 | 5 |     6 | 7 | `vue-chart-tree` 是一个特殊布局模式结构的`vue Tree`组件 8 | 9 |  10 | 11 | ## Demo 12 | 13 | [Demo](https://accforgit.github.io/vue-chart-tree/index.html) 14 | 15 | ## 安装 16 | 17 | ``` 18 | npm install vue-chart-tree --save 19 | ``` 20 | 21 | ## 导入 22 | 23 | ### 全局导入 24 | 25 | ```js 26 | import Vue from 'vue' 27 | import VueChartTree from 'vue-chart-tree' 28 | 29 | Vue.use(VueChartTree) 30 | ``` 31 | 32 | ### 局部导入 33 | 34 | ```js 35 | // in ES6 modules 36 | import VueChartTree from 'vue-chart-tree' 37 | 38 | // in CommonJS 39 | const VueChartTree = require('vue-chart-tree') 40 | 41 | export default { 42 | components: { 43 | VueChartTree 44 | } 45 | } 46 | ``` 47 | 48 | ### script 脚本形式导入 49 | 50 | ```html 51 | 52 | ``` 53 | 54 | ```js 55 | new Vue({ 56 | el: '#app', 57 | components: { 58 | 'vue-chart-tree': window['vue-chart-tree'] 59 | } 60 | }) 61 | ``` 62 | 63 | ## 用法 64 | 65 | 组件库本身向外暴露了三个变量: 66 | ```js 67 | import VueChartTree, { resetTree, updatePartTree } from 'vue-chart-tree' 68 | ``` 69 | `VueChartTree` 即为组件本身; 70 | 当开发者自行定义的 `slot`节点发生变化时(例如位置、尺寸等发生改变),由开发者主动调用 `updatePartTree` 进行树状图结构的更新; 71 | 如果因为特殊的操作需要重置整个树状图,则可以调用 `resetTree` 完成, `resetTree`接收一个 `VueChartTree`节点作为参数(可以通过 `$ref`获取) 72 | 73 | 参见 [demo](https://github.com/accforgit/vue-chart-tree/blob/master/test/chart-tree.vue) 74 | 75 | ## Options 76 | 77 | ### Props 78 | 79 | |参数|类型|描述|默认值|是否必须| 80 | |----|---|----|----|---| 81 | |`isRoot`|`Boolean`|是否是整个树状结构的根节点(即 `rootNode`)|`true`|否| 82 | |`treeNodeData`|`Object`|当前节点的数据信息|-|是| 83 | 84 | #### treeNodeData 85 | 86 | |参数|类型|描述|默认值|是否必须| 87 | |----|---|----|----|---| 88 | |`children`|`Array`|当前节点的子节点|-|否| 89 | |`isOpen`|`Boolean`|当前节点是否是展开(`open`)状态|-|否| 90 | |`other`|`any`|当前节点相关的其他值,这些值由开发者决定,一般来说是可能会被 `slot` 使用的值|-|否| 91 | 92 | ### slot 93 | 94 | 组件本身只是构建了一个树状结构,以及基本的交互,树状图上的节点由开发者自行决定,通过一个传入的 `default slot` 实现,所以具备较大的灵活性 95 | 具体用法参见 [demo](https://github.com/accforgit/vue-chart-tree/blob/master/test/chart-tree.vue) 96 | 97 | ## License 98 | 99 | MIT -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /lib/demo.html: -------------------------------------------------------------------------------- 1 | 2 | VueChartTree demo 3 | 4 | 5 | 6 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | {{slotProps.data.treeNodeData.name}} 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 确定 74 | 75 | 76 | 77 | 122 | 154 | -------------------------------------------------------------------------------- /lib/vue-chart-tree.common.js: -------------------------------------------------------------------------------- 1 | module.exports = 2 | /******/ (function(modules) { // webpackBootstrap 3 | /******/ // The module cache 4 | /******/ var installedModules = {}; 5 | /******/ 6 | /******/ // The require function 7 | /******/ function __webpack_require__(moduleId) { 8 | /******/ 9 | /******/ // Check if module is in cache 10 | /******/ if(installedModules[moduleId]) { 11 | /******/ return installedModules[moduleId].exports; 12 | /******/ } 13 | /******/ // Create a new module (and put it into the cache) 14 | /******/ var module = installedModules[moduleId] = { 15 | /******/ i: moduleId, 16 | /******/ l: false, 17 | /******/ exports: {} 18 | /******/ }; 19 | /******/ 20 | /******/ // Execute the module function 21 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 22 | /******/ 23 | /******/ // Flag the module as loaded 24 | /******/ module.l = true; 25 | /******/ 26 | /******/ // Return the exports of the module 27 | /******/ return module.exports; 28 | /******/ } 29 | /******/ 30 | /******/ 31 | /******/ // expose the modules object (__webpack_modules__) 32 | /******/ __webpack_require__.m = modules; 33 | /******/ 34 | /******/ // expose the module cache 35 | /******/ __webpack_require__.c = installedModules; 36 | /******/ 37 | /******/ // define getter function for harmony exports 38 | /******/ __webpack_require__.d = function(exports, name, getter) { 39 | /******/ if(!__webpack_require__.o(exports, name)) { 40 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 41 | /******/ } 42 | /******/ }; 43 | /******/ 44 | /******/ // define __esModule on exports 45 | /******/ __webpack_require__.r = function(exports) { 46 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 47 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 48 | /******/ } 49 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 50 | /******/ }; 51 | /******/ 52 | /******/ // create a fake namespace object 53 | /******/ // mode & 1: value is a module id, require it 54 | /******/ // mode & 2: merge all properties of value into the ns 55 | /******/ // mode & 4: return value when already ns object 56 | /******/ // mode & 8|1: behave like require 57 | /******/ __webpack_require__.t = function(value, mode) { 58 | /******/ if(mode & 1) value = __webpack_require__(value); 59 | /******/ if(mode & 8) return value; 60 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 61 | /******/ var ns = Object.create(null); 62 | /******/ __webpack_require__.r(ns); 63 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 64 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 65 | /******/ return ns; 66 | /******/ }; 67 | /******/ 68 | /******/ // getDefaultExport function for compatibility with non-harmony modules 69 | /******/ __webpack_require__.n = function(module) { 70 | /******/ var getter = module && module.__esModule ? 71 | /******/ function getDefault() { return module['default']; } : 72 | /******/ function getModuleExports() { return module; }; 73 | /******/ __webpack_require__.d(getter, 'a', getter); 74 | /******/ return getter; 75 | /******/ }; 76 | /******/ 77 | /******/ // Object.prototype.hasOwnProperty.call 78 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 79 | /******/ 80 | /******/ // __webpack_public_path__ 81 | /******/ __webpack_require__.p = ""; 82 | /******/ 83 | /******/ 84 | /******/ // Load entry module and return exports 85 | /******/ return __webpack_require__(__webpack_require__.s = "fb15"); 86 | /******/ }) 87 | /************************************************************************/ 88 | /******/ ({ 89 | 90 | /***/ "0366": 91 | /***/ (function(module, exports, __webpack_require__) { 92 | 93 | var aFunction = __webpack_require__("1c0b"); 94 | 95 | // optional / simple context binding 96 | module.exports = function (fn, that, length) { 97 | aFunction(fn); 98 | if (that === undefined) return fn; 99 | switch (length) { 100 | case 0: return function () { 101 | return fn.call(that); 102 | }; 103 | case 1: return function (a) { 104 | return fn.call(that, a); 105 | }; 106 | case 2: return function (a, b) { 107 | return fn.call(that, a, b); 108 | }; 109 | case 3: return function (a, b, c) { 110 | return fn.call(that, a, b, c); 111 | }; 112 | } 113 | return function (/* ...args */) { 114 | return fn.apply(that, arguments); 115 | }; 116 | }; 117 | 118 | 119 | /***/ }), 120 | 121 | /***/ "06cf": 122 | /***/ (function(module, exports, __webpack_require__) { 123 | 124 | var DESCRIPTORS = __webpack_require__("83ab"); 125 | var propertyIsEnumerableModule = __webpack_require__("d1e7"); 126 | var createPropertyDescriptor = __webpack_require__("5c6c"); 127 | var toIndexedObject = __webpack_require__("fc6a"); 128 | var toPrimitive = __webpack_require__("c04e"); 129 | var has = __webpack_require__("5135"); 130 | var IE8_DOM_DEFINE = __webpack_require__("0cfb"); 131 | 132 | var nativeGetOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; 133 | 134 | // `Object.getOwnPropertyDescriptor` method 135 | // https://tc39.github.io/ecma262/#sec-object.getownpropertydescriptor 136 | exports.f = DESCRIPTORS ? nativeGetOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) { 137 | O = toIndexedObject(O); 138 | P = toPrimitive(P, true); 139 | if (IE8_DOM_DEFINE) try { 140 | return nativeGetOwnPropertyDescriptor(O, P); 141 | } catch (error) { /* empty */ } 142 | if (has(O, P)) return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O, P), O[P]); 143 | }; 144 | 145 | 146 | /***/ }), 147 | 148 | /***/ "0cfb": 149 | /***/ (function(module, exports, __webpack_require__) { 150 | 151 | var DESCRIPTORS = __webpack_require__("83ab"); 152 | var fails = __webpack_require__("d039"); 153 | var createElement = __webpack_require__("cc12"); 154 | 155 | // Thank's IE8 for his funny defineProperty 156 | module.exports = !DESCRIPTORS && !fails(function () { 157 | return Object.defineProperty(createElement('div'), 'a', { 158 | get: function () { return 7; } 159 | }).a != 7; 160 | }); 161 | 162 | 163 | /***/ }), 164 | 165 | /***/ "159b": 166 | /***/ (function(module, exports, __webpack_require__) { 167 | 168 | var global = __webpack_require__("da84"); 169 | var DOMIterables = __webpack_require__("fdbc"); 170 | var forEach = __webpack_require__("17c2"); 171 | var createNonEnumerableProperty = __webpack_require__("9112"); 172 | 173 | for (var COLLECTION_NAME in DOMIterables) { 174 | var Collection = global[COLLECTION_NAME]; 175 | var CollectionPrototype = Collection && Collection.prototype; 176 | // some Chrome versions have non-configurable methods on DOMTokenList 177 | if (CollectionPrototype && CollectionPrototype.forEach !== forEach) try { 178 | createNonEnumerableProperty(CollectionPrototype, 'forEach', forEach); 179 | } catch (error) { 180 | CollectionPrototype.forEach = forEach; 181 | } 182 | } 183 | 184 | 185 | /***/ }), 186 | 187 | /***/ "17c2": 188 | /***/ (function(module, exports, __webpack_require__) { 189 | 190 | "use strict"; 191 | 192 | var $forEach = __webpack_require__("b727").forEach; 193 | var arrayMethodIsStrict = __webpack_require__("a640"); 194 | var arrayMethodUsesToLength = __webpack_require__("ae40"); 195 | 196 | var STRICT_METHOD = arrayMethodIsStrict('forEach'); 197 | var USES_TO_LENGTH = arrayMethodUsesToLength('forEach'); 198 | 199 | // `Array.prototype.forEach` method implementation 200 | // https://tc39.github.io/ecma262/#sec-array.prototype.foreach 201 | module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callbackfn /* , thisArg */) { 202 | return $forEach(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined); 203 | } : [].forEach; 204 | 205 | 206 | /***/ }), 207 | 208 | /***/ "1c0b": 209 | /***/ (function(module, exports) { 210 | 211 | module.exports = function (it) { 212 | if (typeof it != 'function') { 213 | throw TypeError(String(it) + ' is not a function'); 214 | } return it; 215 | }; 216 | 217 | 218 | /***/ }), 219 | 220 | /***/ "1d80": 221 | /***/ (function(module, exports) { 222 | 223 | // `RequireObjectCoercible` abstract operation 224 | // https://tc39.github.io/ecma262/#sec-requireobjectcoercible 225 | module.exports = function (it) { 226 | if (it == undefined) throw TypeError("Can't call method on " + it); 227 | return it; 228 | }; 229 | 230 | 231 | /***/ }), 232 | 233 | /***/ "1dde": 234 | /***/ (function(module, exports, __webpack_require__) { 235 | 236 | var fails = __webpack_require__("d039"); 237 | var wellKnownSymbol = __webpack_require__("b622"); 238 | var V8_VERSION = __webpack_require__("2d00"); 239 | 240 | var SPECIES = wellKnownSymbol('species'); 241 | 242 | module.exports = function (METHOD_NAME) { 243 | // We can't use this feature detection in V8 since it causes 244 | // deoptimization and serious performance degradation 245 | // https://github.com/zloirock/core-js/issues/677 246 | return V8_VERSION >= 51 || !fails(function () { 247 | var array = []; 248 | var constructor = array.constructor = {}; 249 | constructor[SPECIES] = function () { 250 | return { foo: 1 }; 251 | }; 252 | return array[METHOD_NAME](Boolean).foo !== 1; 253 | }); 254 | }; 255 | 256 | 257 | /***/ }), 258 | 259 | /***/ "1de5": 260 | /***/ (function(module, exports, __webpack_require__) { 261 | 262 | "use strict"; 263 | 264 | 265 | module.exports = function (url, options) { 266 | if (!options) { 267 | // eslint-disable-next-line no-param-reassign 268 | options = {}; 269 | } // eslint-disable-next-line no-underscore-dangle, no-param-reassign 270 | 271 | 272 | url = url && url.__esModule ? url.default : url; 273 | 274 | if (typeof url !== 'string') { 275 | return url; 276 | } // If url is already wrapped in quotes, remove them 277 | 278 | 279 | if (/^['"].*['"]$/.test(url)) { 280 | // eslint-disable-next-line no-param-reassign 281 | url = url.slice(1, -1); 282 | } 283 | 284 | if (options.hash) { 285 | // eslint-disable-next-line no-param-reassign 286 | url += options.hash; 287 | } // Should url be wrapped? 288 | // See https://drafts.csswg.org/css-values-3/#urls 289 | 290 | 291 | if (/["'() \t\n]/.test(url) || options.needQuotes) { 292 | return "\"".concat(url.replace(/"/g, '\\"').replace(/\n/g, '\\n'), "\""); 293 | } 294 | 295 | return url; 296 | }; 297 | 298 | /***/ }), 299 | 300 | /***/ "23cb": 301 | /***/ (function(module, exports, __webpack_require__) { 302 | 303 | var toInteger = __webpack_require__("a691"); 304 | 305 | var max = Math.max; 306 | var min = Math.min; 307 | 308 | // Helper for a popular repeating case of the spec: 309 | // Let integer be ? ToInteger(index). 310 | // If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length). 311 | module.exports = function (index, length) { 312 | var integer = toInteger(index); 313 | return integer < 0 ? max(integer + length, 0) : min(integer, length); 314 | }; 315 | 316 | 317 | /***/ }), 318 | 319 | /***/ "23e7": 320 | /***/ (function(module, exports, __webpack_require__) { 321 | 322 | var global = __webpack_require__("da84"); 323 | var getOwnPropertyDescriptor = __webpack_require__("06cf").f; 324 | var createNonEnumerableProperty = __webpack_require__("9112"); 325 | var redefine = __webpack_require__("6eeb"); 326 | var setGlobal = __webpack_require__("ce4e"); 327 | var copyConstructorProperties = __webpack_require__("e893"); 328 | var isForced = __webpack_require__("94ca"); 329 | 330 | /* 331 | options.target - name of the target object 332 | options.global - target is the global object 333 | options.stat - export as static methods of target 334 | options.proto - export as prototype methods of target 335 | options.real - real prototype method for the `pure` version 336 | options.forced - export even if the native feature is available 337 | options.bind - bind methods to the target, required for the `pure` version 338 | options.wrap - wrap constructors to preventing global pollution, required for the `pure` version 339 | options.unsafe - use the simple assignment of property instead of delete + defineProperty 340 | options.sham - add a flag to not completely full polyfills 341 | options.enumerable - export as enumerable property 342 | options.noTargetGet - prevent calling a getter on target 343 | */ 344 | module.exports = function (options, source) { 345 | var TARGET = options.target; 346 | var GLOBAL = options.global; 347 | var STATIC = options.stat; 348 | var FORCED, target, key, targetProperty, sourceProperty, descriptor; 349 | if (GLOBAL) { 350 | target = global; 351 | } else if (STATIC) { 352 | target = global[TARGET] || setGlobal(TARGET, {}); 353 | } else { 354 | target = (global[TARGET] || {}).prototype; 355 | } 356 | if (target) for (key in source) { 357 | sourceProperty = source[key]; 358 | if (options.noTargetGet) { 359 | descriptor = getOwnPropertyDescriptor(target, key); 360 | targetProperty = descriptor && descriptor.value; 361 | } else targetProperty = target[key]; 362 | FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced); 363 | // contained in target 364 | if (!FORCED && targetProperty !== undefined) { 365 | if (typeof sourceProperty === typeof targetProperty) continue; 366 | copyConstructorProperties(sourceProperty, targetProperty); 367 | } 368 | // add a flag to not completely full polyfills 369 | if (options.sham || (targetProperty && targetProperty.sham)) { 370 | createNonEnumerableProperty(sourceProperty, 'sham', true); 371 | } 372 | // extend global 373 | redefine(target, key, sourceProperty, options); 374 | } 375 | }; 376 | 377 | 378 | /***/ }), 379 | 380 | /***/ "241c": 381 | /***/ (function(module, exports, __webpack_require__) { 382 | 383 | var internalObjectKeys = __webpack_require__("ca84"); 384 | var enumBugKeys = __webpack_require__("7839"); 385 | 386 | var hiddenKeys = enumBugKeys.concat('length', 'prototype'); 387 | 388 | // `Object.getOwnPropertyNames` method 389 | // https://tc39.github.io/ecma262/#sec-object.getownpropertynames 390 | exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) { 391 | return internalObjectKeys(O, hiddenKeys); 392 | }; 393 | 394 | 395 | /***/ }), 396 | 397 | /***/ "24fb": 398 | /***/ (function(module, exports, __webpack_require__) { 399 | 400 | "use strict"; 401 | 402 | 403 | /* 404 | MIT License http://www.opensource.org/licenses/mit-license.php 405 | Author Tobias Koppers @sokra 406 | */ 407 | // css base code, injected by the css-loader 408 | // eslint-disable-next-line func-names 409 | module.exports = function (useSourceMap) { 410 | var list = []; // return the list of modules as css string 411 | 412 | list.toString = function toString() { 413 | return this.map(function (item) { 414 | var content = cssWithMappingToString(item, useSourceMap); 415 | 416 | if (item[2]) { 417 | return "@media ".concat(item[2], " {").concat(content, "}"); 418 | } 419 | 420 | return content; 421 | }).join(''); 422 | }; // import a list of modules into the list 423 | // eslint-disable-next-line func-names 424 | 425 | 426 | list.i = function (modules, mediaQuery, dedupe) { 427 | if (typeof modules === 'string') { 428 | // eslint-disable-next-line no-param-reassign 429 | modules = [[null, modules, '']]; 430 | } 431 | 432 | var alreadyImportedModules = {}; 433 | 434 | if (dedupe) { 435 | for (var i = 0; i < this.length; i++) { 436 | // eslint-disable-next-line prefer-destructuring 437 | var id = this[i][0]; 438 | 439 | if (id != null) { 440 | alreadyImportedModules[id] = true; 441 | } 442 | } 443 | } 444 | 445 | for (var _i = 0; _i < modules.length; _i++) { 446 | var item = [].concat(modules[_i]); 447 | 448 | if (dedupe && alreadyImportedModules[item[0]]) { 449 | // eslint-disable-next-line no-continue 450 | continue; 451 | } 452 | 453 | if (mediaQuery) { 454 | if (!item[2]) { 455 | item[2] = mediaQuery; 456 | } else { 457 | item[2] = "".concat(mediaQuery, " and ").concat(item[2]); 458 | } 459 | } 460 | 461 | list.push(item); 462 | } 463 | }; 464 | 465 | return list; 466 | }; 467 | 468 | function cssWithMappingToString(item, useSourceMap) { 469 | var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring 470 | 471 | var cssMapping = item[3]; 472 | 473 | if (!cssMapping) { 474 | return content; 475 | } 476 | 477 | if (useSourceMap && typeof btoa === 'function') { 478 | var sourceMapping = toComment(cssMapping); 479 | var sourceURLs = cssMapping.sources.map(function (source) { 480 | return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */"); 481 | }); 482 | return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); 483 | } 484 | 485 | return [content].join('\n'); 486 | } // Adapted from convert-source-map (MIT) 487 | 488 | 489 | function toComment(sourceMap) { 490 | // eslint-disable-next-line no-undef 491 | var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); 492 | var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64); 493 | return "/*# ".concat(data, " */"); 494 | } 495 | 496 | /***/ }), 497 | 498 | /***/ "2d00": 499 | /***/ (function(module, exports, __webpack_require__) { 500 | 501 | var global = __webpack_require__("da84"); 502 | var userAgent = __webpack_require__("342f"); 503 | 504 | var process = global.process; 505 | var versions = process && process.versions; 506 | var v8 = versions && versions.v8; 507 | var match, version; 508 | 509 | if (v8) { 510 | match = v8.split('.'); 511 | version = match[0] + match[1]; 512 | } else if (userAgent) { 513 | match = userAgent.match(/Edge\/(\d+)/); 514 | if (!match || match[1] >= 74) { 515 | match = userAgent.match(/Chrome\/(\d+)/); 516 | if (match) version = match[1]; 517 | } 518 | } 519 | 520 | module.exports = version && +version; 521 | 522 | 523 | /***/ }), 524 | 525 | /***/ "342f": 526 | /***/ (function(module, exports, __webpack_require__) { 527 | 528 | var getBuiltIn = __webpack_require__("d066"); 529 | 530 | module.exports = getBuiltIn('navigator', 'userAgent') || ''; 531 | 532 | 533 | /***/ }), 534 | 535 | /***/ "3d4d": 536 | /***/ (function(module, exports) { 537 | 538 | module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAk1BMVEX////j4+Pm5ubh4eHh4eHi4uLj4+Pf39/g4ODg4ODh4eHh4eHi4uLi4uLf39/i4uLg4ODg4ODh4eHg4ODg4ODg4ODg4ODh4eHh4eHh4eHh4eHi4uLh4eHh4eHh4eHi4uLq6urq6urj4+Pp6eni4uLj4+Pp6eni4uLp6enu7u7u7u7W1tbr6+v29vb5+fn6+vr///9w7j/NAAAAK3RSTlMCCQoqKywtODk6O1ZXWFlZWltccnN0dXZ3eObm5+jp6vHy8/P09PT19fn61ZvCOgAAAAFiS0dEMK7cLeQAAADASURBVCjPhZLZGoIgFITRTLPVJDUt3EopUuT9ny5Ec0H7nCs4PxxgBgAWpdsQ2mu5qvoojQmJM3RVh/VtlFMmRPPQ7OsnXLJOJT5063HFBqpwu0eNSjZSiRQB/JxJenkCICoDGoj7p2yiTOPgnExBcuTAJfWw+LQq6hlxOHBmwPvCgTXTKq5b6dmfw8F9et1b88CHDHK3sST8YwkwJROfxs/e/dj2XR/IBvVBIWMYoeIFmYg2cBU5ds2C0Fotf5ovEpA9X4EbbY0AAAAASUVORK5CYII=" 539 | 540 | /***/ }), 541 | 542 | /***/ "4160": 543 | /***/ (function(module, exports, __webpack_require__) { 544 | 545 | "use strict"; 546 | 547 | var $ = __webpack_require__("23e7"); 548 | var forEach = __webpack_require__("17c2"); 549 | 550 | // `Array.prototype.forEach` method 551 | // https://tc39.github.io/ecma262/#sec-array.prototype.foreach 552 | $({ target: 'Array', proto: true, forced: [].forEach != forEach }, { 553 | forEach: forEach 554 | }); 555 | 556 | 557 | /***/ }), 558 | 559 | /***/ "428f": 560 | /***/ (function(module, exports, __webpack_require__) { 561 | 562 | var global = __webpack_require__("da84"); 563 | 564 | module.exports = global; 565 | 566 | 567 | /***/ }), 568 | 569 | /***/ "44ad": 570 | /***/ (function(module, exports, __webpack_require__) { 571 | 572 | var fails = __webpack_require__("d039"); 573 | var classof = __webpack_require__("c6b6"); 574 | 575 | var split = ''.split; 576 | 577 | // fallback for non-array-like ES3 and non-enumerable old V8 strings 578 | module.exports = fails(function () { 579 | // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346 580 | // eslint-disable-next-line no-prototype-builtins 581 | return !Object('z').propertyIsEnumerable(0); 582 | }) ? function (it) { 583 | return classof(it) == 'String' ? split.call(it, '') : Object(it); 584 | } : Object; 585 | 586 | 587 | /***/ }), 588 | 589 | /***/ "4930": 590 | /***/ (function(module, exports, __webpack_require__) { 591 | 592 | var fails = __webpack_require__("d039"); 593 | 594 | module.exports = !!Object.getOwnPropertySymbols && !fails(function () { 595 | // Chrome 38 Symbol has incorrect toString conversion 596 | // eslint-disable-next-line no-undef 597 | return !String(Symbol()); 598 | }); 599 | 600 | 601 | /***/ }), 602 | 603 | /***/ "499e": 604 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 605 | 606 | "use strict"; 607 | // ESM COMPAT FLAG 608 | __webpack_require__.r(__webpack_exports__); 609 | 610 | // EXPORTS 611 | __webpack_require__.d(__webpack_exports__, "default", function() { return /* binding */ addStylesClient; }); 612 | 613 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js 614 | /** 615 | * Translates the list format produced by css-loader into something 616 | * easier to manipulate. 617 | */ 618 | function listToStyles (parentId, list) { 619 | var styles = [] 620 | var newStyles = {} 621 | for (var i = 0; i < list.length; i++) { 622 | var item = list[i] 623 | var id = item[0] 624 | var css = item[1] 625 | var media = item[2] 626 | var sourceMap = item[3] 627 | var part = { 628 | id: parentId + ':' + i, 629 | css: css, 630 | media: media, 631 | sourceMap: sourceMap 632 | } 633 | if (!newStyles[id]) { 634 | styles.push(newStyles[id] = { id: id, parts: [part] }) 635 | } else { 636 | newStyles[id].parts.push(part) 637 | } 638 | } 639 | return styles 640 | } 641 | 642 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js 643 | /* 644 | MIT License http://www.opensource.org/licenses/mit-license.php 645 | Author Tobias Koppers @sokra 646 | Modified by Evan You @yyx990803 647 | */ 648 | 649 | 650 | 651 | var hasDocument = typeof document !== 'undefined' 652 | 653 | if (typeof DEBUG !== 'undefined' && DEBUG) { 654 | if (!hasDocument) { 655 | throw new Error( 656 | 'vue-style-loader cannot be used in a non-browser environment. ' + 657 | "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment." 658 | ) } 659 | } 660 | 661 | /* 662 | type StyleObject = { 663 | id: number; 664 | parts: Array 665 | } 666 | 667 | type StyleObjectPart = { 668 | css: string; 669 | media: string; 670 | sourceMap: ?string 671 | } 672 | */ 673 | 674 | var stylesInDom = {/* 675 | [id: number]: { 676 | id: number, 677 | refs: number, 678 | parts: Array<(obj?: StyleObjectPart) => void> 679 | } 680 | */} 681 | 682 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]) 683 | var singletonElement = null 684 | var singletonCounter = 0 685 | var isProduction = false 686 | var noop = function () {} 687 | var options = null 688 | var ssrIdKey = 'data-vue-ssr-id' 689 | 690 | // Force single-tag solution on IE6-9, which has a hard limit on the # of 172 | -------------------------------------------------------------------------------- /test/chart-tree.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 13 | 14 | {{slotProps.data.treeNodeData.name}} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 确定 25 | 26 | 27 | 28 | 29 | 93 | -------------------------------------------------------------------------------- /test/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ChartTree from '../test/chart-tree.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(ChartTree) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const VueChartTree: any; 2 | 3 | export default VueChartTree; 4 | 5 | export * from './utils' 6 | -------------------------------------------------------------------------------- /types/node.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 只是做类型标注。 3 | * 因为源码中没有 export SlotProps BasicNodeData, 4 | * 需要 import { SlotProps, BasicNodeData } from 'vue-chart-tree/types/node' 方式引入。 5 | */ 6 | export interface BasicNodeData { 7 | id: number 8 | isOpen: boolean 9 | children?: BasicNodeData[] 10 | } 11 | 12 | interface SlotPropsData { 13 | treeNodeData: D 14 | $treeNodeRefs: { 15 | treeNodeRef: HTMLElement, 16 | } 17 | } 18 | 19 | export interface SlotProps { 20 | data: SlotPropsData 21 | } 22 | -------------------------------------------------------------------------------- /types/utils.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 初始化树状图 tree 3 | * @param {HTMLElement} rootTreeNode 树状图的跟 treeNode 节点 4 | */ 5 | export function resetTree(rootTreeNode: HTMLElement): void; 6 | 7 | /** 8 | * 更新树状图 9 | * 因局部节点状态发生变化,更新受到影响的所有节点的位置和height信息 10 | * @param {HTMLElement} treeNode 发生变化的节点所在的 treeNode 节点 11 | */ 12 | export function updatePartTree(treeNode: HTMLElement): void; 13 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: { 3 | extract: false 4 | }, 5 | chainWebpack(config) { 6 | config.entry('app').clear().add('./test/main.js') 7 | }, 8 | } 9 | --------------------------------------------------------------------------------
{{slotProps.data.treeNodeData.name}}