diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 18ab580def4..f36ed1c2e7f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,15 @@ # CHANGELOG +## NEXT_VERSION + +`xxxx-xx-xx` + +### Fixes + +### Features + +- `n-tag` adds `content-style` prop. + ## 2.40.2 `2025-11-26` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index b5516d55484..c60dcb6d2ae 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,15 @@ # CHANGELOG +## NEXT_VERSION + +`xxxx-xx-xx` + +### Fixes + +### Features + +- `n-tag` 新增 `content-style` 属性 + ## 2.40.2 `2025-11-26` diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md index c83d654ed33..b18556ebf64 100644 --- a/src/tag/demos/enUS/index.demo-entry.md +++ b/src/tag/demos/enUS/index.demo-entry.md @@ -28,6 +28,7 @@ icon.vue | checked | `boolean` | `false` | Whether the tag is checked. Note: used with `checkable`. | | | closable | `boolean` | `false` | Whether the tag shows a close button. | | | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | Color of the tag. Note: this will override the type property's color. | | +| content-style | `string \| Object` | `undefined` | Content style of the tag. | NEXT-VERSION | | disabled | `boolean` | `false` | Whether the tag is disabled. | | | round | `boolean` | `false` | Whether the tag has rounded corners. | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. | | diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md index ffbbcbc0e08..fd994226176 100644 --- a/src/tag/demos/zhCN/index.demo-entry.md +++ b/src/tag/demos/zhCN/index.demo-entry.md @@ -29,6 +29,7 @@ rtl-debug.vue | checked | `boolean` | `false` | 是否被选中,配合 checkable 一起使用 | | | closable | `boolean` | `false` | 是否可关闭 | | | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | 标签颜色,设置该项后 `type` 无效 | | +| content-style | `string \| Object` | `undefined` | tag 内容的样式 | NEXT_VERSION | | disabled | `boolean` | `false` | 是否禁用 | | | round | `boolean` | `false` | 是否圆角 | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | | diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx index 6425c7dbf5d..96b0618bca6 100644 --- a/src/tag/src/Tag.tsx +++ b/src/tag/src/Tag.tsx @@ -45,6 +45,7 @@ export const tagProps = { }, checked: Boolean, checkable: Boolean, + contentStyle: [Object, String] as PropType, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function] as PropType void>>, @@ -259,6 +260,7 @@ export default defineComponent({ rtlEnabled, closable, color: { borderColor } = {}, + contentStyle, round, onRender, $slots @@ -299,7 +301,11 @@ export default defineComponent({ onMouseleave={this.onMouseleave} > {iconNode || avatarNode} - + {this.$slots.default?.()} {!this.checkable && closable ? ( diff --git a/src/tag/tests/Tag.spec.ts b/src/tag/tests/Tag.spec.ts index a02fb03cadd..8d577a96443 100644 --- a/src/tag/tests/Tag.spec.ts +++ b/src/tag/tests/Tag.spec.ts @@ -166,4 +166,17 @@ describe('n-tag', () => { '--n-merged-size: var(--n-avatar-size-override, 34px);' ) }) + + it('should work with `content-style` prop', () => { + const wrapper = mount(NTag, { + props: { + contentStyle: { + color: 'rgb(204, 204, 204)' + } + } + }) + expect(wrapper.find('.n-tag__content').attributes('style')).toContain( + 'color: rgb(204, 204, 204);' + ) + }) })