From 15b21454a7c4fed7bea5baa7bbdb156c389d923e Mon Sep 17 00:00:00 2001 From: Sepush Date: Sun, 14 Nov 2021 19:14:13 +0800 Subject: [PATCH] fix(input): input-props override the props (#1576) * fix(#1553):`input-props` override the props * fix:remove char --- CHANGELOG.en-US.md | 4 ++++ CHANGELOG.zh-CN.md | 4 ++++ src/input/demos/enUS/index.demo-entry.md | 3 ++- src/input/demos/enUS/input-props.demo.md | 30 ++++++++++++++++++++++++ src/input/demos/zhCN/index.demo-entry.md | 3 ++- src/input/demos/zhCN/input-props.demo.md | 30 ++++++++++++++++++++++++ src/input/src/Input.tsx | 5 ++-- 7 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 src/input/demos/enUS/input-props.demo.md create mode 100644 src/input/demos/zhCN/input-props.demo.md diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 6e0772d5b18..698f3d7290f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -4,6 +4,10 @@ ### Fixes +- Fix `input-props` does not set the right props, closes [#1553](https://github.com/TuSimple/naive-ui/issues/1553) + +### Fixes + - Fix `n-grid` suffix NGridItem does not set right span when collapsed, closes [#1530](https://github.com/TuSimple/naive-ui/issues/1530). - Fix `n-button` to shrink abnormally in certain scenarios when using the `circle` prop, closes [#1557](https://github.com/TuSimple/naive-ui/issues/1557). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index c057b7499f8..7100d1c45f3 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -4,6 +4,10 @@ ### Fixes +- 修复 `input-props` 无法生效的问题，关闭 [#1553](https://github.com/TuSimple/naive-ui/issues/1553) + +### Fixes + - 修复 `n-grid` 收缩时后缀 girdItem 设置的 span 不起作用，关闭 [#1530](https://github.com/TuSimple/naive-ui/issues/1530) - 修复 `n-button` 使用 `circle` 属性时在特定场景异常收缩的问题，关闭 [#1557](https://github.com/TuSimple/naive-ui/issues/1557) diff --git a/src/input/demos/enUS/index.demo-entry.md b/src/input/demos/enUS/index.demo-entry.md index 72b66bfc2b3..8c12a7fd08d 100644 --- a/src/input/demos/enUS/index.demo-entry.md +++ b/src/input/demos/enUS/index.demo-entry.md @@ -19,6 +19,7 @@ passively-activated count focus event +input-props ``` ## API @@ -32,7 +33,7 @@ event | clearable | `boolean` | `false` | Whether the input is clearable. | | default-value | `string \| [string, string] \| null` | `null` | Default value when not manually set. | | disabled | `boolean` | `false` | Whether to disable the input. | -| input-props | `HTMLInputAttributes` | `undefined` | The props of the input element inside the component. This is disabled if the `pair` property is true. | +| input-props | `HTMLInputAttributes` | `undefined` | Warning：It will override props with the same name. The props of the input element inside the component. This is disabled if the `pair` property is true.[see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) | | loading | `boolean` | `undefined` | Set loading state. If set (true/false), the element will always take up enough space for the loading indicator. | | maxlength | `number` | `undefined` | Maximum input length. | | minlength | `number` | `undefined` | Minimum input length. | diff --git a/src/input/demos/enUS/input-props.demo.md b/src/input/demos/enUS/input-props.demo.md new file mode 100644 index 00000000000..6ed0d7e9840 --- /dev/null +++ b/src/input/demos/enUS/input-props.demo.md @@ -0,0 +1,30 @@ +# InputProps + +the original input props + +```html + + + + +``` + +```js +import { defineComponent, ref } from 'vue' + +export default defineComponent({ + setup () { + return { + value: ref(null) + } + } +}) +``` diff --git a/src/input/demos/zhCN/index.demo-entry.md b/src/input/demos/zhCN/index.demo-entry.md index a679fcf2b4b..0fb70b6cf27 100644 --- a/src/input/demos/zhCN/index.demo-entry.md +++ b/src/input/demos/zhCN/index.demo-entry.md @@ -18,6 +18,7 @@ input-group passively-activated count focus +input-props ``` ## API @@ -31,7 +32,7 @@ focus | clearable | `boolean` | `false` | 是否可清空 | | default-value | `string \| [string, string] \| null` | `null` | 输入框默认值 | | disabled | `boolean` | `false` | 是否禁用 | -| input-props | `HTMLInputAttributes` | `undefined` | 组件中 input 元素的属性，对 `pair` 类型不生效 | +| input-props | `HTMLInputAttributes` | `undefined` | 警告：input-props 会覆盖同名 props 组件中 input 元素的属性，对 `pair` 类型不生效 [在这里查看原生属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) | | loading | `boolean` | `undefined` | 是否展示加载图标，设为非 `undefined` 会占据空间 | | maxlength | `number` | `undefined` | 最大输入长度 | | minlength | `number` | `undefined` | 最小输入长度 | diff --git a/src/input/demos/zhCN/input-props.demo.md b/src/input/demos/zhCN/input-props.demo.md new file mode 100644 index 00000000000..6421b703c92 --- /dev/null +++ b/src/input/demos/zhCN/input-props.demo.md @@ -0,0 +1,30 @@ +# 原生属性 + +想来它本应如此，这是它最初的样子 + +```html + + + + +``` + +```js +import { defineComponent, ref } from 'vue' + +export default defineComponent({ + setup () { + return { + value: ref(null) + } + } +}) +``` diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx index 627866f825b..218b51b6ed7 100644 --- a/src/input/src/Input.tsx +++ b/src/input/src/Input.tsx @@ -201,7 +201,6 @@ export default defineComponent({ return [placeholder] as [string] } }) - const showPlaceholder1Ref = computed(() => { const { value: isComposing } = isComposingRef const { value: mergedValue } = mergedValueRef @@ -876,7 +875,6 @@ export default defineComponent({ {this.type === 'textarea' ? (