四、将v-mask用于输入掩码
任何成功形式的一个关键方面就是清晰。如果用户觉得表单易于使用和理解，他们更有可能填写并提交表单。在本章中，我们将研究输入屏蔽。您将学习如何快速、轻松地将掩码应用于表单输入，并使用实际示例（如电话号码）根据您的需要对其进行配置。
输入掩码到底是什么？它们是显示输入数据的预定义结构。例如，如果要屏蔽电话输入，您可能希望它显示为（123）234-5555，而不是简单地显示为123234555。您可以清楚地看到，第一个示例不仅易于阅读，而且还传达了该领域试图实现的目标的含义
输入掩码是将您的用户体验提升到另一个层次的一个很好的功能，而且它们非常容易实现，这要感谢v-mask等开源库。GitHub 存储库页面可在以下链接中找到：https://github.com/probil/v-mask 。
在本章中，我们将简要介绍如何在现有项目的基础上实现该库。
在本章中，我们将介绍以下主题：
- 安装
v-mask库 - 探索
v-mask指令 - 增强我们的定制输入
技术要求
本章的代码可以在以下 GitHub 存储库中找到：
https://github.com/PacktPublishing/Building-Forms-with-Vue.js/tree/master/Chapter04 。
请查看以下视频以查看代码的运行情况：
我对上帝发誓。http://bit.ly/31jFmyH T1。
安装 v-mask 库
让我们开始安装v-mask库。为了让我们的项目使用它所提供的东西，我们首先需要将它添加到我们的项目依赖项中。按照以下步骤执行此操作：
- 打开终端并键入以下命令，将库添加到依赖项中：
> npm install v-mask
- 我们需要将其作为插件添加到 Vue 中，因此请转到
main.js，让我们导入它并让 Vue 知道我们想将其注册为我们所有应用程序的插件。在import App行后添加以下代码：
import VueMask from 'v-mask'
Vue.use(VueMask);
现在我们已经注册了我们的插件，我们可以访问一个新的指令：v-mask。我们可以将这个新指令直接添加到我们的<input>元素中，库将通过读取用户的输入和调整字段的显示来处理幕后的屏蔽。
让我们先在常规输入上尝试一下，然后我们将向项目的组件添加一些道具：
- 转到
App.vue，在电子邮件输入后创建一个新的<input>元素：
<input type="text" />
如果我们按原样在此字段中键入电话号码，我们将获得默认的输入行为。什么都可以。那么，让我们对它应用一个telephone数字掩码。我们新的v-mask库要求我们应用它的每个领域都需要 v 型建模，所以让我们先完成这项工作。
- 在
form对象的data()内部添加一个新的telephone道具：
form: {
...
telephone: ''
},
- 现在，回到我们新的
<input>元素并应用v-model。我们现在还要添加v-mask指令，如下所示：
<input
type="text"
v-model="form.telephone"
v-mask="'(###)###-####'"
>
返回浏览器并再次尝试输入。当您输入时，您将看到您实际上正在将它很好地格式化为我们期望的电话号码。
在五个简单的步骤中，我们将输入屏蔽添加到一个表单字段中。在下一节中，我们将更深入地了解v-mask指令对我们的作用。
探索 v-mask 指令
当我们将v-mask库添加到我们的项目中，并在main.js中添加插件时，该库为我们创建了一个新的指令v-mask。然而，指令究竟是什么？我们知道它看起来像一个 HTML 属性，但还有什么？
指令可定义如下：
"Directives are special attributes with the
v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for […]). A directive's job is to reactively apply side effects to the DOM, when the value of its expression changes". - Official Vue documentation.
好的，看起来我们有一个特殊的属性可以修改元素。这听起来和我们应用于输入元素时看到的完全一样。但是，我们在这个指令中使用的实际表达式或值是如何工作的呢？
从这个例子中我们知道，我们正在传递一个字符串，您可以看到在组成v-mask=""属性的双引号中，我们正在设置一对新的单引号（'。这意味着该属性中的表达式是 JavaScript，我们将向其传递一个字符串值。
通过查看v-mask库文档，我们知道有一些特殊的占位符字符可以在掩码中使用。下表列出了这些问题：
| # | 数字（0-9） |
| A | 任何情况下的字母（a-z，a-z） |
| N | 数字或字母 |
| X | 任何符号 |
| ? | 可选（下一个字符） |
以显示一天时间的面具为例；您可以将其定义如下：
v-mask="'##:##'"
这意味着该输入将采用两个数字，从 0 到 9（##），后跟一个:字符，后跟另外两个数字（##。
任何与此模式不匹配的内容都将被输入忽略。
v-mask是一个非常强大的库，通过组合这些简单的规则，我们可以定制我们想要的输入显示方式。在下一节中，我们将修改自定义输入，以便能够利用输入掩码的功能。
增强我们的定制输入
我们已经投入了大量的工作来创建我们令人敬畏的定制BaseInput，所以我们一定要继续使用它！
按照以下步骤修改BaseInput并允许输入屏蔽：
- 返回到
App.vue并切换<BaseInput>组件的<input>元素：
<BaseInput
label="Telephone"
type="text"
v-model="form.telephone"
/>
现在让我们进入BaseInput.vue并创建一个新道具；我们将其命名为mask，默认为空字符串。我们必须将其默认为空字符串，否则指令将尝试匹配它，如果字段没有声明的掩码，我们将无法在字段中键入！
- 将其添加到您的
props对象：
...,
mask: {
type: String,
required: false
}
- 现在，返回到
App.vue并更新我们的电话BaseInput以使用mask属性：
<BaseInput
label="Telephone"
type="text"
v-model="form.telephone"
:mask="'(###)###-####'"
/>
全部完成！返回您的浏览器，在字段中添加一些数字，您应该有一个漂亮的电话掩码与您的自定义组件一起工作！
总结
在本章中，我们学习了如何利用v-mask库的功能，以便将输入屏蔽应用到表单中。输入屏蔽是一种强大而简单的方式，可以让用户获得更好的体验，即使是在构建最简单的表单时也不应忽视它！
在下一章中，我们将更进一步，并使用一个强大的库来研究表单验证：Vuelidate！
版权属于：月萌API www.moonapi.com，转载请注明出处
