1
- # CTree 2.x
2
-
3
- [ 在线 demo] ( https://wsfe.github.io/ctree/ )
1
+ # Vue-Tree 3.x
2
+ 一款高性能vue虚拟树控件,支持搜索,定位,拖拽等。该控件是在公司业务的基础上不断打磨出来的,提供了十分丰富强大的API,几乎能够满足你对树控件的所有需求。该控件同时支持vue2以及vue3。
3
+ > 这是原先[ ctree] ( https://github.com/wsfe/vue-tree/tree/2.x ) 的升级版本,同时支持vue2和vue3。
4
+ 新版改变了包的名称和部分export模块名称。
5
+ ## 案例
6
+ [ 在线 demo] ( https://wsfe.github.io/vue-ctree/ )
4
7
5
8
## 安装
6
9
7
10
### yarn 安装方式
8
11
9
12
``` bash
10
- yarn add @wsfe/ctree
13
+ yarn add @wsfe/vue-tree
11
14
```
12
15
13
16
### npm 安装方式
14
17
15
18
``` bash
16
- npm install @wsfe/ctree
19
+ npm install @wsfe/vue-tree
17
20
```
18
21
19
22
### 样式引入
20
23
21
24
直接引入 css
22
25
23
26
``` less
24
- @import ' ~@wsfe/ctree /dist/ctree .css' ;
27
+ @import ' ~@wsfe/vue-tree /dist/style .css' ;
25
28
```
26
29
27
30
引入 less 以便于变量覆盖
28
31
29
32
``` less
30
- @import ' ~@wsfe/ctree /src/styles/index.less' ;
33
+ @import ' ~@wsfe/vue-tree /src/styles/index.less' ;
31
34
```
32
35
33
- ## CTree API
36
+ ### 使用方式
37
+ ``` typescript
38
+ // 大家可以根据需要是否引入VTreeNode, VTreeSearch, VTreeDrop
39
+ import Vtree , {VTreeNode , VTreeSearch , VTreeDrop } from ' @wsfe/vue-tree'
40
+ import ' @wsfe/vue-tree/dist/style.css'
41
+ ```
42
+ # 接口文档
43
+ ## VTree API
34
44
35
- ### CTree Props
45
+ ### VTree Props
36
46
37
47
| 属性 | 说明 | 类型 | 默认值 |
38
48
| :---------------------------------| :--------------------------------------------------------------------------------------------------------------| :-----------------------------------------------------------------------------------------------------------------| :-------------|
@@ -70,7 +80,7 @@ npm install @wsfe/ctree
70
80
| renderNodeAmount | 渲染节点数量,可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 | ` number ` | 100 |
71
81
| bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 | ` number ` | 20 |
72
82
73
- ### CTree Events
83
+ ### VTree Events
74
84
75
85
注:从 ` 2.0.8 ` 起,事件中返回的节点信息都是包括 ` _parent ` 与 ` children ` 的完整节点信息(拖拽事件的 ` dataTransfer ` 除外)。
76
86
@@ -93,7 +103,7 @@ npm install @wsfe/ctree
93
103
| node-dragleave | dragleave 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 ` 'before' \| 'body' \| 'after' ` |
94
104
| node-drop | 放置节点时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 ` 'before' \| 'body' \| 'after' ` |
95
105
96
- ### CTree Methods
106
+ ### VTree Methods
97
107
98
108
| 方法 | 说明 | 参数 | 返回值 |
99
109
| :-----------------------| :------------------------------------------------| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| :----------------------------------|
@@ -128,14 +138,14 @@ npm install @wsfe/ctree
128
138
| loadRootNodes | 从远程加载根节点 | 无 | ` Promise<void> ` |
129
139
| scrollTo | 滚动到指定节点位置 | ` key: string \| number ` : 节点 key<br />` verticalPosition: 'top' \| 'center' \| 'bottom' \| number ` : 滚动的垂直位置 | ` void ` |
130
140
131
- ### CTree Slots
141
+ ### VTree Slots
132
142
133
143
| 名称 | 说明 |
134
144
| :--------| :-----------------|
135
145
| empty | 暂无数据 |
136
146
| loading | 加载中显示的图标 |
137
147
138
- ### CTree Data Fields
148
+ ### VTree Data Fields
139
149
140
150
注:以 '` _ ` ' 开头的字段最好不要覆盖,以免影响内部处理逻辑
141
151
@@ -157,11 +167,11 @@ npm install @wsfe/ctree
157
167
| _ loading | 节点是否正在加载 |
158
168
| _ loaded | 节点是否已经加载过,异步加载下有效 |
159
169
160
- ## CTreeSearch API
170
+ ## VTreeSearch API
161
171
162
- ### CTreeSearch Props
172
+ ### VTreeSearch Props
163
173
164
- 注:可在 ` CTreeSearch ` 上直接使用 ` CTree ` 的所有 Props
174
+ 注:可在 ` VTreeSearch ` 上直接使用 ` VTree ` 的所有 Props
165
175
166
176
| 属性 | 说明 | 类型 | 默认值 |
167
177
| :---------------------| :-----------------------------------------------------------------------------------| :---------------------------------------------| :-------------|
@@ -176,39 +186,39 @@ npm install @wsfe/ctree
176
186
| searchRemote | 是否远程搜索,传入 ` searchMethod ` 时无效 | ` boolean ` | false |
177
187
| searchDebounceTime | 搜索防抖时间,单位为毫秒 | ` number ` | 300 |
178
188
179
- ### CTreeSearch Events
189
+ ### VTreeSearch Events
180
190
181
- 注:可在 ` CTreeSearch ` 上直接监听 ` CTree ` 的所有 Events
191
+ 注:可在 ` VTreeSearch ` 上直接监听 ` VTree ` 的所有 Events
182
192
183
193
| 事件名 | 说明 | 返回值 |
184
194
| :-------| :-------------------| :-------------|
185
195
| search | 执行搜索操作时触发 | 搜索的关键字 |
186
196
187
- ### CTreeSearch Methods
197
+ ### VTreeSearch Methods
188
198
189
- 注:可在 ` CTreeSearch ` 上直接调用 ` CTree ` 的所有 Methods
199
+ 注:可在 ` VTreeSearch ` 上直接调用 ` VTree ` 的所有 Methods
190
200
191
201
| 方法 | 说明 | 参数 | 返回值 |
192
202
| :-------------| :---------------| :---------------------------------------------------------| :----------------|
193
203
| clearKeyword | 清空关键字 | 无 | ` void ` |
194
204
| getKeyword | 获取搜索关键字 | 无 | ` string ` |
195
205
| search | 执行搜索 | ` keyword: string ` : 搜索的关键字,默认为内部 this.keyword | ` Promise<void> ` |
196
206
197
- ### CTreeSearch Slots
207
+ ### VTreeSearch Slots
198
208
199
- 注:可在 ` CTreeSearch ` 上直接传入 ` CTree ` 的所有 Slots
209
+ 注:可在 ` VTreeSearch ` 上直接传入 ` VTree ` 的所有 Slots
200
210
201
211
| 名称 | 说明 |
202
212
| :-------------| :---------------------------------------------------|
203
213
| search-input | 搜索输入框,可通过此 slot 自行封装树搜索组件的行为 |
204
214
| actions | 操作按钮,可在搜索输入框后加入更多操作按钮 |
205
215
| footer | 底部信息 |
206
216
207
- ## CTreeDrop API
217
+ ## VTreeDrop API
208
218
209
- ### CTreeDrop Props
219
+ ### VTreeDrop Props
210
220
211
- 注:可在 ` CTreeDrop ` 上直接使用 ` CTree ` 和 ` CTreeSearch ` 的所有 Props
221
+ 注:可在 ` VTreeDrop ` 上直接使用 ` VTree ` 和 ` VTreeSearch ` 的所有 Props
212
222
213
223
| 属性 | 说明 | 类型 | 默认值 |
214
224
| :---------------------------| :---------------------------------------------------------------------------------| :----------------------------------------------------------------------------------| :---------------|
@@ -222,22 +232,22 @@ npm install @wsfe/ctree
222
232
| dropdownMinWidth ` 2.0.1 ` | 下拉框容器最小宽度,未指定则默认为展示输入框宽度。 适合 transfer 为 false 时使用 | ` number ` | 无 |
223
233
| dropdownWidthFixed ` 2.0.5 ` | 固定下拉框容器宽度,当内容超出最小宽度不会伸长,而是出现横向滚动条 | ` boolean ` | false |
224
234
225
- ### CTreeDrop Events
235
+ ### VTreeDrop Events
226
236
227
- 注:可在 ` CTreeDrop ` 上直接监听 ` CTree ` 和 ` CTreeSearch ` 的所有 Events
237
+ 注:可在 ` VTreeDrop ` 上直接监听 ` VTree ` 和 ` VTreeSearch ` 的所有 Events
228
238
229
239
| 事件名 | 说明 | 返回值 |
230
240
| :------------------------| :-----------------------| :---------------|
231
241
| dropdown-visible-change | 下拉框出现或消失时触发 | 下拉框是否可见 |
232
242
| clear | 点击清空按钮时触发 | 无 |
233
243
234
- ### CTreeDrop Methods
244
+ ### VTreeDrop Methods
235
245
236
- 注:可在 ` CTreeDrop ` 上直接调用 ` CTree ` 和 ` CTreeSearch ` 的所有 Methods
246
+ 注:可在 ` VTreeDrop ` 上直接调用 ` VTree ` 和 ` VTreeSearch ` 的所有 Methods
237
247
238
- ### CTreeDrop Slots
248
+ ### VTreeDrop Slots
239
249
240
- 注:可在 ` CTreeDrop ` 上直接传入 ` CTree ` 和 ` CTreeSearch ` 的所有 Slots
250
+ 注:可在 ` VTreeDrop ` 上直接传入 ` VTree ` 和 ` VTreeSearch ` 的所有 Slots
241
251
242
252
| 名称 | 说明 |
243
253
| :--------| :-----------------------------------------------------|
0 commit comments