在前端开发中，表单输入框是必不可少的一个元素，而数值输入框是其中的一个类型。input-number 就是一个针对数值输入框的 npm 包，它能够方便地实现数值输入框的可编辑、键盘输入、按钮调整等功能，并且支持自定义样式和属性。
安装
要使用 input-number，需要先安装它：
npm install input-number --save
或者使用 Yarn 安装：
yarn add input-number
基本用法
使用 input-number 很简单，只需要在 HTML 中添加一个 <input> 标签，并使用 JavaScript 创建一个 InputNumber 实例即可。以下是一个基本的示例：
<input id="my-input" type="number" min="0" max="100" />
<script>
import InputNumber from 'input-number'
const input = document.getElementById('my-input')
const inputNumber = new InputNumber(input)
</script>在使用之前，需要先引入 input-number：
import InputNumber from 'input-number'
然后，将原本的 <input> 标签传递给 InputNumber 构造函数，即可创建一个 InputNumber 实例。这里，我们将输入框的 DOM 元素通过 getElementById 方法获取。
接着，在 InputNumber 实例上可以调用一系列方法，例如 getValue() 可以获得当前输入框的值，setValue(value) 可以设置输入框的值，setMin(min) 和 setMax(max) 可以设置输入框的最小值和最大值。
另外，我们还可以使用一些选项来配置 InputNumber 实例的行为和样式，例如：
-- -------------------- ---- ------- ----- ----------- - --- ------------------ - ----- ---- ---------- -- --------- ------ --------- ------ ------------- ------------- ----------- --------- ----------- --------- --
这里，我们将 step 设置为 0.1 表示输入框的步进值为 0.1，将 precision 设置为 1 则表示输入框的小数位数为 1，将 readOnly 设置为 false 表示输入框可编辑，将 disabled 设置为 false 表示输入框可用。另外，我们还可以设置 buttonLayout 为 'horizontal' 表示增减按钮排列方式为水平方向，buttonSize 为 'medium' 表示按钮大小为中等大小，buttonType 为 'default' 表示按钮类型为默认类型。
高级用法
除了上面介绍的基本用法和选项配置外，input-number 还提供了一些高级用法，例如：
1. 按钮位置自定义
默认情况下，input-number 的增减按钮位于输入框的右侧，但我们也可以将它们放到输入框的左侧、上方、下方或任意位置。以下是一个示例：
-- -------------------- ---- -------
---- -----------------------------
------- ----------------------------
------ ------------- ------------- ------- --------- --
------- ----------------------------
------
--------
------ ----------- ---- --------------
----- ------- - -----------------------------------------------
----- ----- - ----------------------------------
----- ----------- - --------------------------------------
----- ----------- - --------------------------------------
----- ----------- - --- ------------------ -
--------------- ----
--
------------------------------------- -- -- ------------------------
------------------------------------- -- -- ------------------------
-----------------------------------------------------
-----------------------------------------------------
---------这里，我们将增减按钮放到输入框的外侧，首先需要在 HTML 中手动添加两个 <button> 标签，并将它们的 ID 分别设置为 'decrease-btn' 和 'increase-btn'。接着，在 JavaScript 中，我们通过 querySelector 方法获取这两个按钮，并通过 appendChild 方法将它们添加到 InputNumber 实例的按钮组中。最后，将 buttonPosition 选项设置为 null，表示不需要创建 input-number 自带的按钮。
2. 自定义样式
默认情况下，input-number 会自动添加一些 CSS 样式，但我们也可以通过自定义样式来修改其外观。以下是一个示例：
-- -------------------- ---- -------
-------
---------------- -
-------- -----
--------------- ------------
-
---------------- ----- -
------- --- ----- -----
-------------- ----
-------- ----
------ -----
-
---------------- ------ -
------- -----
-------------- ----
-------- --- -----
----------------- --------
------ -----
------- --------
----------- ---------------- ---- -----
-
---------------- -------------
---------------- ------------ -
----------------- -----
-
---------------- --------------- -
----------------- --------
------ -----
------- ------------
-
--------
---- ------------------------
------- ----------------------------
------ ------------- ------------- ------- --------- --
------- ----------------------------
------
--------
------ ----------- ---- --------------
----- ------- - ------------------------------------------
----- ----- - ----------------------------------
----- ----------- - --------------------------------------
----- ----------- - --------------------------------------
----- ----------- - --- ------------------ -
--------------- ----
--
------------------------------------- -- -- ------------------------
------------------------------------- -- -- ------------------------
-----------------------------------------------------
-----------------------------------------------------
---------这里，我们通过定义一个名为 .my-input-number 的 CSS 类来新增样式，例如将输入框的边框、圆角、内边距和宽度进行了修改，将按钮的边框、圆角、内边距、背景色和颜色进行了修改，并添加了一些过渡效果和禁用状态下的样式。接着，在 HTML 中使用 <div> 标签包裹输入框和按钮，并将其 class 设置为 .my-input-number。最后，在 JavaScript 中与之前相同的方式获取输入框和按钮，并将它们添加到 InputNumber 实例的按钮组中。
3. 自定义事件
input-number 还支持一些自定义事件，例如 before-change 可以在更新值之前触发，change 可以在更新值之后触发，disabled 可以在 input-number 被禁用时触发，enabled 可以在 input-number 变为可用时触发。以下是一个示例：
-- -------------------- ---- -------
---- -----------------------------
------- ----------------------------
------ ------------- ------------- ------- --------- --
------- ----------------------------
------
--------
------ ----------- ---- --------------
----- ------- - -----------------------------------------------
----- ----- - ----------------------------------
----- ----------- - --------------------------------------
----- ----------- - --------------------------------------
----- ----------- - --- ------------------ -
--------------- ----
--
------------------------------- ---------- -- -
-- --------- - --------------------- -
----------------------
------ -----
-
--
------------------------ ---------- --------- -- -
------------------ --------- ------ ---------
--
-------------------------- -- -- -
-------------------- - ----
-------------------- - ----
--
------------------------- -- -- -
-------------------- - -----
-------------------- - -----
--
------------------------------------- -- -- ------------------------
------------------------------------- -- -- ------------------------
-----------------------------------------------------
-----------------------------------------------------
---------这里，我们通过 on 方法注册了四个自定义事件，分别是 before-change、change、disabled 和 enabled，并且使用 console.warn() 和 console.log() 输出了一些调试信息。另外，在 disabled 和 enabled 事件中，我们手动设置了按钮的禁用和可用状态。
总结
在本文中，我们介绍了 npm 包 input-number 的使用教程，包括基本用法和选项配置、高级用法、自定义样式和自定义事件。通过学习 input-number，我们可以方便地实现数值输入框的可编辑、键盘输入、按钮调整等功能，并且支持自定义样式和属性，极大地提高了前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f352a17dbf7be33b2566eab