diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index aeb32b8129f..a8c7ba15277 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -23,6 +23,7 @@ - `n-card` adds `content-class`, `footer-class`, `header-class` and `header-extra-class` props. - `n-descriptions` adds `content-class` and `label-class` props. - `n-upload` adds `file-list-class` and `trigger-class` props. +- `n-dynamic-input` adds `input-class` and `tag-class` props. ## 2.35.0 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index a8c6f72f75a..4f2f9365368 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -23,6 +23,7 @@ - `n-card` 新增 `content-class`、`footer-class`、`header-class` 和 `header-extra-class` 属性 - `n-descriptions` 新增 `content-class` 和 `label-class` 属性 - `n-upload` 新增 `file-list-class` 和 `trigger-class` 属性 +- `n-dynamic-input` 新增 `input-class` 和 `tag-class` 属性 ## 2.35.0 diff --git a/src/dynamic-tags/demos/enUS/index.demo-entry.md b/src/dynamic-tags/demos/enUS/index.demo-entry.md index 63189a69070..90c4c3a09ee 100644 --- a/src/dynamic-tags/demos/enUS/index.demo-entry.md +++ b/src/dynamic-tags/demos/enUS/index.demo-entry.md @@ -25,11 +25,13 @@ on-create.vue | default-value | `string[]` | `[]` | Default value. | | | disabled | `boolean` | `false` | Whether the tag is disabled. | | | input-props | `InputProps` | `undefined` | Props of internal `n-input`. | 2.25.0 | +| input-class | `string` | `undefined` | Customize the class of the input. | NEXT_VERSION | | input-style | `string \| Object` | `undefined` | Customize the style of the input. | | | max | `number` | `undefined` | Maximum number of tags. | | | round | `boolean` | `false` | Whether the tag has rounded corners. | | | render-tag | `((tag: string, index: number) => VNodeChild) \| ((tag: { label: string, value: string }, index: number) => VNodeChild)` | `undefined` | custom render tag. | 2.27.0 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. | | +| tag-class | `string` | `undefined` | Customize the class of the tag. | NEXT_VERSION | | tag-style | `string \| Object` | `undefined` | Customize the style of the tag. | | | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. | | | value | `string[]` | `undefined` | Value if manually set. | | diff --git a/src/dynamic-tags/demos/zhCN/index.demo-entry.md b/src/dynamic-tags/demos/zhCN/index.demo-entry.md index 5218ba0896a..c2ffa095ca4 100644 --- a/src/dynamic-tags/demos/zhCN/index.demo-entry.md +++ b/src/dynamic-tags/demos/zhCN/index.demo-entry.md @@ -25,11 +25,13 @@ on-create.vue | default-value | `string[] \| Array<{ label: string, value: string }>` | `[]` | 非受控模式下的默认值 | | | disabled | `boolean` | `false` | 是否禁用 | | | input-props | `InputProps` | `undefined` | 内部 `n-input` 组件的属性 | 2.25.0 | +| input-class | `string` | `undefined` | 自定义输入框的类名 | NEXT_VERSION | | input-style | `string \| Object` | `undefined` | 自定义输入框的样式 | | | max | `number` | `undefined` | tag 的最大数量 | | | round | `boolean` | `false` | 是否圆角 | | | render-tag | `((tag: string, index: number) => VNodeChild) \| ((tag: { label: string, value: string }, index: number) => VNodeChild)` | `undefined` | 自定义渲染 tag | 2.27.0 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 | | +| tag-class | `string` | `undefined` | 自定义标签的类名 | NEXT_VERSION | | tag-style | `string \| Object` | `undefined` | 自定义标签的样式 | | | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 标签类型 | | | value | `string[] \| Array<{ label: string, value: string }>` | `undefined` | 受控模式下的值 | | diff --git a/src/dynamic-tags/src/DynamicTags.tsx b/src/dynamic-tags/src/DynamicTags.tsx index 919ab8cee74..09b70824c1d 100644 --- a/src/dynamic-tags/src/DynamicTags.tsx +++ b/src/dynamic-tags/src/DynamicTags.tsx @@ -55,9 +55,11 @@ export const dynamicTagsProps = { default: () => [] }, value: Array as PropType>, + inputClass: String, inputStyle: [String, Object] as PropType, inputProps: Object as PropType, max: Number as PropType, + tagClass: String, tagStyle: [String, Object] as PropType, renderTag: Function as PropType< | ((tag: string, index: number) => VNodeChild) @@ -218,6 +220,7 @@ export default defineComponent({ default: () => { const { mergedTheme, + tagClass, tagStyle, type, round, @@ -227,6 +230,7 @@ export default defineComponent({ mergedDisabled, showInput, inputValue, + inputClass, inputStyle, inputSize, inputForceFocused, @@ -247,6 +251,7 @@ export default defineComponent({ key={index} theme={mergedTheme.peers.Tag} themeOverrides={mergedTheme.peerOverrides.Tag} + class={tagClass} style={tagStyle} type={type} round={round} @@ -276,6 +281,7 @@ export default defineComponent({ placeholder="" size={inputSize} style={inputStyle} + class={inputClass} autosize {...this.inputProps} ref="inputInstRef"