Skip to content

Commit 5c8b82c

Browse files
zkwolfzkwolf
authored
feat(tree): support global title slot (#4299)
* feat: global tree title slot * docs: add context menu demo * test: update snapshot
1 parent 56991e5 commit 5c8b82c

File tree

6 files changed

+97
-0
lines changed

6 files changed

+97
-0
lines changed

‎antdv-demo/docs/tree/demo/context-menu.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<cn>
2+
#### 右键菜单
3+
自定义展示右键菜单。
4+
</cn>
5+
6+
<us>
7+
#### Context Menu
8+
Custom display the context menu
9+
</us>
10+
11+
```vue
12+
<template>
13+
<a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys">
14+
<template #title="{ key: treeKey, title }">
15+
<a-dropdown :trigger="['contextmenu']">
16+
<span>{{ title }}</span>
17+
<template #overlay>
18+
<a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
19+
<a-menu-item key="1">1st menu item</a-menu-item>
20+
<a-menu-item key="2">2nd menu item</a-menu-item>
21+
<a-menu-item key="3">3rd menu item</a-menu-item>
22+
</a-menu>
23+
</template>
24+
</a-dropdown>
25+
</template>
26+
</a-tree>
27+
</template>
28+
<script>
29+
const treeData = [
30+
{
31+
title: '0-0',
32+
key: '0-0',
33+
children: [
34+
{
35+
title: '0-0-0',
36+
key: '0-0-0',
37+
children: [
38+
{ title: '0-0-0-0', key: '0-0-0-0' },
39+
{ title: '0-0-0-1', key: '0-0-0-1' },
40+
{ title: '0-0-0-2', key: '0-0-0-2' },
41+
],
42+
},
43+
{
44+
title: '0-0-1',
45+
key: '0-0-1',
46+
children: [
47+
{ title: '0-0-1-0', key: '0-0-1-0' },
48+
{ title: '0-0-1-1', key: '0-0-1-1' },
49+
{ title: '0-0-1-2', key: '0-0-1-2' },
50+
],
51+
},
52+
],
53+
},
54+
];
55+
export default {
56+
data() {
57+
return {
58+
treeData,
59+
expandedKeys: ['0-0-0', '0-0-1'],
60+
};
61+
},
62+
methods: {
63+
onContextMenuClick(treeKey, menuKey) {
64+
console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
65+
},
66+
},
67+
};
68+
</script>
69+
```

‎antdv-demo/docs/tree/demo/index.vue

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Search from './search';
99
import Directory from './directory';
1010
import ReplaceFields from './replaceFields';
1111
import SwitcherIcon from './switcher-icon';
12+
import ContextMenu from './context-menu';
1213
1314
import CN from '../index.zh-CN.md';
1415
import US from '../index.en-US.md';
@@ -48,6 +49,7 @@ export default {
4849
<Search />
4950
<Directory />
5051
<SwitcherIcon />
52+
<ContextMenu />
5153
</demo-sort>
5254
<api>
5355
<template slot="cn">

‎antdv-demo/docs/tree/index.en-US.md

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
2929
| switcherIcon | customize collapse/expand icon of tree node | slot | - | |
3030
| showLine | Shows a connecting line | boolean | false | |
31+
| title | title | slot | | |
3132

3233
### Events
3334

‎antdv-demo/docs/tree/index.zh-CN.md

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
2929
| switcherIcon | 自定义树节点的展开/折叠图标 | slot | - | |
3030
| showLine | 是否展示连接线 | boolean | false | |
31+
| title | 标题 | slot | | |
3132

3233
### 事件
3334

‎components/tree/Tree.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ export default {
169169
title:
170170
$scopedSlots[scopedSlots.title] ||
171171
$slots[slots.title] ||
172+
$scopedSlots.title ||
172173
restProps[replaceFields.title],
173174
dataRef: item,
174175
on,

‎components/tree/__tests__/__snapshots__/demo.test.js.snap

+23
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,29 @@ exports[`renders ./antdv-demo/docs/tree/demo/basic-controlled.md correctly 1`] =
4848
</ul>
4949
`;
5050

51+
exports[`renders ./antdv-demo/docs/tree/demo/context-menu.md correctly 1`] = `
52+
<ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">
53+
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0</span></span></span>
54+
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
55+
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0</span></span></span>
56+
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
57+
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0-0</span></span></span></li>
58+
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0-1</span></span></span></li>
59+
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0-2</span></span></span></li>
60+
</ul>
61+
</li>
62+
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1</span></span></span>
63+
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
64+
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1-0</span></span></span></li>
65+
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1-1</span></span></span></li>
66+
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1-2</span></span></span></li>
67+
</ul>
68+
</li>
69+
</ul>
70+
</li>
71+
</ul>
72+
`;
73+
5174
exports[`renders ./antdv-demo/docs/tree/demo/customized-icon.md correctly 1`] = `
5275
<ul role="tree" unselectable="on" class="ant-tree">
5376
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i aria-label="icon: smile-o" class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-tree-title">parent 1</span></span>

0 commit comments

Comments
 (0)