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 0160760

Browse files
feat: CTreeDrop 新增 Slot Props
1 parent 8c1e1c6 commit 0160760

File tree

5 files changed

+109
-19
lines changed

5 files changed

+109
-19
lines changed

‎CHANGELOG.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/lang/zh-CN/
55

66
## [Unreleased]
77

8+
## [2.3.0] - 2020年04月15日
9+
10+
### Added
11+
12+
- `CTreeDrop` 默认与 display slot 新增 Slot Props
13+
14+
### Changed
15+
16+
### Deprecated
17+
18+
### Removed
19+
20+
### Fixed
21+
22+
### Security
23+
824
## [2.2.6] - 2019年12月12日
925

1026
### Added

‎README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,24 @@ npm install @wsfe/ctree
244244
| 默认 | 展示输入框 |
245245
| display | 展示输入框的展示文字,如果有默认 slot 则此 slot 无效 |
246246
| clear | 替换清空图标,如果有默认 slot 则此 slot 无效 |
247+
248+
默认 slot 与 display slot 的 Slot Props `2.3.0` :
249+
250+
```typescript
251+
/** 展示 slot 的 props */
252+
slotProps: {
253+
/** 多选选中的节点 */
254+
checkedNodes: [] as TreeNode[],
255+
256+
/** 多选选中的节点 key */
257+
checkedKeys: [] as Array<string | number>,
258+
259+
/** 单选选中的节点 */
260+
selectedNode: null as TreeNode | null,
261+
262+
/** 单选选中的节点 key */
263+
selectedKey: null as string | number | null,
264+
},
265+
```
266+
267+
**注意**: `checkedNodes` 与 `selectedNode` 只包含已加载的节点,如果设置了选中的值(比如设置了 `value` Prop),但没有设置树的数据,则这两个字段内容将为空;而 `checkedKeys` 与 `selectedKey` 则会包含未加载的选中节点 key 。

‎examples/Drop.vue‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,44 @@
11
<template>
2-
<div style="width: 200px;">
3-
<CTreeDrop
4-
v-model="value"
5-
:data="data"
6-
checkable
7-
clearable
8-
drop-placeholder="请选择"
9-
:placement="placement"
10-
:dropdown-min-width="300"
11-
dropdown-width-fixed
12-
@checked-change="handleCheckedChange"
13-
>
14-
<span slot="empty">slot 传进来的暂无数据</span>
15-
</CTreeDrop>
16-
{{ value }}
2+
<div>
3+
<div style="width: 200px;">
4+
<p>自定义展示 slot :</p>
5+
<CTreeDrop
6+
v-model="value"
7+
:data="data"
8+
checkable
9+
clearable
10+
drop-placeholder="请选择"
11+
:placement="placement"
12+
:dropdown-min-width="300"
13+
dropdown-width-fixed
14+
@checked-change="handleCheckedChange"
15+
>
16+
<template v-slot:display="scope">
17+
<div
18+
style="width: 170px; text-overflow: ellipsis; overflow: hidden;"
19+
>{{ scope.checkedNodes.map((node) => node.title).join(',') }}</div>
20+
</template>
21+
<span slot="empty">slot 传进来的暂无数据</span>
22+
</CTreeDrop>
23+
{{ value }}
24+
</div>
25+
<div style="width: 200px;">
26+
<p>默认:</p>
27+
<CTreeDrop
28+
v-model="value"
29+
:data="data"
30+
checkable
31+
clearable
32+
drop-placeholder="请选择"
33+
:placement="placement"
34+
:dropdown-min-width="300"
35+
dropdown-width-fixed
36+
@checked-change="handleCheckedChange"
37+
>
38+
<span slot="empty">slot 传进来的暂无数据</span>
39+
</CTreeDrop>
40+
{{ value }}
41+
</div>
1742
</div>
1843
</template>
1944

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wsfe/ctree",
3-
"version": "2.2.6",
3+
"version": "2.3.0",
44
"main": "./dist/ctree.umd.min.js",
55
"types": "./types",
66
"description": "A vue tree component using virtual list.",

‎src/components/TreeDrop.vue‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@
66
:class="referenceCls"
77
@click="handleRefClick"
88
>
9-
<slot>
9+
<slotv-bind="slotProps">
1010
<div :class="displayInputCls">
1111
<span :class="displayInputTextCls">
12-
<slot name="display">
12+
<slot
13+
name="display"
14+
v-bind="slotProps"
15+
>
1316
{{ displayValue }}
1417
</slot>
1518
</span>
@@ -178,6 +181,21 @@ export default (Vue as VueConstructor<Vue & {
178181
179182
/** 单选选中节点名称 */
180183
selectedTitle: ('' as TreeNodeKeyType),
184+
185+
/** 展示 slot 的 props */
186+
slotProps: {
187+
/** 多选选中的节点 */
188+
checkedNodes: [] as TreeNode[],
189+
190+
/** 多选选中的节点 key */
191+
checkedKeys: [] as TreeNodeKeyType[],
192+
193+
/** 单选选中的节点 */
194+
selectedNode: null as TreeNode | null,
195+
196+
/** 单选选中的节点 key */
197+
selectedKey: null as TreeNodeKeyType | null,
198+
},
181199
}
182200
},
183201
computed: {
@@ -364,9 +382,14 @@ export default (Vue as VueConstructor<Vue & {
364382
}
365383
},
366384
handleCheckedChange (nodes: TreeNode[], keys: TreeNodeKeyType[]): void {
385+
this.slotProps.checkedNodes = nodes
386+
this.slotProps.checkedKeys = keys
367387
this.checkedCount = keys.length
368388
},
369389
handleSelectedChange (node: TreeNode | null, key: TreeNodeKeyType | null): void {
390+
this.slotProps.selectedNode = node
391+
this.slotProps.selectedKey = key
392+
370393
if (node) {
371394
const titleField = this.$refs.treeSearch.$refs.tree.titleField
372395
this.selectedTitle = node[titleField]
@@ -380,8 +403,13 @@ export default (Vue as VueConstructor<Vue & {
380403
381404
/** 处理树数据更新 */
382405
handleSetData (): void {
406+
this.slotProps.checkedNodes = this.getCheckedNodes()
407+
this.slotProps.checkedKeys = this.getCheckedKeys()
408+
this.slotProps.selectedNode = this.getSelectedNode()
409+
this.slotProps.selectedKey = this.getSelectedKey()
410+
383411
if (this.checkable) {
384-
this.checkedCount = this.getCheckedKeys().length
412+
this.checkedCount = this.slotProps.checkedKeys.length
385413
}
386414
if (this.selectable) {
387415
if (this.value != null) {

0 commit comments

Comments
(0)

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