diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 677473362..09c7a3f46 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -60,9 +60,15 @@ export default { | Event | Description | Arguments | |------|------|------| -| click-nav | triggered when parent node is selected | index: index of selected parent | +| click-nav | triggered when parent node is selected | index: index of selected parent | | click-item | triggered when item is selected | data: selected item | +### Slots + +| Name | Description | +|------|------| +| content | Custom right content | + ### Data Structure of Item `items` should be an array contains specified tree objects. diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 497ac4e52..310a31e0b 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -63,6 +63,12 @@ export default { | click-nav | 点击左侧导航时触发 | index:被点击的导航的索引 | | click-item | 点击右侧选择项时触发 | data: 该点击项的数据 | +### Slots + +| 名称 | 说明 | +|------|------| +| content | 自定义右侧区域内容 | + ### Item 数据结构 `items` 整体为一个数组,数组内包含一系列描述分类的对象。 diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx index be0655233..8862b17be 100644 --- a/src/tree-select/index.tsx +++ b/src/tree-select/index.tsx @@ -4,7 +4,7 @@ import Icon from '../icon'; // Types import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; +import { DefaultSlots, ScopedSlot } from '../utils/types'; export type TreeSelectItem = { text: string; @@ -25,12 +25,16 @@ export type TreeSelectProps = { mainActiveIndex: number; }; +export type TreeSelectSlots = DefaultSlots & { + content?: ScopedSlot; +}; + const [createComponent, bem] = createNamespace('tree-select'); function TreeSelect( h: CreateElement, props: TreeSelectProps, - slots: DefaultSlots, + slots: TreeSelectSlots, ctx: RenderContext ) { const { height, items, mainActiveIndex, activeId } = props; @@ -38,59 +42,65 @@ function TreeSelect( const selectedItem: Partial = items[mainActiveIndex] || {}; const subItems = selectedItem.children || []; + const Nav = items.map((item, index) => ( +
{ + if (!item.disabled) { + emit(ctx, 'click-nav', index); + + // compatible for old usage, should be removed in next major version + emit(ctx, 'navclick', index); + } + }} + > + {item.text} +
+ )); + + function Content() { + if (slots.content) { + return slots.content(); + } + + return subItems.map(item => ( +
{ + if (!item.disabled) { + emit(ctx, 'click-item', item); + + // compatible for old usage, should be removed in next major version + emit(ctx, 'itemclick', item); + } + }} + > + {item.text} + {activeId === item.id && ( + + )} +
+ )); + } + return (
-
- {items.map((item, index) => ( -
{ - if (!item.disabled) { - emit(ctx, 'click-nav', index); - - // compatible for old usage, should be removed in next major version - emit(ctx, 'navclick', index); - } - }} - > - {item.text} -
- ))} -
-
- {subItems.map(item => ( -
{ - if (!item.disabled) { - emit(ctx, 'click-item', item); - - // compatible for old usage, should be removed in next major version - emit(ctx, 'itemclick', item); - } - }} - > - {item.text} - {activeId === item.id && ( - - )} -
- ))} -
+
{Nav}
+
{Content()}
); } diff --git a/src/tree-select/test/__snapshots__/index.spec.js.snap b/src/tree-select/test/__snapshots__/index.spec.js.snap index 5dd66e72c..3c718139e 100644 --- a/src/tree-select/test/__snapshots__/index.spec.js.snap +++ b/src/tree-select/test/__snapshots__/index.spec.js.snap @@ -1,5 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`content slot 1`] = ` +
+
+
group1
+
+
Custom Content
+
+`; + exports[`empty list 1`] = `
diff --git a/src/tree-select/test/index.spec.js b/src/tree-select/test/index.spec.js index dbf4ec6a2..7a469d782 100644 --- a/src/tree-select/test/index.spec.js +++ b/src/tree-select/test/index.spec.js @@ -124,3 +124,20 @@ test('click disabled item', () => { items.at(0).trigger('click'); expect(onClickItem).toHaveBeenCalledTimes(0); }); + +test('content slot', () => { + const wrapper = mount(TreeSelect, { + propsData: { + items: [ + { + text: 'group1' + } + ] + }, + scopedSlots: { + content: () => 'Custom Content' + } + }); + + expect(wrapper).toMatchSnapshot(); +});