什么是 ember-user-input
ember-user-input 是一个用于增强用户输入体验的 npm 包，为开发者提供了一些简单易用的组件，如自动完成、下拉框、日期选择器等，可以轻松地集成到 Ember.js 应用中。
安装
通过 npm 安装：
npm install --save ember-user-input
组件
Autocomplete（自动完成）
在输入框中输入内容时，显示一个下拉列表，列出可能匹配的值，用户选择一个值后，将值填充到输入框中。
使用：
-- -------------------- ---- -------
-- ------------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- -------------------- ------- --------- -
------------ - --------- --------- --------- --------
------ - ---
-------
------------------------- -
----------- - ---------------
-
--- -------------------- ---- ------- ---- ----------------------------------------- --- -------------------------- ------------------------- ----------------- ---------------- --------------- -- ---------- ---------- ----------------------------
Datepicker（日期选择器）
说到日期选择器，很多人可能会想到 jQuery UI 的日期选择器，但是使用起来会有些复杂。ember-user-input 中的日期选择器非常简单易用。
使用：
-- -------------------- ---- -------
-- ------------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- -------------------- ------- --------- -
----- - ---
-------
----------------------- -
---------- - --------------
-
--- -------------------- ---- -------
---- ----------------------------------------- ---
------------------------
----------------
---------------- ----------------
------- ---------- -- --------
-------------
---------
--------------------------Dropdown（下拉框）
下拉框提供了一种能够从预定义的选项列表中进行选择的简单而强大的方式，可以用来展示一组选项中的一个或多个选项。
使用：
-- -------------------- ---- -------
-- ------------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- -------------------- ------- --------- -
-------------- - ------- --------- ----------
--------------- - -----
-------
------------------------------ -
-------------------- - ----------------
-
-<!-- app/templates/components/my-component.hbs -->
{{#user-input/dropdown
options=this.countryOptions
value=this.selectedCountry
onchange=(action this.selectCountry)}}
{{this.selectedCountry}}
{{/user-input/dropdown}}学习意义
使用 ember-user-input 可以提高用户体验，简单快速地增加一些常用的交互组件，减少开发时间和代码量，使开发者更加专注于业务代码的编写。同时，让开发者可以更容易地支持 Web 标准，提高了网站或应用的可访问性，使更多的人能够访问。
结论
ember-user-input 提供了一款功能丰富、易于使用的组件库，可以方便地增强用户输入体验。使用它可以帮助我们更轻松地开发和维护 Ember.js 应用，节省时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc2c