作了一個vue的同步tree 的npm組件包
前言：由於現成的tree組件沒有找到。亦或是其依賴的其餘東西太多，不太合適引入咱們的項目，因此本身作了一個。大概樣式：css
在線例子：
https://hamupp.github.io/t-vue-tree/examples/dist/#/basicDemoAndApivue
屬性：
1.data {類型Object} 樹的所有數據，格式參考下例，其中的各個字段的說明也看示例中的註釋。在此基礎上你固然能夠追加本身的字段。git
1 [ 2 { 3 title: 'parent 1', 4 expanded: true, 5 checkbox: true,//是否有勾選框,默認false 6 checked: false,//是否勾選該節點，默認false 7 selected: false,//是否選中該節點，默認false 8 custormKey: 'ccdf', 9 children: [ 10 { 11 title: 'parent 1-1', 12 expanded: true, 13 checkbox: true,//是否有勾選框,默認false 14 checked: false,//是否勾選該節點，默認false 15 custormKey: 'ccdf', 16 children: [ 17 { 18 title: 'leaf 1-1-1', 19 checkbox: true,//是否有勾選框,默認false 20 checked: false,//是否勾選該節點，默認false 21 custormKey: 'ccdf', 22 }, 23 { 24 title: 'leaf 1-1-2', 25 checkbox: true,//是否有勾選框,默認false 26 checked: false,//是否勾選該節點，默認false 27 selected:true,//是否選中該節點，默認false 28 custormKey: 'ccdf', 29 } 30 ] 31 }, 32 { 33 title: 'parent 1-2', 34 expanded: true, 35 checkbox: true,//是否有勾選框,默認false 36 checked: false,//是否勾選該節點，默認false 37 custormKey: 'ccdf', 38 children: [ 39 { 40 title: 'leaf 1-2-1', 41 checkbox: true,//是否有勾選框,默認false 42 checked: false,//是否勾選該節點，默認false 43 custormKey: 'ccdf', 44 children: [ 45 { 46 title: 'leaf 1-2-1-1', 47 checkbox: true,//是否有勾選框,默認false 48 checked: false,//是否勾選該節點，默認false 49 custormKey: 'mmccf', 50 }, 51 { 52 title: 'leaf 1-2-1-2', 53 checkbox: true,//是否有勾選框,默認false 54 checked: false,//是否勾選該節點，默認false 55 custormKey: 'mmccf', 56 }, 57 { 58 title: 'leaf 1-2-1-3', 59 checkbox: true,//是否有勾選框,默認false 60 checked: false,//是否勾選該節點，默認false 61 custormKey: 'mmccf', 62 } 63 ] 64 }, 65 { 66 title: 'leaf 1-2-1', 67 checkbox: true,//是否有勾選框,默認false 68 checked: false,//是否勾選該節點，默認false 69 custormKey: 'ccdf', 70 } 71 ] 72 } 73 ] 74 }, 75 { 76 title: 'parent 2', 77 expanded: false, 78 checkbox: true,//是否有勾選框,默認false 79 checked: true,//是否勾選該節點，默認false 80 children: [ 81 { 82 title: 'parent 2-1', 83 checkbox: true,//是否有勾選框,默認false 84 checked: true,//是否勾選該節點，默認false 85 expanded: true,//是否展開該節點 86 selected: false,//是否選中該節點，默認false 87 expandOnClickNode: false,//點擊節點時也展開節點，須要expand屬性同時爲真，默認false 88 children: [ 89 { 90 title: 'leaf 2-1-1', 91 checkbox: true,//是否有勾選框,默認false 92 checked: true,//是否勾選該節點，默認false 93 }, 94 { 95 title: 'leaf 2-1-2', 96 checkbox: true,//是否有勾選框,默認false 97 checked: true,//是否勾選該節點，默認false 98 } 99 ] 100 }, 101 { 102 title: 'parent 2-2', 103 expanded: true, 104 checkbox: true,//是否有勾選框,默認false 105 checked: true,//是否勾選該節點，默認false 106 children: [ 107 { 108 title: 'leaf 2-2-1', 109 checkbox: true,//是否有勾選框,默認false 110 checked: true,//是否勾選該節點，默認false 111 }, 112 { 113 title: 'leaf 2-2-1', 114 checkbox: true,//是否有勾選框,默認false 115 checked: true,//是否勾選該節點，默認false 116 } 117 ] 118 } 119 ] 120 } 121 ]
2.treeSelectable {類型Boolean} 樹節點是否有選中效果。默認truegithub
3.treeSelectType {類型String} 僅限兩個值single|multiple。默認single。樹節點的選中效果是單選仍是容許多選，正常來講，樹節點的選中效果都是單選，即選中一個節點時，取消以前選中的節點。但就是有些騷包反人類客戶想要多選效果npm
**ps:**app
1.treeSelectable爲false時，treeSelectType無效，節點自己的selected字段無效。dom
2.關於勾選框的，沒有通用的勾選框屬性配置。若是要加勾選框，請將每一個節點的內部的checkbox字段設爲true，不然該節點沒有勾選框ide
事件：
1.onToggle 摺疊展開一個節點時觸發。返回該節點的全部數據
2.onCheck 勾選|取消勾選一個節點時觸發。返回該節點的全部數據
3.onSelect 選擇|取消選中一個節點時觸發。返回該節點的全部數據spa
方法：
1.getCheckedNodes 參數：String 僅限兩個值：checked indeterminated 獲取勾選的節點，實心和非實心。返回：Array，勾選的實心或者半實心的節點的集合code
2.getSelectedNodes 參數：無，返回：Array，選中的節點的集合
下載安裝和引入方式：
1.npm install t-vue-tree
2.引入並註冊爲vue的組件：
方式分2種--全局註冊or局部註冊
(1)全局註冊:
在你的vue項目的入口js中(按照慣例，這個js通常取名爲main.js或者app.js或者index.js)註冊爲全局的vue組件，而後在全部vue文件中均可以直接使用:
> 例如：main.js中：
<!-- 你的其餘代碼 --start-- --> ... import Vue from 'vue' ... <!-- 你的其餘代碼 --end-- --> <!-- 引入本tree組件 --start-- --> import Ttree from 't-vue-tree'; Vue.component('Ttree', Ttree); <!-- 引入本tree組件 --end-- -->
> 而後在須要使用的vue頁面中：
<template>
<!-- 先爲tree組件設定一個包裹元素，並設置其寬高-->
<div class='your-tree-wrapper'>
<!-- 裏面寫tree組件-->
<Ttree :data="treeData"
></Ttree>
</div>
</template>
其中treeData的數據參考上文‘屬性’說明中的data的說明；
(2)局部註冊
在須要使用tree的vue頁面中單獨引入並註冊爲一個局部的組件：
> demo.vue
<template>
<div class='your-tree-wrapper'>
<Ttree
:data="treeData"
></Ttree>
</div>
</template>
<script> import Ttree from 't-vue-tree';//引入本組件 export default { components: {//註冊本組件 Ttree }, data(){ return{
treeData:[。。。數據參考屬性一節的data的說明。。。] } } }
**注意：**
不論哪一種方式引入，在vue頁面中使用時，必定要把本組件放在一個你的包裹dom元素中，例如上例中的.your-tree-wrapper的div。由於本tree的寬高css是100%,因此，若是父容器沒有寬高。。。。你懂得撒。。。
git地址：
https://github.com/hamuPP/t-vue-tree
NPM地址：
https://www.npmjs.com/package/t-vue-tree
- 1. 製作併發佈一個Vue組件npm包
- 2. 如何製做併發佈一個vue的組件的npm包
- 3. 製做併發布第一個vue組件的npm包
- 4. 基於vueCli2發佈一個vue組件的npm包
- 5. 封裝一個可拖拽的Tree組件（Vue），並上傳到NPM
- 6. 使用npm發佈一個vue組件
- 7. vue組件打包及發佈npm的整個流程
- 8. 基於刮刮卡Vue組件發佈一個NPM包
- 9. 製做併發佈一個Vue組件npm包
- 10. Vue動態註冊異步組件（非同一個工程的組件）
- 更多相關文章...
- • MyBatis的核心組件 - MyBatis教程
- • C# Windows 文件系統的操作 - C#教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • RxJava操作符（一）Creating Observables
-
每一个你不满意的现在，都有一个你没有努力的曾经。