diff --git a/src/select/_example/collapsed.vue b/src/select/_example/collapsed.vue index 9f56c7941..9c7041a3b 100644 --- a/src/select/_example/collapsed.vue +++ b/src/select/_example/collapsed.vue @@ -38,21 +38,38 @@ export default { { label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }, + { label: '选项四', value: '4' }, + { label: '选项五', value: '5' }, + { label: '选项六', value: '6' }, + { label: '选项七', value: '7' }, + { label: '选项八', value: '8' }, + { label: '选项九', value: '9' }, ], - value: ['1', '3'], + value: ['1', '3', '9'], minCollapsedNum: 1, }; }, methods: { - collapsedItems(h, { value, count, collapsedSelectedItems }) { - console.log('collapsedItems: ', value, collapsedSelectedItems, count); + collapsedItems(h, { + value, count, collapsedSelectedItems, onClose, + }) { + console.log('collapsedItems: ', value, collapsedSelectedItems, count, onClose); if (!count) return; // hover展示全部已选项 return (
- {collapsedSelectedItems.map((item) => ( -

{item.label}

+ {collapsedSelectedItems.map((item, index) => ( +

+ { + onClose(index + 1); + }} + > + {item.label} + +

))}
0} style="color: #ED7B2F; margin-left: 8px"> diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index 5a5b3d848..9a28ea7fb 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -9,7 +9,7 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N creatable | Boolean | false | \- | N disabled | Boolean | - | \- | N empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/select/select.md b/src/select/select.md index 310aea378..a7775fd64 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -9,7 +9,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N autofocus | Boolean | false | 自动聚焦 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可以清空选项 | N -collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量；`onClose` 表示移除标签。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (index: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N creatable | Boolean | false | 是否允许用户创建新条目，需配合 filterable 使用 | N disabled | Boolean | - | 是否禁用组件 | N empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/select/select.tsx b/src/select/select.tsx index 3f86a90e5..ebffeaa3f 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -283,6 +283,7 @@ export default defineComponent({ }) .slice(minCollapsedNum.value), count: values.length - minCollapsedNum.value, + onClose: (index: number) => removeTag(index), } : {}; }); diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index a4cb3f161..7f632db66 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -84812,7 +84812,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/collapsed.vue 1`] = class="t-tag t-tag--default t-tag--dark" > - +1 + +2 @@ -84891,7 +84891,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/collapsed.vue 1`] = - +1 + +2 csr test ./src/select/_example/collapsed.vue 1`] = - +1 + +2 renders ./src/rate/_example/texts.vue correctly 1`] exports[`ssr snapshot test > renders ./src/select/_example/base.vue correctly 1`] = `"
属性：
插槽：
"`; -exports[`ssr snapshot test > renders ./src/select/_example/collapsed.vue correctly 1`] = `"
选项一
+1
选项一
+1
选项一
+1
"`; +exports[`ssr snapshot test > renders ./src/select/_example/collapsed.vue correctly 1`] = `"
选项一
+2
选项一
+2
选项一
+2
"`; exports[`ssr snapshot test > renders ./src/select/_example/creatable.vue correctly 1`] = `"
多选支持自定义创建
"`;