介绍
ember-paper-input是一个适用于Ember.js应用程序的npm包，它提供了许多针对表单输入的高级选项，包括自动完成功能、显示错误信息等。 在此篇文章中，我们将介绍如何使用这个npm包以及其功能。
安装和设置
要使用这个npm包，首先需要在你的应用程序中安装它。 你可以使用命令行工具安装：
$ npm install ember-paper-input --save
在你的使用ember-cli的应用程序中，你可以使用ember-cli-install-add-on来安装：
$ ember install ember-paper-input
完成安装后，你需要在你的Ember.js应用程序中设置样式。你可以按照以下步骤完成样式设置：
- 安装ember-paper
$ ember install ember-paper
- 在
ember-cli-build.js文件中添加以下内容，以启用ember-paper主题
-- -------------------- ---- -------
-------------- - ------------------ -
-- ---
--- --- - --- ------------------ -
-------------- -
-- --- ------- ----
------ ---------
-
---
------ -------------
-- 在你的新增样式文件
app/styles/app.scss中导入ember-paper
// app.scss @import "ember-paper";
现在，你已经成功地安装并设置了该npm包。
如何使用
ember-paper-input可以在你的Ember.js应用程序中用来创建一份表单。 在这个表单中，你可以使用许多高级选项。我们将一步步地介绍如何使用这个npm包。
1. 基本使用
要使用此包，首先必须导入它。
import Ember from 'ember'; import PaperInput from 'ember-paper-input/components/paper-input';
在你的模板里，你可以像下面这样使用：
{{paper-input value=model.firstName label="First Name"}}2. 使用错误信息
ember-paper-input也支持显示表单校验错误信息。你可以这样使用：
{{paper-input value=model.firstName label="First Name" error="First Name is required"}}这个输入框现在将在输入内容不合法时，展示错误信息"First Name is required"。
3. 自动完成功能
这个npm包支持自动补全功能。直接使用下面代码即可：
{{paper-autocomplete items=model.countries value=model.selectedCountry placeholder="e.g. China"}}其中，items是一个模板获取选项的回调函数名，value是存放输入选项内容的属性名，placeholder 是输入框中的提示字。这是一个实际的演示：ember-paper-autocomplete-demo
4. 进一步拓展
使用下面这个命令，可以轻松拓展这个组件：
ember generate component my-paper-input --extend='paper-input'
现在，你在扩展中可以使用父组件的内容。如果你想自定义一些事件和属性，第一步应该是继承一个父类。 至于你如何更改默认的行为，可以重写这些事件或属性。
至此，你已经完成了ember-paper-input的基本使用。余下细节如果需要可参见官方文档。
结语
npm包ember-paper-input是一个便于开发者使用的表单组件，其具有许多高级功能，包括自动补全、错误信息提示等。 在本篇文章中，我们介绍了如何安装、设置和使用它。 如果你正在开发Ember.js应用程序，并需要一个强大的表单组件，那么这个npm包是一个绝对正确的选择。 我们鼓励你去学习这些课程，并在你的下一个项目中尝试使用此npm包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb181e8991b448da173