diff --git a/db/TDesign.db b/db/TDesign.db
index 4ec289c2f..955f057ab 100644
Binary files a/db/TDesign.db and b/db/TDesign.db differ
diff --git a/packages/products/tdesign-react/src/tag/defaultProps.ts b/packages/products/tdesign-react/src/tag/defaultProps.ts
index 0ba55a0ee..8a9cebe30 100644
--- a/packages/products/tdesign-react/src/tag/defaultProps.ts
+++ b/packages/products/tdesign-react/src/tag/defaultProps.ts
@@ -2,7 +2,7 @@
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
-import { TdTagProps, TdCheckTagProps } from './type';
+import { TdTagProps, TdCheckTagProps, TdCheckTagGroupProps } from './type';
export const tagDefaultProps: TdTagProps = {
closable: false,
@@ -15,3 +15,5 @@ export const tagDefaultProps: TdTagProps = {
};
export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' };
+
+export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] };
diff --git a/packages/products/tdesign-react/src/tag/tag.en-US.md b/packages/products/tdesign-react/src/tag/tag.en-US.md
index 9f860270b..9540a520b 100644
--- a/packages/products/tdesign-react/src/tag/tag.en-US.md
+++ b/packages/products/tdesign-react/src/tag/tag.en-US.md
@@ -6,32 +6,52 @@
name | type | default | description | required
-- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式,Typescript:`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
closable | Boolean | false | \- | N
+color | String | - | self-defined tag color | N
content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
icon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
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-react/blob/develop/src/common.ts) | N
-theme | String | default | options:default/primary/warning/danger/success | N
-variant | String | dark | options:dark/light/outline/light-outline | 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-react/blob/develop/src/common.ts) | N
+theme | String | default | options: default/primary/warning/danger/success | 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
+
### CheckTag Props
name | type | default | description | required
-- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式,Typescript:`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
checked | Boolean | - | \- | N
defaultChecked | Boolean | - | uncontrolled property | N
+checkedProps | Object | - | used to set checked tag props。Typescript:`TdTagProps` | N
children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | Typescript:`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
-size | String | medium | options:small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onChange | Function | | Typescript:`(checked: boolean) => void`
| N
+size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/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-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N
+
+
+### CheckTagGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
+checkedProps | Object | - | used to set checked tag props。Typescript:`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript:`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript:`TdTagProps` | N
+value | Array | [] | selected tag value list。Typescript:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+onChange | Function | | Typescript:`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
diff --git a/packages/products/tdesign-react/src/tag/tag.md b/packages/products/tdesign-react/src/tag/tag.md
index a8aa27949..2c065b96d 100644
--- a/packages/products/tdesign-react/src/tag/tag.md
+++ b/packages/products/tdesign-react/src/tag/tag.md
@@ -4,12 +4,13 @@
### Tag Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
children | TNode | - | 组件子元素,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
closable | Boolean | false | 标签是否可关闭 | N
+color | String | - | 自定义标签颜色 | N
content | TNode | - | 组件子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N
icon | TElement | undefined | 标签中的图标,可自定义图标呈现。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -21,17 +22,36 @@ variant | String | dark | 标签风格变体。可选项:dark/light/outline/li
onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击时触发 | N
onClose | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
如果关闭按钮存在,点击关闭按钮时触发 | N
+
### CheckTag Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
checked | Boolean | - | 标签选中的状态,默认风格(theme=default)才有选中态 | N
defaultChecked | Boolean | - | 标签选中的状态,默认风格(theme=default)才有选中态。非受控属性 | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型:`TdTagProps` | N
children | TNode | - | 组件子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | 组件子元素;传入数组时:[选中内容,非选中内容]。TS 类型:`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N
size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onChange | Function | | TS 类型:`(checked: boolean) => void`
状态切换时触发 | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型:`TdTagProps` | N
+value | String / Number | - | 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置 | N
+onChange | Function | | TS 类型:`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击标签时触发 | N
+
+
+### CheckTagGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型:`TdTagProps` | N
+multiple | Boolean | false | 是否支持选中多个标签 | N
+options | Array | - | 标签选项列表。TS 类型:`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型:`TdTagProps` | N
+value | Array | [] | 选中标签值。TS 类型:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+onChange | Function | | TS 类型:`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
diff --git a/packages/products/tdesign-react/src/tag/type.ts b/packages/products/tdesign-react/src/tag/type.ts
index bb3438e74..db009a705 100644
--- a/packages/products/tdesign-react/src/tag/type.ts
+++ b/packages/products/tdesign-react/src/tag/type.ts
@@ -5,7 +5,7 @@
* */
import { TNode, TElement, SizeEnum } from '../common';
-import { MouseEvent } from 'react';
+import { MouseEvent, KeyboardEvent } from 'react';
export interface TdTagProps {
/**
@@ -17,6 +17,11 @@ export interface TdTagProps {
* @default false
*/
closable?: boolean;
+ /**
+ * 自定义标签颜色
+ * @default ''
+ */
+ color?: string;
/**
* 组件子元素
*/
@@ -73,6 +78,10 @@ export interface TdCheckTagProps {
* 标签选中的状态,默认风格(theme=default)才有选中态,非受控属性
*/
defaultChecked?: boolean;
+ /**
+ * 透传标签选中态属性
+ */
+ checkedProps?: TdTagProps;
/**
* 组件子元素
*/
@@ -91,12 +100,72 @@ export interface TdCheckTagProps {
* @default medium
*/
size?: SizeEnum;
+ /**
+ * 透传标签未选态属性
+ */
+ uncheckedProps?: TdTagProps;
+ /**
+ * 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置
+ */
+ value?: string | number;
/**
* 状态切换时触发
*/
- onChange?: (checked: boolean) => void;
+ onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
/**
* 点击标签时触发
*/
onClick?: (context: { e: MouseEvent }) => void;
}
+
+export interface TdCheckTagGroupProps {
+ /**
+ * 透传标签选中态属性
+ */
+ checkedProps?: TdTagProps;
+ /**
+ * 是否支持选中多个标签
+ * @default false
+ */
+ multiple?: boolean;
+ /**
+ * 标签选项列表
+ */
+ options?: CheckTagGroupOption[];
+ /**
+ * 透传标签未选态属性
+ */
+ uncheckedProps?: TdTagProps;
+ /**
+ * 选中标签值
+ * @default []
+ */
+ value?: CheckTagGroupValue;
+ /**
+ * 选中标签值,非受控属性
+ * @default []
+ */
+ defaultValue?: CheckTagGroupValue;
+ /**
+ * null
+ */
+ onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+ e: MouseEvent | KeyboardEvent;
+ value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+ label: string | TNode;
+ value: string | number;
+}
+
+export type CheckTagGroupValue = Array;
+
+export interface CheckTagGroupChangeContext {
+ type: 'check' | 'uncheck';
+ e: MouseEvent | KeyboardEvent;
+ value: string | number;
+}
diff --git a/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts b/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts
new file mode 100644
index 000000000..f0d8dafac
--- /dev/null
+++ b/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCheckTagGroupProps } from '../tag/type';
+import { PropType } from 'vue';
+
+export default {
+ /** 透传标签选中态属性 */
+ checkedProps: {
+ type: Object as PropType,
+ },
+ /** 是否支持选中多个标签 */
+ multiple: Boolean,
+ /** 标签选项列表 */
+ options: {
+ type: Array as PropType,
+ },
+ /** 透传标签未选态属性 */
+ uncheckedProps: {
+ type: Object as PropType,
+ },
+ /** 选中标签值 */
+ value: {
+ type: Array as PropType,
+ default: undefined as TdCheckTagGroupProps['value'],
+ },
+ modelValue: {
+ type: Array as PropType,
+ default: undefined as TdCheckTagGroupProps['value'],
+ },
+ /** 选中标签值,非受控属性 */
+ defaultValue: {
+ type: Array as PropType,
+ default: (): TdCheckTagGroupProps['defaultValue'] => [],
+ },
+ /** null */
+ onChange: Function as PropType,
+};
diff --git a/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts b/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
index a1e391c6f..c3e943dae 100644
--- a/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
+++ b/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
@@ -19,6 +19,10 @@ export default {
},
/** 标签选中的状态,默认风格(theme=default)才有选中态,非受控属性 */
defaultChecked: Boolean,
+ /** 透传标签选中态属性 */
+ checkedProps: {
+ type: Object as PropType,
+ },
/** 组件子元素;传入数组时:[选中内容,非选中内容] */
content: {
type: [String, Number, Array, Function] as PropType,
@@ -38,6 +42,14 @@ export default {
return ['small', 'medium', 'large'].includes(val);
},
},
+ /** 透传标签未选态属性 */
+ uncheckedProps: {
+ type: Object as PropType,
+ },
+ /** 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置 */
+ value: {
+ type: [String, Number] as PropType,
+ },
/** 状态切换时触发 */
onChange: Function as PropType,
/** 点击标签时触发 */
diff --git a/packages/products/tdesign-vue-next/src/tag/props.ts b/packages/products/tdesign-vue-next/src/tag/props.ts
index 501789dcb..02b65a9d6 100644
--- a/packages/products/tdesign-vue-next/src/tag/props.ts
+++ b/packages/products/tdesign-vue-next/src/tag/props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
export default {
/** 标签是否可关闭 */
closable: Boolean,
+ /** 自定义标签颜色 */
+ color: {
+ type: String,
+ default: '',
+ },
/** 组件子元素 */
content: {
type: [String, Function] as PropType,
diff --git a/packages/products/tdesign-vue-next/src/tag/tag.en-US.md b/packages/products/tdesign-vue-next/src/tag/tag.en-US.md
index 1503fe3b6..3a1a82322 100644
--- a/packages/products/tdesign-vue-next/src/tag/tag.en-US.md
+++ b/packages/products/tdesign-vue-next/src/tag/tag.en-US.md
@@ -7,15 +7,16 @@
name | type | default | description | required
-- | -- | -- | -- | --
closable | Boolean | false | \- | 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
icon | Slot / Function | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
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
-variant | String | dark | options:dark/light/outline/light-outline | 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
+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,22 +27,45 @@ 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
+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
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
-onChange | Function | | Typescript:`(checked: boolean) => void`
| 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
onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N
### CheckTag Events
name | params | description
-- | -- | --
-change | `(checked: boolean)` | \-
+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
+-- | -- | -- | -- | --
+checkedProps | Object | - | used to set checked tag props。Typescript:`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript:`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript:`TdTagProps` | N
+value | Array | [] | selected tag value list。`v-model` and `v-model:value` is supported。Typescript:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+onChange | Function | | Typescript:`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
+
+### CheckTagGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
diff --git a/packages/products/tdesign-vue-next/src/tag/tag.md b/packages/products/tdesign-vue-next/src/tag/tag.md
index d4dbbd432..4cb888074 100644
--- a/packages/products/tdesign-vue-next/src/tag/tag.md
+++ b/packages/products/tdesign-vue-next/src/tag/tag.md
@@ -4,9 +4,10 @@
### Tag Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
closable | Boolean | false | 标签是否可关闭 | 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
@@ -26,22 +27,45 @@ 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
+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
disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N
size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-onChange | Function | | TS 类型:`(checked: boolean) => void`
状态切换时触发 | 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
onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击标签时触发 | N
### CheckTag Events
名称 | 参数 | 描述
-- | -- | --
-change | `(checked: boolean)` | 状态切换时触发
+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
+options | Array | - | 标签选项列表。TS 类型:`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型:`TdTagProps` | N
+value | Array | [] | 选中标签值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+onChange | Function | | TS 类型:`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
+
+### CheckTagGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
diff --git a/packages/products/tdesign-vue-next/src/tag/type.ts b/packages/products/tdesign-vue-next/src/tag/type.ts
index c36ccf637..dde25102b 100644
--- a/packages/products/tdesign-vue-next/src/tag/type.ts
+++ b/packages/products/tdesign-vue-next/src/tag/type.ts
@@ -12,6 +12,11 @@ export interface TdTagProps {
* @default false
*/
closable?: boolean;
+ /**
+ * 自定义标签颜色
+ * @default ''
+ */
+ color?: string;
/**
* 组件子元素
*/
@@ -76,6 +81,10 @@ export interface TdCheckTagProps {
* 标签选中的状态,默认风格(theme=default)才有选中态
*/
modelValue?: boolean;
+ /**
+ * 透传标签选中态属性
+ */
+ checkedProps?: TdTagProps;
/**
* 组件子元素;传入数组时:[选中内容,非选中内容]
*/
@@ -94,12 +103,77 @@ export interface TdCheckTagProps {
* @default medium
*/
size?: SizeEnum;
+ /**
+ * 透传标签未选态属性
+ */
+ uncheckedProps?: TdTagProps;
+ /**
+ * 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置
+ */
+ value?: string | number;
/**
* 状态切换时触发
*/
- onChange?: (checked: boolean) => void;
+ onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
/**
* 点击标签时触发
*/
onClick?: (context: { e: MouseEvent }) => void;
}
+
+export interface TdCheckTagGroupProps {
+ /**
+ * 透传标签选中态属性
+ */
+ checkedProps?: TdTagProps;
+ /**
+ * 是否支持选中多个标签
+ * @default false
+ */
+ multiple?: boolean;
+ /**
+ * 标签选项列表
+ */
+ options?: CheckTagGroupOption[];
+ /**
+ * 透传标签未选态属性
+ */
+ uncheckedProps?: TdTagProps;
+ /**
+ * 选中标签值
+ * @default []
+ */
+ value?: CheckTagGroupValue;
+ /**
+ * 选中标签值,非受控属性
+ * @default []
+ */
+ defaultValue?: CheckTagGroupValue;
+ /**
+ * 选中标签值
+ * @default []
+ */
+ modelValue?: CheckTagGroupValue;
+ /**
+ * null
+ */
+ onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+ e: MouseEvent | KeyboardEvent;
+ value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+ label: string | TNode;
+ value: string | number;
+}
+
+export type CheckTagGroupValue = Array;
+
+export interface CheckTagGroupChangeContext {
+ type: 'check' | 'uncheck';
+ e: MouseEvent | KeyboardEvent;
+ value: string | number;
+}
diff --git a/packages/products/tdesign-vue/src/tag/check-tag-group-props.ts b/packages/products/tdesign-vue/src/tag/check-tag-group-props.ts
new file mode 100644
index 000000000..f735d2599
--- /dev/null
+++ b/packages/products/tdesign-vue/src/tag/check-tag-group-props.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCheckTagGroupProps } from '../tag/type';
+import { PropType } from 'vue';
+
+export default {
+ /** 透传标签选中态属性 */
+ checkedProps: {
+ type: Object as PropType,
+ },
+ /** 是否支持选中多个标签 */
+ multiple: Boolean,
+ /** 标签选项列表 */
+ options: {
+ type: Array as PropType,
+ },
+ /** 透传标签未选态属性 */
+ uncheckedProps: {
+ type: Object as PropType,
+ },
+ /** 选中标签值 */
+ value: {
+ type: Array as PropType,
+ default: (): TdCheckTagGroupProps['value'] => [],
+ },
+ /** 选中标签值,非受控属性 */
+ defaultValue: {
+ type: Array as PropType,
+ default: (): TdCheckTagGroupProps['defaultValue'] => [],
+ },
+ /** null */
+ onChange: Function as PropType,
+};
diff --git a/packages/products/tdesign-vue/src/tag/check-tag-props.ts b/packages/products/tdesign-vue/src/tag/check-tag-props.ts
index 47a187aa6..d08eb4455 100644
--- a/packages/products/tdesign-vue/src/tag/check-tag-props.ts
+++ b/packages/products/tdesign-vue/src/tag/check-tag-props.ts
@@ -12,6 +12,10 @@ export default {
checked: Boolean,
/** 标签选中的状态,默认风格(theme=default)才有选中态,非受控属性 */
defaultChecked: Boolean,
+ /** 透传标签选中态属性 */
+ checkedProps: {
+ type: Object as PropType,
+ },
/** 组件子元素;传入数组时:[选中内容,非选中内容] */
content: {
type: [String, Number, Array, Function] as PropType,
@@ -31,6 +35,14 @@ export default {
return ['small', 'medium', 'large'].includes(val);
},
},
+ /** 透传标签未选态属性 */
+ uncheckedProps: {
+ type: Object as PropType,
+ },
+ /** 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置 */
+ value: {
+ type: [String, Number] as PropType,
+ },
/** 状态切换时触发 */
onChange: Function as PropType,
/** 点击标签时触发 */
diff --git a/packages/products/tdesign-vue/src/tag/props.ts b/packages/products/tdesign-vue/src/tag/props.ts
index 501789dcb..02b65a9d6 100644
--- a/packages/products/tdesign-vue/src/tag/props.ts
+++ b/packages/products/tdesign-vue/src/tag/props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
export default {
/** 标签是否可关闭 */
closable: Boolean,
+ /** 自定义标签颜色 */
+ color: {
+ type: String,
+ default: '',
+ },
/** 组件子元素 */
content: {
type: [String, Function] as PropType,
diff --git a/packages/products/tdesign-vue/src/tag/tag.en-US.md b/packages/products/tdesign-vue/src/tag/tag.en-US.md
index a1962f60c..04a34b22b 100644
--- a/packages/products/tdesign-vue/src/tag/tag.en-US.md
+++ b/packages/products/tdesign-vue/src/tag/tag.en-US.md
@@ -7,15 +7,16 @@
name | type | default | description | required
-- | -- | -- | -- | --
closable | Boolean | false | \- | 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/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
icon | Slot / Function | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
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/blob/develop/src/common.ts) | N
-theme | String | default | options:default/primary/warning/danger/success | N
-variant | String | dark | options:dark/light/outline/light-outline | 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/blob/develop/src/common.ts) | N
+theme | String | default | options: default/primary/warning/danger/success | 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,22 +27,45 @@ name | params | description
click | `(context: { e: MouseEvent })` | \-
close | `(context: { e: MouseEvent })` | \-
+
### CheckTag Props
name | type | default | description | required
-- | -- | -- | -- | --
checked | Boolean | - | `v-model` is supported | N
defaultChecked | Boolean | - | 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/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
-size | String | medium | options:small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-onChange | Function | | Typescript:`(checked: boolean) => void`
| N
+size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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)` | \-
+change | `(checked: boolean, context: CheckTagChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/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
+-- | -- | -- | -- | --
+checkedProps | Object | - | used to set checked tag props。Typescript:`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript:`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript:`TdTagProps` | N
+value | Array | [] | selected tag value list。`v-model` is supported。Typescript:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+onChange | Function | | Typescript:`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
+
+### CheckTagGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
diff --git a/packages/products/tdesign-vue/src/tag/tag.md b/packages/products/tdesign-vue/src/tag/tag.md
index 264c2523c..20faa6ef4 100644
--- a/packages/products/tdesign-vue/src/tag/tag.md
+++ b/packages/products/tdesign-vue/src/tag/tag.md
@@ -4,9 +4,10 @@
### Tag Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
closable | Boolean | false | 标签是否可关闭 | N
+color | String | - | 自定义标签颜色 | N
content | String / Slot / Function | - | 组件子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 组件子元素,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N
@@ -26,22 +27,45 @@ onClose | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
click | `(context: { e: MouseEvent })` | 点击时触发
close | `(context: { e: MouseEvent })` | 如果关闭按钮存在,点击关闭按钮时触发
+
### CheckTag Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
checked | Boolean | - | 标签选中的状态,默认风格(theme=default)才有选中态。支持语法糖 `v-model` | N
defaultChecked | Boolean | - | 标签选中的状态,默认风格(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/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 组件子元素,默认插槽。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N
size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-onChange | Function | | TS 类型:`(checked: boolean) => void`
状态切换时触发 | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型:`TdTagProps` | N
+value | String / Number | - | 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置 | N
+onChange | Function | | TS 类型:`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/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)` | 状态切换时触发
+change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/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
+options | Array | - | 标签选项列表。TS 类型:`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型:`TdTagProps` | N
+value | Array | [] | 选中标签值。支持语法糖 `v-model`。TS 类型:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型:`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+onChange | Function | | TS 类型:`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N
+
+### CheckTagGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
diff --git a/packages/products/tdesign-vue/src/tag/type.ts b/packages/products/tdesign-vue/src/tag/type.ts
index 4f49d0b41..13655a6f2 100644
--- a/packages/products/tdesign-vue/src/tag/type.ts
+++ b/packages/products/tdesign-vue/src/tag/type.ts
@@ -12,6 +12,11 @@ export interface TdTagProps {
* @default false
*/
closable?: boolean;
+ /**
+ * 自定义标签颜色
+ * @default ''
+ */
+ color?: string;
/**
* 组件子元素
*/
@@ -72,6 +77,10 @@ export interface TdCheckTagProps {
* 标签选中的状态,默认风格(theme=default)才有选中态,非受控属性
*/
defaultChecked?: boolean;
+ /**
+ * 透传标签选中态属性
+ */
+ checkedProps?: TdTagProps;
/**
* 组件子元素;传入数组时:[选中内容,非选中内容]
*/
@@ -90,12 +99,72 @@ export interface TdCheckTagProps {
* @default medium
*/
size?: SizeEnum;
+ /**
+ * 透传标签未选态属性
+ */
+ uncheckedProps?: TdTagProps;
+ /**
+ * 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置
+ */
+ value?: string | number;
/**
* 状态切换时触发
*/
- onChange?: (checked: boolean) => void;
+ onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
/**
* 点击标签时触发
*/
onClick?: (context: { e: MouseEvent }) => void;
}
+
+export interface TdCheckTagGroupProps {
+ /**
+ * 透传标签选中态属性
+ */
+ checkedProps?: TdTagProps;
+ /**
+ * 是否支持选中多个标签
+ * @default false
+ */
+ multiple?: boolean;
+ /**
+ * 标签选项列表
+ */
+ options?: CheckTagGroupOption[];
+ /**
+ * 透传标签未选态属性
+ */
+ uncheckedProps?: TdTagProps;
+ /**
+ * 选中标签值
+ * @default []
+ */
+ value?: CheckTagGroupValue;
+ /**
+ * 选中标签值,非受控属性
+ * @default []
+ */
+ defaultValue?: CheckTagGroupValue;
+ /**
+ * null
+ */
+ onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+ e: MouseEvent | KeyboardEvent;
+ value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+ label: string | TNode;
+ value: string | number;
+}
+
+export type CheckTagGroupValue = Array;
+
+export interface CheckTagGroupChangeContext {
+ type: 'check' | 'uncheck';
+ e: MouseEvent | KeyboardEvent;
+ value: string | number;
+}
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
index 08168d328..854189219 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -102398,6 +102398,47 @@
"Boolean"
]
},
+ {
+ "id": 1710397655,
+ "platform_framework": [
+ "1",
+ "2",
+ "4"
+ ],
+ "component": "Tag",
+ "field_category": 1,
+ "field_name": "color",
+ "field_type": [
+ "1"
+ ],
+ "field_default_value": "",
+ "field_enum": "",
+ "field_desc_zh": "自定义标签颜色",
+ "field_desc_en": "self-defined tag color ",
+ "field_required": 0,
+ "event_input": "",
+ "create_time": "2024-03-14 06:27:35",
+ "update_time": "2024-03-14 06:27:35",
+ "event_output": null,
+ "custom_field_type": null,
+ "syntactic_sugar": null,
+ "readonly": 1,
+ "html_attribute": 0,
+ "trigger_elements": "",
+ "deprecated": 0,
+ "version": "",
+ "test_description": null,
+ "support_default_value": 0,
+ "field_category_text": "Props",
+ "platform_framework_text": [
+ "Vue(PC)",
+ "React(PC)",
+ "Angular(PC)"
+ ],
+ "field_type_text": [
+ "String"
+ ]
+ },
{
"id": 733,
"platform_framework": [