Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c3488b4

Browse files
升级组件使之同时支持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)

AltStyle によって変換されたページ (->オリジナル) /