feat(input):add select methods (#1622)

* feat(n-input):add select methods, closes #1328 * Update CHANGELOG.en-US.md Co-authored-by: 勤劳上班的卑微小张 <jiazhan.zhang@ggimage.com> Co-authored-by: XieZongChen <46394163+amadeus711@users.noreply.github.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Nov 21, 2021 · 7c8de15 · 7c8de15
1 parent cf2f37e
commit 7c8de15
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 12 deletions.
diff --git 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
@@ -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
@@ -1,12 +1,13 @@
-# Focus & Blur Manually
+# Focus & Blur & Select Manually
 
 ```html
 <n-space vertical>
   <n-space>
     <n-button @click="handleFocus">Focus</n-button>
     <n-button :focusable="false" @click="handleBlur">Blur</n-button>
+    <n-button :focusable="false" @click="handleSelect">Select</n-button>
   </n-space>
-  <n-input ref="inputInstRef" />
+  <n-input ref="inputInstRef" v-model:value="inputValue" />
 </n-space>
 ```
 
@@ -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
@@ -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
@@ -1,12 +1,13 @@
-# 手动 Focus & Blur
+# 手动 Focus & Blur & Select
 
 ```html
 <n-space vertical>
   <n-space>
     <n-button @click="handleFocus">Focus</n-button>
     <n-button :focusable="false" @click="handleBlur">Blur</n-button>
+    <n-button :focusable="false" @click="handleSelect">Select</n-button>
   </n-space>
-  <n-input ref="inputInstRef" />
+  <n-input ref="inputInstRef" v-model:value="inputValue" />
 </n-space>
 ```
 
@@ -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
@@ -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
@@ -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
@@ -15,6 +15,7 @@ export interface InputWrappedRef {
   isCompositing: Ref<boolean>
   blur: () => void
   focus: () => void
+  select: () => void
   activate: () => void
   deactivate: () => void
 }