diff --git a/src/tag/__tests__/vitest-tag.test.jsx b/src/tag/__tests__/vitest-tag.test.jsx
index 4c993a33b1..fbec26772f 100644
--- a/src/tag/__tests__/vitest-tag.test.jsx
+++ b/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(
+ ,
+ );
+ 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');
+ 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/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..da4d0539f5 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
@@ -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)。
`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..37f8e5c9f1 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
@@ -49,9 +52,10 @@ onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
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..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';
@@ -7,7 +8,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',
@@ -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 (
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
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`] = `""`;