Skip to content

feat(tree): support global title slot #4299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 1, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions antdv-demo/docs/tree/demo/context-menu.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<cn>
#### 右键菜单
自定义展示右键菜单。
</cn>

<us>
#### Context Menu
Custom display the context menu
</us>

```vue
<template>
<a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys">
<template #title="{ key: treeKey, title }">
<a-dropdown :trigger="['contextmenu']">
<span>{{ title }}</span>
<template #overlay>
<a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
<a-menu-item key="1">1st menu item</a-menu-item>
<a-menu-item key="2">2nd menu item</a-menu-item>
<a-menu-item key="3">3rd menu item</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</a-tree>
</template>
<script>
const treeData = [
{
title: '0-0',
key: '0-0',
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
],
},
];
export default {
data() {
return {
treeData,
expandedKeys: ['0-0-0', '0-0-1'],
};
},
methods: {
onContextMenuClick(treeKey, menuKey) {
console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
},
},
};
</script>
```
2 changes: 2 additions & 0 deletions antdv-demo/docs/tree/demo/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Search from './search';
import Directory from './directory';
import ReplaceFields from './replaceFields';
import SwitcherIcon from './switcher-icon';
import ContextMenu from './context-menu';

import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
Expand Down Expand Up @@ -48,6 +49,7 @@ export default {
<Search />
<Directory />
<SwitcherIcon />
<ContextMenu />
</demo-sort>
<api>
<template slot="cn">
Expand Down
1 change: 1 addition & 0 deletions antdv-demo/docs/tree/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
| 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 | |
| switcherIcon | customize collapse/expand icon of tree node | slot | - | |
| showLine | Shows a connecting line | boolean | false | |
| title | title | slot | | |

### Events

Expand Down
1 change: 1 addition & 0 deletions antdv-demo/docs/tree/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
| showIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式 | boolean | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | slot | - | |
| showLine | 是否展示连接线 | boolean | false | |
| title | 标题 | slot | | |

### 事件

Expand Down
1 change: 1 addition & 0 deletions components/tree/Tree.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ export default {
title:
$scopedSlots[scopedSlots.title] ||
$slots[slots.title] ||
$scopedSlots.title ||
restProps[replaceFields.title],
dataRef: item,
on,
Expand Down
23 changes: 23 additions & 0 deletions components/tree/__tests__/__snapshots__/demo.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,29 @@ exports[`renders ./antdv-demo/docs/tree/demo/basic-controlled.md correctly 1`] =
</ul>
`;

exports[`renders ./antdv-demo/docs/tree/demo/context-menu.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">
<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>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<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>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<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>
<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>
<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>
</ul>
</li>
<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>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<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>
<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>
<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>
</ul>
</li>
</ul>
</li>
</ul>
`;

exports[`renders ./antdv-demo/docs/tree/demo/customized-icon.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree">
<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>
Expand Down