From fef3384c07e191ad8b3cd712a355739744f1fb17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 30 Aug 2024 14:59:16 +0800 Subject: [PATCH 1/7] feat(tag): support title --- src/tag/check-tag-props.ts | 5 ++++- src/tag/props.ts | 7 ++++++- src/tag/tag.en-US.md | 14 +++++++++----- src/tag/tag.md | 20 ++++++++++++-------- src/tag/tag.tsx | 3 +-- src/tag/type.ts | 8 +++++++- 6 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/tag/check-tag-props.ts b/src/tag/check-tag-props.ts index c3e943daef..6a4e7e5468 100644 --- a/src/tag/check-tag-props.ts +++ b/src/tag/check-tag-props.ts @@ -18,7 +18,10 @@ export default { default: undefined, }, /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */ - defaultChecked: Boolean, + defaultChecked: { + type: Boolean, + default: undefined, + }, /** 透传标签选中态属性 */ checkedProps: { type: Object as PropType, diff --git a/src/tag/props.ts b/src/tag/props.ts index 83119cf065..56508b65b5 100644 --- a/src/tag/props.ts +++ b/src/tag/props.ts @@ -10,7 +10,7 @@ import { PropType } from 'vue'; export default { /** 标签是否可关闭 */ closable: Boolean, - /** 自定义颜色 */ + /** 自定义标签颜色 */ color: { type: String, default: '', @@ -61,6 +61,11 @@ export default { return ['default', 'primary', 'warning', 'danger', 'success'].includes(val); }, }, + /** 标签标题，在标签hover时展示，默认为标签内容 */ + title: { + type: String, + default: '', + }, /** 标签风格变体 */ variant: { type: String as PropType, diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md index b778d6a522..d0ad3c54c8 100644 --- a/src/tag/tag.en-US.md +++ b/src/tag/tag.en-US.md @@ -1,12 +1,13 @@ :: BASE_DOC :: ## API + ### Tag Props name | type | default | description | required -- | -- | -- | -- | -- closable | Boolean | false | \- | N -color | String | '' | custom color | N +color | String | - | self-defined tag color | N content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N disabled | Boolean | false | \- | N @@ -15,6 +16,7 @@ maxWidth | String / Number | - | \- | N shape | String | square | options: square/round/mark | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N theme | String | default | options: default/primary/warning/danger/success | N +title | String | - | title of tag | N variant | String | dark | options: dark/light/outline/light-outline | N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N @@ -26,12 +28,13 @@ name | params | description click | `(context: { e: MouseEvent })` | \- close | `(context: { e: MouseEvent })` | \- + ### CheckTag Props name | type | default | description | required -- | -- | -- | -- | -- -checked | Boolean | - | `v-model` and `v-model:checked` is supported | N -defaultChecked | Boolean | - | uncontrolled property | N +checked | Boolean | undefined | `v-model` and `v-model:checked` is supported | N +defaultChecked | Boolean | undefined | uncontrolled property | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N content | String / Number / Array / Slot / Function | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -39,16 +42,17 @@ disabled | Boolean | false | \- | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N value | String / Number | - | tag unique key | N -onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N ### CheckTag Events name | params | description -- | -- | -- -change | `(checked: boolean, context: CheckTagChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
+change | `(checked: boolean, context: CheckTagChangeContext) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
click | `(context: { e: MouseEvent })` | \- + ### CheckTagGroup Props name | type | default | description | required diff --git a/src/tag/tag.md b/src/tag/tag.md index 829ea09914..296061708e 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -1,12 +1,13 @@ :: BASE_DOC :: ## API + ### Tag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- closable | Boolean | false | 标签是否可关闭 | N -color | String | '' | 自定义颜色 | N +color | String | - | 自定义标签颜色 | N content | String / Slot / Function | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N @@ -15,6 +16,7 @@ maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现 shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N +title | String | - | 标签标题，在标签hover时展示，默认为标签内容 | N variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果关闭按钮存在，点击关闭按钮时触发 | N @@ -26,12 +28,13 @@ onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
click | `(context: { e: MouseEvent })` | 点击时触发 close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发 + ### CheckTag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N -defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N +checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N +defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N content | String / Number / Array / Slot / Function | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 组件子元素，默认插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -39,19 +42,20 @@ disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N -onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击标签时触发 | N ### CheckTag Events 名称 | 参数 | 描述 -- | -- | -- -change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
+change | `(checked: boolean, context: CheckTagChangeContext) ` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
click | `(context: { e: MouseEvent })` | 点击标签时触发 + ### CheckTagGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N multiple | Boolean | false | 是否支持选中多个标签 | N diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx index 3d72eb631b..c3e2bad43e 100644 --- a/src/tag/tag.tsx +++ b/src/tag/tag.tsx @@ -104,8 +104,7 @@ export default defineComponent({ const tagContent = renderContent('default', 'content'); // 图标 const icon = renderTNodeJSX('icon'); - - const title = isString(tagContent) ? tagContent : ''; + const title = renderTNodeJSX('title'); const titleAttribute = title && props.maxWidth ? title : undefined; return ( diff --git a/src/tag/type.ts b/src/tag/type.ts index 7488edd3a3..992b473ad0 100644 --- a/src/tag/type.ts +++ b/src/tag/type.ts @@ -13,7 +13,8 @@ export interface TdTagProps { */ closable?: boolean; /** - * 自定义颜色 + * 自定义标签颜色 + * @default '' */ color?: string; /** @@ -52,6 +53,11 @@ export interface TdTagProps { * @default default */ theme?: 'default' | 'primary' | 'warning' | 'danger' | 'success'; + /** + * 标签标题，在标签hover时展示，默认为标签内容 + * @default '' + */ + title?: string; /** * 标签风格变体 * @default dark From 81c785461bc625edd3b406825e098879dcd49515 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 30 Aug 2024 15:16:24 +0800 Subject: [PATCH 2/7] feat(tag): support title --- src/tag/tag.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx index c3e2bad43e..28e4c820b8 100644 --- a/src/tag/tag.tsx +++ b/src/tag/tag.tsx @@ -104,8 +104,7 @@ export default defineComponent({ const tagContent = renderContent('default', 'content'); // 图标 const icon = renderTNodeJSX('icon'); - const title = renderTNodeJSX('title'); - const titleAttribute = title && props.maxWidth ? title : undefined; + const titleAttribute = props.title && props.maxWidth ? props.title : undefined; return (
From 4277b4bf9a98c58b7dd07862dff32d5c0c219f2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 30 Aug 2024 15:21:23 +0800 Subject: [PATCH 3/7] chore: fix lint --- src/tag/tag.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx index 28e4c820b8..801e7c3ee5 100644 --- a/src/tag/tag.tsx +++ b/src/tag/tag.tsx @@ -7,7 +7,6 @@ import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfi import { useGlobalIcon } from '../hooks/useGlobalIcon'; import { useTNodeJSX, useContent } from '../hooks/tnode'; import { Styles } from '../common'; -import isString from 'lodash/isString'; export default defineComponent({ name: 'TTag', From c987cd83203fed81995d5471d5a849e7ac35c46f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 30 Aug 2024 17:39:48 +0800 Subject: [PATCH 4/7] chore: fix test case --- src/tag/__tests__/vitest-tag.test.jsx | 16 +++++++++++++++- src/tag/tag.en-US.md | 4 ++-- src/tag/tag.md | 4 ++-- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/tag/__tests__/vitest-tag.test.jsx b/src/tag/__tests__/vitest-tag.test.jsx index 4c993a33b1..6a977b129d 100644 --- a/src/tag/__tests__/vitest-tag.test.jsx +++ b/src/tag/__tests__/vitest-tag.test.jsx @@ -65,7 +65,7 @@ describe('Tag Component', () => { const domWrapper = wrapper.findComponent(Tag); expect(domWrapper.element.style.maxWidth).toBe('150px'); const domWrapper1 = wrapper.find('.t-tag--text'); - expect(domWrapper1.attributes('title')).toBe('This is a long long long long long tag'); + expect(domWrapper1.attributes('title')).toBeUndefined(); }); const shapeClassNameList = [{ 't-tag--square': false }, 't-tag--round', 't-tag--mark']; @@ -101,6 +101,20 @@ describe('Tag Component', () => { }); }); + it(`props.title is equal to This is a long long long long long tag`, () => { + const wrapper = mount( + , + ); + const domWrapper = wrapper.findComponent(Tag); + expect(domWrapper.element.style.maxWidth).toBe('150px'); + const domWrapper1 = wrapper.find('.t-tag--text'); + expect(domWrapper1.attributes('title')).toBe('This is a long long long long long tag'); + }); + ['dark', 'light', 'outline', 'light-outline'].forEach((item) => { it(`props.variant is equal to ${item}`, () => { const wrapper = mount(); diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md index d0ad3c54c8..da4d0539f5 100644 --- a/src/tag/tag.en-US.md +++ b/src/tag/tag.en-US.md @@ -42,14 +42,14 @@ disabled | Boolean | false | \- | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N value | String / Number | - | tag unique key | N -onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N ### CheckTag Events name | params | description -- | -- | -- -change | `(checked: boolean, context: CheckTagChangeContext) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
+change | `(checked: boolean, context: CheckTagChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
click | `(context: { e: MouseEvent })` | \- diff --git a/src/tag/tag.md b/src/tag/tag.md index 296061708e..37f8e5c9f1 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -42,14 +42,14 @@ disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N -onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击标签时触发 | N ### CheckTag Events 名称 | 参数 | 描述 -- | -- | -- -change | `(checked: boolean, context: CheckTagChangeContext) ` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
+change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
click | `(context: { e: MouseEvent })` | 点击标签时触发 From 3de2ffaba5f5cfa4f74a764ec55adc6514c06547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 30 Aug 2024 17:56:48 +0800 Subject: [PATCH 5/7] test: update snap --- test/unit/snap/__snapshots__/csr.test.js.snap | 2 +- test/unit/snap/__snapshots__/ssr.test.js.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index c1509b5bde..c35f4c78b4 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/test/unit/snap/__snapshots__/csr.test.js.snap @@ -163273,11 +163273,11 @@ exports[`csr snapshot test > csr test ./src/tag/_example/long-text.vue 1`] = `
默认超八个字超长文本标签超长省略文本标签 diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index e9b0e985a7..e30210ab17 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/test/unit/snap/__snapshots__/ssr.test.js.snap @@ -1222,7 +1222,7 @@ exports[`ssr snapshot test > ssr test ./src/tag/_example/disabled.vue 1`] = `" ssr test ./src/tag/_example/icon.vue 1`] = `"
函数图标
插槽图标
"`; -exports[`ssr snapshot test > ssr test ./src/tag/_example/long-text.vue 1`] = `"
默认超八个字超长文本标签超长省略文本标签
"`; +exports[`ssr snapshot test > ssr test ./src/tag/_example/long-text.vue 1`] = `"
默认超八个字超长文本标签超长省略文本标签
"`; exports[`ssr snapshot test > ssr test ./src/tag/_example/plain.vue 1`] = `"
标签一
标签二
标签三
标签四
标签五
"`; From 210cb719e96c4e67e3e47d19d8125abba2edf194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Mon, 2 Sep 2024 16:09:24 +0800 Subject: [PATCH 6/7] fix: render title --- src/tag/__tests__/vitest-tag.test.jsx | 2 +- src/tag/tag.tsx | 22 ++++++++++++++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/tag/__tests__/vitest-tag.test.jsx b/src/tag/__tests__/vitest-tag.test.jsx index 6a977b129d..64ee715d5d 100644 --- a/src/tag/__tests__/vitest-tag.test.jsx +++ b/src/tag/__tests__/vitest-tag.test.jsx @@ -65,7 +65,7 @@ describe('Tag Component', () => { const domWrapper = wrapper.findComponent(Tag); expect(domWrapper.element.style.maxWidth).toBe('150px'); const domWrapper1 = wrapper.find('.t-tag--text'); - expect(domWrapper1.attributes('title')).toBeUndefined(); + expect(domWrapper1.attributes('title')).toBe('This is a long long long long long tag'); }); const shapeClassNameList = [{ 't-tag--square': false }, 't-tag--round', 't-tag--mark']; diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx index 801e7c3ee5..b06e12771d 100644 --- a/src/tag/tag.tsx +++ b/src/tag/tag.tsx @@ -1,5 +1,6 @@ -import { computed, defineComponent, h, VNode } from 'vue'; +import { computed, defineComponent, getCurrentInstance, h, VNode } from 'vue'; import { CloseIcon as TdCloseIcon } from 'tdesign-icons-vue-next'; +import isString from 'lodash/isString'; import tinycolor from 'tinycolor2'; import props from './props'; @@ -18,6 +19,7 @@ export default defineComponent({ const renderTNodeJSX = useTNodeJSX(); const renderContent = useContent(); const { SIZE } = useCommonClassName(); + const { vnode } = getCurrentInstance(); const tagClass = computed(() => { return [ @@ -96,6 +98,19 @@ export default defineComponent({ ); }; + const renderTitle = (tagContent: string) => { + const vProps = vnode.props || {}; + if (Reflect.has(vProps, 'title') && vProps['title']) { + return props.title; + } + + if (tagContent) { + return tagContent; + } + + return undefined; + }; + return () => { // 关闭按钮 自定义组件使用 nativeOnClick 绑定事件 const closeIcon = getCloseIcon(); @@ -103,7 +118,10 @@ export default defineComponent({ const tagContent = renderContent('default', 'content'); // 图标 const icon = renderTNodeJSX('icon'); - const titleAttribute = props.title && props.maxWidth ? props.title : undefined; + + const title = renderTitle(isString(tagContent) ? tagContent : ''); + + const titleAttribute = title && props.maxWidth ? title : undefined; return (
From bce9a1f5dbd0ea00aa4dce985bcd6af4006aaa56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 3 Sep 2024 15:51:17 +0800 Subject: [PATCH 7/7] chore: update test case --- src/tag/__tests__/vitest-tag.test.jsx | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/tag/__tests__/vitest-tag.test.jsx b/src/tag/__tests__/vitest-tag.test.jsx index 64ee715d5d..fbec26772f 100644 --- a/src/tag/__tests__/vitest-tag.test.jsx +++ b/src/tag/__tests__/vitest-tag.test.jsx @@ -101,13 +101,25 @@ describe('Tag Component', () => { }); }); - it(`props.title is equal to This is a long long long long long tag`, () => { + it(`props.title is equal to This is a long tag`, () => { const wrapper = mount( - , + , + ); + const domWrapper = wrapper.findComponent(Tag); + expect(domWrapper.element.style.maxWidth).toBe('150px'); + const domWrapper1 = wrapper.find('.t-tag--text'); + expect(domWrapper1.attributes('title')).toBe('This is a long tag'); + }); + it(`props.title is equal to `, () => { + const wrapper = mount(); + const domWrapper = wrapper.findComponent(Tag); + expect(domWrapper.element.style.maxWidth).toBe('150px'); + const domWrapper1 = wrapper.find('.t-tag--text'); + expect(domWrapper1.attributes('title')).toBe('This is a long long long long long tag'); + }); + it(`props.title is equal to undefined`, () => { + const wrapper = mount( + , ); const domWrapper = wrapper.findComponent(Tag); expect(domWrapper.element.style.maxWidth).toBe('150px');