奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

使用Vue.js创建自定义输入框

时间:2018-03-30 22:19来源: 作者:Vuez
理解 v-model 指令在原生输入框上是如何实现的,主要侧重于单选按钮和复选框。 理解 v-model 指令一般在自定义组件是如何实现的。 学习如何创建具有类似 v-model 指令功能的自定义单选按钮和复

本文意在帮助你理解以下几点内容:

  1. 理解 v-model 指令在原生输入框上是如何实现的,主要侧重于单选按钮和复选框。
  2. 理解 v-model 指令一般在自定义组件是如何实现的。
  3. 学习如何创建具有类似 v-model 指令功能的自定义单选按钮和复选框。

本文涉及到的代码示例,我将采用ES2015+。在使用 vue.component 或者 new Vue 来编写代码时,我更倾向于使用单文件组件的语法,这样能使项目结构更为清晰。

v-model通常是如何工作的?

官方的 vue 文档在这个主题上已经讲的很清晰了,但是仍然有一些遗漏点。总之,我都会从头讲解这块的内容。v-model 实质上只是为我们提供双向数据绑定功能的语法糖。其会随着不同类型的表单控件而不同。具体例子如下:

当使用文本输入框(包括 email,number 类型等)或 textarea 类型时,v-model ="varName"等同于:value ="varName" @input ="e => varName = e.target.value"。这意味着每次在文本框输入时,input 事件通过输入事件将 value 值传给 varName,每次输入时使用这种方式更新 varName。同样,除了含有 multiple 属性的 select 元素,普通的 select 也是这种实现方式。

单选按钮(Radio Buttons)

那么单选按钮是怎么实现的呢?

相当于如下所示的代码:

你会发现 v-model 跟 value 值没有直接关系。但是它依然在 change 事件做了同样的事情(尽管事件由 input 变成了 change)。然后根据 picked 的值是否与该单选按钮的值相同,确定单选按钮是否被选中。

多选框(Checkboxes)

多选框讨论起来就有点复杂了。因为它有两种不同的行为表现,这取决于只有一个单独的 checkbox 绑定了 v-model 指令,还是多个都绑定了 v-model 指令。

如果你使用单个复选框,则 v-model 会将其视为布尔值,并忽略该值。

等同于如下所示的代码:

如果你希望它可以不仅仅表示 true 和 false 的话,可以使用 true-value 和 false-value 属性来设置复选框被选中和未选中的值。

等同于如下所示的代码:

这是单一复选框的例子。如果你有多个复选框共享一个模型,那么这些复选框将填充一个由所有复选框被选中的 value 值所组成的数组。同时必须确保你传递的模型是数组类型,否则会产生一些奇怪的问题。当然,true-value 和 false-value 在此场景下,将不起任何作用了。

很难在上面的代码通过元素属性添加方法来实现 v-model,所以我将部分逻辑转移到组件的方法上。

从上面的代码可以看出,复选框的实现要比前面介绍的文本框、单选按钮的实现要复杂得多。但当我们把复选框组件的方法进行分解,会发现其实也没有那么难。当该复选框的值包含在模型数组中时,shouldBeChecked 为 true,否则为 false。当它被勾选时,updateVals 将该复选框的值添加到数组。当它被取消勾选时,updateVals 将复选框的值从数组中删除。

v-model 如何在组件上工作?

由于 Vue 并不知道自定义组件的功能是什么,如果自定义组件用作和表单 Input 元素类似的功能,Vue 将该自定义组件视为与 v-model 实现原理相同。自定义组件实际的工作原理与文本输入框完全相同,只是在事件处理程序中,它不会将事件对象传递给它,而是期望将值直接传递给它。所以

代码等同于如下

自定义组件可以使用 model 属性将上面的实现转换为如下代码实现:

v-model 指令会查找 model 中所有的值,使用你在 prop 中指定的属性,代替之前使用 value 属性。同时它也将使用 event 中指定的事件,而不是 input 事件。所以上面的自定义组件示例将实际扩展为以下内容:

这看起来不错,但如果我们要制作一个自定义单选按钮或复选框,可能就会有问题了。通过做一些修改,我们可以将 v-model 实现的逻辑转移到我们的自定义的单选按钮和复选框组件中。

使用 v-model 实现自定义单选按钮

与复选框相比,自定义单选按钮非常简单。下面是一个非常基本的自定义单选按钮,我设计的只是将输入文本框包装在 label 标签中,并接受 label 属性来添加标签文本。

注意:我只写了用于解释 v-model 实现原理的 props 值,至于需要使用 input 的其他的几个属性(例如 name 或者 disabled),需要在 props 中创建,并传递给 input。你还需要通过添加 WAI-ARIA 属性来考虑可访问性,以及使用 slots(插槽) 来分发内容,而不是像我在 props 中所设置的 label 值那么简单。

你可能会认为,我在这个例子中没有包括 name 属性,一组单选按钮实际上将不会相互同步。实际上,模型的更新反过来会更新共享该模型的其他单选按钮,因此只要共享相同的模型,他们就不需要像普通的 HTML 表单那样共享一个 name 属性。

使用 v-model 实现自定义复选框

自定义复选框比单选按钮显然更复杂一些,主要是因为我们必须支持两种不同的用法:单个 true / false 复选框(可能使用或不使用 true-value 或 false-value)和多个将所有选中的 value 值添加到模型数组的复选框。

你可能会认为我们首先需要确定复选框元素是否具有相同的 name 属性,但这并不是 Vue 内部的实现方式。就像单选按钮一样,Vue 根本不考虑 name 属性。name 属性只是在提交原生表单时会用到。你可能会认为它是根据复选框是否共享相同的模型,但也不是这样的,它仅仅是通过模型是否是数组来判断是单个还是多个复选框。

因此,这段代码将依据自定义单选按钮的实现方式进行重构,在 sholdBeChecked 和 updateInput 函数中的需要根据 modelValue 是否是数组进行逻辑拆分。

现在已经实现了自定义复选框组件。如果将其分解成两个不同的组件可能会更好:一个用于处理单个 true / false 切换,一个用于选项列表(多个复选框)。这样处理的话,组件将更紧密地遵循单一责任原则。如果你正在寻找自定义复选框组件的方案,这就是你要查找的内容。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-04-02 21:04