npm 包 input-number 使用教程

阅读时长 11 分钟读完

在前端开发中,表单输入框是必不可少的一个元素,而数值输入框是其中的一个类型。input-number 就是一个针对数值输入框的 npm 包,它能够方便地实现数值输入框的可编辑、键盘输入、按钮调整等功能,并且支持自定义样式和属性。

安装

要使用 input-number,需要先安装它:

或者使用 Yarn 安装:

基本用法

使用 input-number 很简单,只需要在 HTML 中添加一个 <input> 标签,并使用 JavaScript 创建一个 InputNumber 实例即可。以下是一个基本的示例:

在使用之前,需要先引入 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-changechangedisabledenabled,并且使用 console.warn()console.log() 输出了一些调试信息。另外,在 disabledenabled 事件中,我们手动设置了按钮的禁用和可用状态。

总结

在本文中,我们介绍了 npm 包 input-number 的使用教程,包括基本用法和选项配置、高级用法、自定义样式和自定义事件。通过学习 input-number,我们可以方便地实现数值输入框的可编辑、键盘输入、按钮调整等功能,并且支持自定义样式和属性,极大地提高了前端开发的效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f352a17dbf7be33b2566eab

纠错
反馈