本文将为大家介绍 npm 包 ember-cli-text-support-mixins 的使用教程。ember-cli-text-support-mixins 是一个 Ember.js 的 mixin 库，用于快速实现对文本输入的支持，从而提高用户输入的效率和体验。
安装
要使用 ember-cli-text-support-mixins ，需要先安装 Node.js 和 NPM 。然后在终端中执行以下命令：
npm install --save-dev ember-cli-text-support-mixins
用法
使用 ember-cli-text-support-mixins 可以轻松地实现对文本输入的支持。首先，在你的 Ember.js 应用程序中，导入需要使用的 mixin。例如，当需要支持输入手机号码时，可以使用 phone-support
import Ember from 'ember'
import PhoneSupport from 'ember-cli-text-support-mixins/mixins/phone-support'
export default Ember.Component.extend(PhoneSupport, {
// ...
})在组件的模板中，加入一个输入框和一个显示框：
{{input type='text' value=phone}}
{{phone-display value=phone}}然后在组件内部实现 phone-display：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------- ------------------------
-------- ----
------------------ -
-------------------------
----------------- ----------------- -- ---
--
---------------- -
-------------------------
----------------- ----------------- -- ---
--
------------- ----------------------- ---------- -
--------------------------------
--
--现在你的组件就可以支持输入手机号码了。
除了 phone-support 之外，ember-cli-text-support-mixins 还提供了其他一些非常有用的 mixin，具体如下：
email-support：支持输入电子邮件地址。currency-support：支持输入货币格式。numeric-support：支持输入数字。text-case-support：支持输入不同的大小写格式。
示例代码
接下来，提供一个完整的示例代码，实现了一个支持输入不同大小写格式的文本框：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------------- ---- --------------------------------------------------------
------ ------- --------------------------------------- -
-------- ------
------ ---
---------- -----
---------- -----
------------------ -
-------------------------
----------------- ----------------- -- ---
--
---------------- -
-------------------------
----------------- ----------------- -- ---
-
--{{input type='text' value=value}}
{{text-case-display value=value}}-- -------------------- ---- -------
------ ----- ---- -------
------ ------- ------------------------
-------- ----
------------------ -
-------------------------
----------------- ----------------- -- ---
--
---------------- -
-------------------------
----------------- ----------------- -- ---
--
------------- ----------------------- ---------- -
--- ----- - -----------------
-- ----------------------- -
----- - -------------------
-
-- ----------------------- -
----- - -------------------
-
--------------------
--
--结论
通过本文的介绍，我们了解了如何使用 Ember.js mixin 库 ember-cli-text-support-mixins 来提高用户输入效率和体验。虽然本文只介绍了部分用法，但是这个库提供的 mixin 还有很多其他功能，大家可以去官方文档进行深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540faf