feat(input-number): focus & blur methods

CHANGELOG.en-US.md

@@ -16,6 +16,7 @@
 - `n-menu` add `dropdown-props` prop, closes [#1345](https://github.com/TuSimple/naive-ui/issues/1345).
 - `n-input` add `count` slot, closes [#1314](https://github.com/TuSimple/naive-ui/issues/1314).
 - `n-time-picker` add `use-12-hours` prop, closes [#547](https://github.com/TuSimple/naive-ui/issues/547).
+- `n-input-number` add `focus` & `blur` methods.
 
 ## 2.19.8 (2021-10-14)
 

CHANGELOG.zh-CN.md

@@ -16,6 +16,7 @@
 - `n-menu` 新增 `dropdown-props` 属性，关闭 [#1345](https://github.com/TuSimple/naive-ui/issues/1345)
 - `n-input` 新增 `count` slot，关闭 [#1314](https://github.com/TuSimple/naive-ui/issues/1314)
 - `n-time-picker` 新增 `use-12-hours` 属性，关闭 [#547](https://github.com/TuSimple/naive-ui/issues/547)
+- `n-input-number` 新增 `focus` 和 `blur` 方法
 
 ## 2.19.8 (2021-10-14)
 

src/input-number/demos/enUS/icon.demo.md

@@ -1,4 +1,4 @@
-# Prefix & Suffix
+# Prefix & suffix
 
 Add prefix and suffix contents.
 

src/input-number/demos/enUS/index.demo-entry.md

@@ -42,6 +42,13 @@ show-button
 ### InputNumber Slots
 
 | Name   | Parameters | Description          |
-| ------ | ---------- | ------------------------------ |
+| ------ | ---------- | -------------------- |
 | prefix | `()`       | Prefix content slot. |
 | suffix | `()`       | Suffix content slot. |
+
+### InputNumber Methods
+
+| Name   | Type         | Description             |
+| ------ | ------------ | ----------------------- |
+| prefix | `() => void` | Focus the input number. |
+| suffix | `() => void` | Blur the input number.  |

src/input-number/demos/enUS/min-max.demo.md

@@ -1,4 +1,4 @@
-# Min and Max
+# Min and max
 
 You can set minimum and maximum values too.
 

src/input-number/demos/enUS/show-button.demo.md

@@ -1,4 +1,4 @@
-# Hide Button
+# Hide button
 
 Use `show-button` prop to control whether to show control buttons.
 

src/input-number/demos/zhCN/index.demo-entry.md

@@ -42,7 +42,14 @@ debug
 
 ### InputNumber Slots
 
-| 属性   | 类型 | 说明               |
+| 名称   | 参数 | 说明               |
 | ------ | ---- | ------------------ |
 | prefix | `()` | 输入框头部内容插槽 |
 | suffix | `()` | 输入框尾部内容插槽 |
+
+### InputNumber Methods
+
+| 名称   | 类型         | 说明     |
+| ------ | ------------ | -------- |
+| prefix | `() => void` | 聚焦输入 |
+| suffix | `() => void` | 失焦输入 |

src/input-number/index.ts

@@ -1,2 +1,3 @@
 export { default as NInputNumber } from './src/InputNumber'
 export type { InputNumberProps } from './src/InputNumber'
+export type { InputNumberInst } from './src/interface'

src/input-number/src/InputNumber.tsx

@@ -11,7 +11,7 @@ import type { ThemeProps } from '../../_mixins'
 import { warn, call, MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import { inputNumberLight, InputNumberTheme } from '../styles'
 import { parse, validator, format, parseNumber } from './utils'
-import type { OnUpdateValue } from './interface'
+import type { OnUpdateValue, InputNumberInst } from './interface'
 import style from './styles/input-number.cssr'
 
 const inputNumberProps = {
@@ -331,7 +331,12 @@ export default defineComponent({
     watch(mergedValueRef, () => {
       deriveDisplayedValueFromValue()
     })
+    const exposedMethods: InputNumberInst = {
+      focus: () => inputInstRef.value?.focus(),
+      blur: () => inputInstRef.value?.blur()
+    }
     return {
+      ...exposedMethods,
       inputInstRef,
       minusButtonInstRef,
       addButtonInstRef,

src/input-number/src/interface.ts

@@ -1 +1,5 @@
 export type OnUpdateValue = (value: number | null) => void
+export interface InputNumberInst {
+  focus: () => void
+  blur: () => void
+}