feat(tag): support title api

src/tag/__tests__/vitest-tag.test.jsx

@@ -101,6 +101,32 @@ describe('Tag Component', () => {
     });
   });
 
+  it(`props.title is equal to This is a long tag`, () => {
+    const wrapper = mount(
+      <Tag title={'This is a long tag'} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
+    );
+    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(<Tag title={''} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>);
+    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(
+      <Tag title={undefined} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
+    );
+    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(<Tag variant={item}></Tag>);

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<TdCheckTagProps['checkedProps']>,

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<TdTagProps['variant']>,

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`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | 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
@@ -49,6 +52,7 @@ 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)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
 click | `(context: { e: MouseEvent })` | \-
 
+
 ### CheckTagGroup Props
 
 name | type | default | description | required

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`<br/>点击时触发 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
@@ -26,12 +28,13 @@ onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 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
@@ -49,9 +52,10 @@ onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
 click | `(context: { e: MouseEvent })` | 点击标签时触发
 
+
 ### CheckTagGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
 multiple | Boolean | false | 是否支持选中多个标签 | N

src/tag/tag.tsx

@@ -1,13 +1,13 @@
-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';
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 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',
@@ -19,6 +19,7 @@ export default defineComponent({
     const renderTNodeJSX = useTNodeJSX();
     const renderContent = useContent();
     const { SIZE } = useCommonClassName();
+    const { vnode } = getCurrentInstance();
 
     const tagClass = computed(() => {
       return [
@@ -97,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();
@@ -105,7 +119,8 @@ export default defineComponent({
       // 图标
       const icon = renderTNodeJSX('icon');
 
-      const title = isString(tagContent) ? tagContent : '';
+      const title = renderTitle(isString(tagContent) ? tagContent : '');
+
       const titleAttribute = title && props.maxWidth ? title : undefined;
 
       return (

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

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`] = `
 <div
   class="t-tag t-tag--default t-tag--dark t-tag--ellipsis"
   style="max-width: 150px;"
-  title="默认超八个字超长文本标签超长省略文本标签"
 >
   <!---->
   <span
     class="t-tag--text"
+    title="默认超八个字超长文本标签超长省略文本标签"
   >
 
      默认超八个字超长文本标签超长省略文本标签 

test/unit/snap/__snapshots__/ssr.test.js.snap

@@ -1222,7 +1222,7 @@ exports[`ssr snapshot test > ssr test ./src/tag/_example/disabled.vue 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test ./src/tag/_example/icon.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"\\"><svg class=\\"t-icon t-icon-discount\\" style=\\"\\"><use href=\\"#t-icon-discount\\"></use></svg><span class=\\"t-tag--text\\"><!--[-->函数图标<!--]--></span><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"\\"><!--[--><svg class=\\"t-icon t-icon-discount\\" style=\\"\\"><use href=\\"#t-icon-discount\\"></use></svg><!--]--><span class=\\"t-tag--text\\"><!--[--> 插槽图标 <!--]--></span><!----></div></div><!----><!--]--><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/tag/_example/long-text.vue 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark t-tag--ellipsis\\" style=\\"max-width:150px;\\" title=\\"默认超八个字超长文本标签超长省略文本标签\\"><!----><span class=\\"t-tag--text\\"><!--[--> 默认超八个字超长文本标签超长省略文本标签 <!--]--></span><!----></div>"`;
+exports[`ssr snapshot test > ssr test ./src/tag/_example/long-text.vue 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark t-tag--ellipsis\\" style=\\"max-width:150px;\\"><!----><span class=\\"t-tag--text\\" title=\\"默认超八个字超长文本标签超长省略文本标签\\"><!--[--> 默认超八个字超长文本标签超长省略文本标签 <!--]--></span><!----></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/tag/_example/plain.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--outline\\" style=\\"\\"><!----><span class=\\"t-tag--text\\"><!--[-->标签一<!--]--></span><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--success t-tag--outline\\" style=\\"\\"><!----><span class=\\"t-tag--text\\"><!--[-->标签二<!--]--></span><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline\\" style=\\"\\"><!----><span class=\\"t-tag--text\\"><!--[-->标签三<!--]--></span><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--warning t-tag--outline\\" style=\\"\\"><!----><span class=\\"t-tag--text\\"><!--[-->标签四<!--]--></span><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--danger t-tag--outline\\" style=\\"\\"><!----><span class=\\"t-tag--text\\"><!--[-->标签五<!--]--></span><!----></div></div><!----><!--]--><!--]--></div>"`;