Skip to content

Commit c3488b4

Browse files
authored
升级组件使之同时支持vue2和vue3 (#43)
升级组件使之同时支持vue2和vue3,同时做了如下改变 组件名称由@wsfe/ctree变成了@wsfe/vue-tree 组件引用变成了:import Vtree, {VTreeNode, VTreeSearch, VTreeDrop} from '@wsfe/vue-tree'
1 parent 20023ec commit c3488b4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+12468
-12799
lines changed

.env.docs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
NODE_ENV=production
2-
VUE_APP_IS_BUILDING_DOCS=true
3-
VUE_APP_PUBLIC_PATH=/ctree
4-
VUE_APP_OUTPUT_DIR=docs
2+
VITE_IS_BUILDING_DOCS=true
3+
VITE_PUBLIC_PATH=/ctree
4+
VITE_OUTPUT_DIR=docs

.prettierrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
bracketSpacing: true, // {abc: 'aa'} 会被格式化成 { abc: 'aa' }
3+
singleQuote: true, // 单引号
4+
arrowParens: 'avoid', // (x) => x 变成 x => x
5+
trailingComma: 'none', // 不需要尾部逗号
6+
semi: false // 分号结尾
7+
}

README.md

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,48 @@
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/)
47

58
## 安装
69

710
### yarn 安装方式
811

912
```bash
10-
yarn add @wsfe/ctree
13+
yarn add @wsfe/vue-tree
1114
```
1215

1316
### npm 安装方式
1417

1518
```bash
16-
npm install @wsfe/ctree
19+
npm install @wsfe/vue-tree
1720
```
1821

1922
### 样式引入
2023

2124
直接引入 css
2225

2326
```less
24-
@import '~@wsfe/ctree/dist/ctree.css';
27+
@import '~@wsfe/vue-tree/dist/style.css';
2528
```
2629

2730
引入 less 以便于变量覆盖
2831

2932
```less
30-
@import '~@wsfe/ctree/src/styles/index.less';
33+
@import '~@wsfe/vue-tree/src/styles/index.less';
3134
```
3235

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
3444

35-
### CTree Props
45+
### VTree Props
3646

3747
| 属性 | 说明 | 类型 | 默认值 |
3848
|:---------------------------------|:--------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------|:-------------|
@@ -70,7 +80,7 @@ npm install @wsfe/ctree
7080
| renderNodeAmount | 渲染节点数量,可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 | `number` | 100 |
7181
| bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 | `number` | 20 |
7282

73-
### CTree Events
83+
### VTree Events
7484

7585
注:从 `2.0.8` 起,事件中返回的节点信息都是包括 `_parent``children` 的完整节点信息(拖拽事件的 `dataTransfer` 除外)。
7686

@@ -93,7 +103,7 @@ npm install @wsfe/ctree
93103
| node-dragleave | dragleave 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 `'before' \| 'body' \| 'after'` |
94104
| node-drop | 放置节点时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 `'before' \| 'body' \| 'after'` |
95105

96-
### CTree Methods
106+
### VTree Methods
97107

98108
| 方法 | 说明 | 参数 | 返回值 |
99109
|:-----------------------|:------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------|
@@ -128,14 +138,14 @@ npm install @wsfe/ctree
128138
| loadRootNodes | 从远程加载根节点 || `Promise<void>` |
129139
| scrollTo | 滚动到指定节点位置 | `key: string \| number`: 节点 key<br/>`verticalPosition: 'top' \| 'center' \| 'bottom' \| number`: 滚动的垂直位置 | `void` |
130140

131-
### CTree Slots
141+
### VTree Slots
132142

133143
| 名称 | 说明 |
134144
|:--------|:-----------------|
135145
| empty | 暂无数据 |
136146
| loading | 加载中显示的图标 |
137147

138-
### CTree Data Fields
148+
### VTree Data Fields
139149

140150
注:以 '`_`' 开头的字段最好不要覆盖,以免影响内部处理逻辑
141151

@@ -157,11 +167,11 @@ npm install @wsfe/ctree
157167
| _loading | 节点是否正在加载 |
158168
| _loaded | 节点是否已经加载过,异步加载下有效 |
159169

160-
## CTreeSearch API
170+
## VTreeSearch API
161171

162-
### CTreeSearch Props
172+
### VTreeSearch Props
163173

164-
注:可在 `CTreeSearch` 上直接使用 `CTree` 的所有 Props
174+
注:可在 `VTreeSearch` 上直接使用 `VTree` 的所有 Props
165175

166176
| 属性 | 说明 | 类型 | 默认值 |
167177
|:---------------------|:-----------------------------------------------------------------------------------|:---------------------------------------------|:-------------|
@@ -176,39 +186,39 @@ npm install @wsfe/ctree
176186
| searchRemote | 是否远程搜索,传入 `searchMethod` 时无效 | `boolean` | false |
177187
| searchDebounceTime | 搜索防抖时间,单位为毫秒 | `number` | 300 |
178188

179-
### CTreeSearch Events
189+
### VTreeSearch Events
180190

181-
注:可在 `CTreeSearch` 上直接监听 `CTree` 的所有 Events
191+
注:可在 `VTreeSearch` 上直接监听 `VTree` 的所有 Events
182192

183193
| 事件名 | 说明 | 返回值 |
184194
|:-------|:-------------------|:-------------|
185195
| search | 执行搜索操作时触发 | 搜索的关键字 |
186196

187-
### CTreeSearch Methods
197+
### VTreeSearch Methods
188198

189-
注:可在 `CTreeSearch` 上直接调用 `CTree` 的所有 Methods
199+
注:可在 `VTreeSearch` 上直接调用 `VTree` 的所有 Methods
190200

191201
| 方法 | 说明 | 参数 | 返回值 |
192202
|:-------------|:---------------|:---------------------------------------------------------|:----------------|
193203
| clearKeyword | 清空关键字 || `void` |
194204
| getKeyword | 获取搜索关键字 || `string` |
195205
| search | 执行搜索 | `keyword: string`: 搜索的关键字,默认为内部 this.keyword | `Promise<void>` |
196206

197-
### CTreeSearch Slots
207+
### VTreeSearch Slots
198208

199-
注:可在 `CTreeSearch` 上直接传入 `CTree` 的所有 Slots
209+
注:可在 `VTreeSearch` 上直接传入 `VTree` 的所有 Slots
200210

201211
| 名称 | 说明 |
202212
|:-------------|:---------------------------------------------------|
203213
| search-input | 搜索输入框,可通过此 slot 自行封装树搜索组件的行为 |
204214
| actions | 操作按钮,可在搜索输入框后加入更多操作按钮 |
205215
| footer | 底部信息 |
206216

207-
## CTreeDrop API
217+
## VTreeDrop API
208218

209-
### CTreeDrop Props
219+
### VTreeDrop Props
210220

211-
注:可在 `CTreeDrop` 上直接使用 `CTree``CTreeSearch` 的所有 Props
221+
注:可在 `VTreeDrop` 上直接使用 `VTree``VTreeSearch` 的所有 Props
212222

213223
| 属性 | 说明 | 类型 | 默认值 |
214224
|:---------------------------|:---------------------------------------------------------------------------------|:----------------------------------------------------------------------------------|:---------------|
@@ -222,22 +232,22 @@ npm install @wsfe/ctree
222232
| dropdownMinWidth `2.0.1` | 下拉框容器最小宽度,未指定则默认为展示输入框宽度。 适合 transfer 为 false 时使用 | `number` ||
223233
| dropdownWidthFixed `2.0.5` | 固定下拉框容器宽度,当内容超出最小宽度不会伸长,而是出现横向滚动条 | `boolean` | false |
224234

225-
### CTreeDrop Events
235+
### VTreeDrop Events
226236

227-
注:可在 `CTreeDrop` 上直接监听 `CTree``CTreeSearch` 的所有 Events
237+
注:可在 `VTreeDrop` 上直接监听 `VTree``VTreeSearch` 的所有 Events
228238

229239
| 事件名 | 说明 | 返回值 |
230240
|:------------------------|:-----------------------|:---------------|
231241
| dropdown-visible-change | 下拉框出现或消失时触发 | 下拉框是否可见 |
232242
| clear | 点击清空按钮时触发 ||
233243

234-
### CTreeDrop Methods
244+
### VTreeDrop Methods
235245

236-
注:可在 `CTreeDrop` 上直接调用 `CTree``CTreeSearch` 的所有 Methods
246+
注:可在 `VTreeDrop` 上直接调用 `VTree``VTreeSearch` 的所有 Methods
237247

238-
### CTreeDrop Slots
248+
### VTreeDrop Slots
239249

240-
注:可在 `CTreeDrop` 上直接传入 `CTree``CTreeSearch` 的所有 Slots
250+
注:可在 `VTreeDrop` 上直接传入 `VTree``VTreeSearch` 的所有 Slots
241251

242252
| 名称 | 说明 |
243253
|:--------|:-----------------------------------------------------|

babel.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
module.exports = {
22
presets: [
3+
['@babel/preset-env', {targets: {node: 'current'}}],
4+
'@babel/preset-typescript',
35
[
46
'@vue/app',
57
{

0 commit comments

Comments
 (0)