diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f7ea2d995d4..6beb4d14a5c 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -14,6 +14,7 @@ - `n-button` add `tertiary` prop. - `n-button` add `quaternary` prop. - `n-auto-complete` add `input-props` prop, closes [#1610](https://github.com/TuSimple/naive-ui/issues/1610). +- `n-input` add `select` methods, closes [#1328](https://github.com/TuSimple/naive-ui/issues/1328). - Add `n-tab` component, closes [#1630](https://github.com/TuSimple/naive-ui/issues/1630). - `n-switch` add `round` prop, closes [#1469](https://github.com/TuSimple/naive-ui/issues/1469). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 1847156f970..bc55f5ae4e0 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -14,6 +14,7 @@ - `n-button` 新增 `tertiary` 属性 - `n-button` 新增 `quaternary` 属性 - `n-auto-complete` 新增 `input-props` 属性,关闭 [#1610](https://github.com/TuSimple/naive-ui/issues/1610) +- `n-input` 新增 `select` 方法,关闭[#1328](https://github.com/TuSimple/naive-ui/issues/1328) - 新增 `n-tab` 组件,关闭 [#1630](https://github.com/TuSimple/naive-ui/issues/1630) - `n-switch` 新增 `round` 属性,关闭 [#1469](https://github.com/TuSimple/naive-ui/issues/1469) diff --git a/src/input/demos/enUS/focus.demo.md b/src/input/demos/enUS/focus.demo.md index 544ddbf2588..dcb2ed009bc 100644 --- a/src/input/demos/enUS/focus.demo.md +++ b/src/input/demos/enUS/focus.demo.md @@ -1,12 +1,13 @@ -# Focus & Blur Manually +# Focus & Blur & Select Manually ```html Focus Blur + Select - + ``` @@ -18,11 +19,15 @@ export default defineComponent({ const inputInstRef = ref(null) return { inputInstRef, + inputValue: ref("I heard you're going to Select All?"), handleFocus () { inputInstRef.value.focus() }, handleBlur () { inputInstRef.value.blur() + }, + handleSelect () { + inputInstRef.value.select() } } } diff --git a/src/input/demos/enUS/index.demo-entry.md b/src/input/demos/enUS/index.demo-entry.md index 297478cce7e..b3934b1eadb 100644 --- a/src/input/demos/enUS/index.demo-entry.md +++ b/src/input/demos/enUS/index.demo-entry.md @@ -79,7 +79,8 @@ input-props ### Input Methods -| Name | Type | Description | -| ----- | ------------ | ------------------------ | -| blur | `() => void` | Blur the input element. | -| focus | `() => void` | Focus the input element. | +| Name | Type | Description | +| ------ | ------------ | ------------------------- | +| blur | `() => void` | Blur the input element. | +| focus | `() => void` | Focus the input element. | +| select | `() => void` | Select the input element. | diff --git a/src/input/demos/zhCN/focus.demo.md b/src/input/demos/zhCN/focus.demo.md index d7cbb47adb6..407361bdcff 100644 --- a/src/input/demos/zhCN/focus.demo.md +++ b/src/input/demos/zhCN/focus.demo.md @@ -1,12 +1,13 @@ -# 手动 Focus & Blur +# 手动 Focus & Blur & Select ```html Focus Blur + Select - + ``` @@ -18,11 +19,15 @@ export default defineComponent({ const inputInstRef = ref(null) return { inputInstRef, + inputValue: ref('小孩子才做选择,听说你要Select All?'), handleFocus () { inputInstRef.value.focus() }, handleBlur () { inputInstRef.value.blur() + }, + handleSelect () { + inputInstRef.value.select() } } } diff --git a/src/input/demos/zhCN/index.demo-entry.md b/src/input/demos/zhCN/index.demo-entry.md index cd7f7da1e04..a3830be6002 100644 --- a/src/input/demos/zhCN/index.demo-entry.md +++ b/src/input/demos/zhCN/index.demo-entry.md @@ -78,7 +78,8 @@ input-props ### Input Methods -| 名称 | 类型 | 说明 | -| ----- | ------------ | ---------------- | -| blur | `() => void` | Blur input 元素 | -| focus | `() => void` | Focus input 元素 | +| 名称 | 类型 | 说明 | +| ------ | ------------ | ----------------- | +| blur | `() => void` | Blur input 元素 | +| focus | `() => void` | Focus input 元素 | +| select | `() => void` | Select input 元素 | diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx index 1ee42aa5bf8..9fedfc6f2d6 100644 --- a/src/input/src/Input.tsx +++ b/src/input/src/Input.tsx @@ -604,6 +604,10 @@ export default defineComponent({ ;(document.activeElement as HTMLElement).blur() } } + function select (): void { + textareaElRef.value?.select() + inputElRef.value?.select() + } function activate (): void { if (mergedDisabledRef.value) return if (textareaElRef.value) textareaElRef.value.focus() @@ -669,6 +673,7 @@ export default defineComponent({ isCompositing: isComposingRef, focus, blur, + select, deactivate, activate } diff --git a/src/input/src/interface.ts b/src/input/src/interface.ts index 21f81fec7cb..070351a050b 100644 --- a/src/input/src/interface.ts +++ b/src/input/src/interface.ts @@ -15,6 +15,7 @@ export interface InputWrappedRef { isCompositing: Ref blur: () => void focus: () => void + select: () => void activate: () => void deactivate: () => void }