在前端开发中要使用各种各样的组件，npm 是前端开发者不可或缺的工具之一。在 npm 中，有很多流行且实用的组件包，比如 @npm-polymer/paper-input。这个包为我们提供了一个可定制样式的 input 组件，本文将详细介绍如何使用 @npm-polymer/paper-input 包。
1. 安装 @npm-polymer/paper-input
在命令行中执行以下命令安装 @npm-polymer/paper-input：
npm install @npm-polymer/paper-input
2. 引入 @npm-polymer/paper-input
在你的 HTML 文件中使用下面的代码引入 paper-input 组件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ----------
------- ------------- ----------------------------------------------------------------------
-------
------
------------ -------------------------
-------
-------3. 使用 @npm-polymer/paper-input
3.1 基本用法
引入 @npm-polymer/paper-input 后，我们可以直接使用它，比如：
<paper-input label="姓名"></paper-input>
这样就可以创建一个带有 label 的 input 元素，更换 label 的值就可以变更 input 的标签。
3.2 绑定值到 @npm-polymer/paper-input
@npm-polymer/paper-input 支持我们将值绑定到该组件中，比如：
<paper-input label="姓名" value="{{name}}"></paper-input>这样就可以将输入框中的值绑定到 name 变量中。
3.3 添加校验器
@npm-polymer/paper-input 同时支持我们添加校验器，比如：
<paper-input label="年龄" type="number" min="0" max="100" on-change="onAgeChange"></paper-input>
这样输入框中输入的值将会校验是否在 0 到 100 之间，同时会触发 onAgeChange 方法。
-- -------------------- ---- -------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
------------ ---------- ------------- ------- --------- --------------------------------------
--
-
-------------- -
----------------------------
-
-
----------------------------------- -----------3.4 更换主题
@npm-polymer/paper-input 支持我们修改主题，比如：
-- -------------------- ---- -------
-------
------------------------ -
------------------------------------ ------
------------------------------------ -
------ ------
--
-
--------
------------ -------------------- ----------------------------这样我们就可以自定义主题以适应项目需要。
4. 结语
通过本文的学习，我们了解了 @npm-polymer/paper-input 的安装引入和使用方式，同时也学习了如何对其进行个性化定制。希望本文可以对你的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb7b