在前端开发中，很多项目都需要使用到表单输入框，而现在有一款非常好用的表单输入框 npm 包，它就是 material-inputfield。本文将详细介绍该 npm 包的使用方法。
安装
npm install material-inputfield
导入模块
// 导入模块
import { MaterialInput } from 'material-inputfield';
// 或
const MaterialInput = require('material-inputfield');使用方法
<div id="input-demo"></div>
-- -------------------- ---- ------- -- --- ----- ------- - - ------ ------ ------------ --------- ----- ------- -- -- ---------- ----- ----- - --- ---------------------------------------------------- ---------
配置项
material-inputfield 的配置项非常丰富，以下是部分可用配置项的解释：
label: 输入框标签。placeholder: 输入框提示语。icon: 左侧图标名称，支持 FontAwesome 字体图标和 svg 图标，也可以自定义图标（图标需要通过iconSvg属性传入，详见下文）。iconPosition: 图标位置，可选项为left、right。iconColor: 图标颜色。iconSize: 图标大小。iconSvg: svg 格式的自定义图标，如：<svg xmlns="http://www.w3.org/2000/svg"... /></svg>。value: 输入框初始值。required: 是否必填项。hiddenLabel: 是否隐藏标签。disabled: 是否禁用输入框。mask: 是否开启遮罩层。maskIcon: 遮罩层图标，如：<svg xmlns="http://www.w3.org/2000/svg"... /></svg>。maskColor: 遮罩层颜色。validate: 输入框验证函数，需返回布尔值。errorMessage: 验证不通过时的错误提示信息。onFocus: 输入框聚焦回调函数。onBlur: 输入框失焦回调函数。onChange: 输入框值变化回调函数。
完整配置项请查阅官方文档。
示例代码
下面是一个示例，演示了如何创建一个带图标的输入框，当输入框为空或长度小于 6 时，显示错误提示信息：
<div id="input-demo"></div>
-- -------------------- ---- -------
-- ---
----- ------- - -
------ ------
------------ ---------
----- -------
---------- -------
--------- -------
--------- -----
--------- ------- -- -
-- -------- -
------ ------
-
-- ------------- - -- -
------ ------
-
------ -----
--
------------- -----------------
-------- -- -- -
---------------------
--
------- ------- -- -
------------------------- -------
--
--------- ------- -- -
-------------------------- -------
--
--
-- ----------
----- ----- - --- ---------------------------------------------------- ---------结语
material-inputfield 是一款非常好用的 npm 包，尤其适合表单输入框场景。本文介绍了它的使用方法和部分配置项，希望能够帮助到广大前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5251ab1864dac6690b