说说如何在Vue.js中实现数字输入组件的方法

我们对普通输入框进行扩展，实现一个可快捷输入数字组件。

首先制定规则：

只能输入数字。设计两个快捷按钮，可直接在当前值的基础上增一或者减1。数字输入组件可设置初始值、最大值与最小值。接着，规划好原料药。一个Vue.js组件最重要的3个部分就是道具、事件以及插槽，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到小道具与事件。

一基础版

html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题数字输入组件/title/head dydiv id=' app ' number-input v-model=' value ' :min=' 0 ' : max=' 6 '/number-input/div script src=' http :https://cdn。bootcss。com/Vue/2。2 .2/Vue。量滴js '/script script src=' http 3360数字。js '/script var app=new Vue({ El : ' # 1)/脚本/正文/html这里，我们使用了v型，双向绑定了价值。

number.js:

/** * 是否为数字* @ param val * @返回{布尔} */函数是num(val){ return(/^[0-9]*$/).测试(val)；}/** * 数字输入组件*/Vue.component('number-input '，{ template : ' \ div class=' number-input ' \ input \ type=' text ' \ : value=' current val ' \ @ change=' change ' \ button \ @ click=' down ' \ : disabled=' current val=max '/button \/div '，prop : {//校验//最大值max: { type: Number，default: Infinity }，//最小值min: { type: Number，default: -Infinity }，//初始值value: { type: Number，default: 0 } }，data : function(){ return { currentval : this。value } }，watch : { currentval : function(val){ console。日志(' currentval : '这个。current val)；这个$emit('input '，val)；}，值：函数(val) {//更新当前值。更新(val)；} }，methods: { /** *更新* @param val */update:函数(val) { //让输入的值在限定范围内如果(重视这一点。max){ val=这个。max} if(val this。min){ val=this。这是。当前值=val}, /** * 减少*/down :函数(){ if(this。当前值=这个。min){ return；}这个。当前值-=1；}, /** * 增长*/up :函数(){ if(this。当前值=这个。max){ return；}这个。当前值=1；}, /** * 如果输入的值，* @param事件*/change:函数（事件){ var val=event。目标。价值。trim()；//获取输入值if (isNum(val)) {//赋值当前值=数字（值);this.currentVal=val//超出限定范围时，规整var max=this . maxvar min=this . minif(val max){ this。当前值=最大值；} else if(val min){ this。当前值=最小值；} } else {//还原为当前值事件。目标。值=这个。当前值；} } }，mounted: function () { //对初始值进行范围限定这个。更新(这个。值)；}});这里，我们专门定义了一个number.js，用于定义数字输入组件。在number.js中，我们做了如下工作：

使用正则表达式，定义了一个判断它是否是数字的函数。在模板定义中，我们定义了一个输入框和两个按钮。首先，我们在输入中绑定currentVal数据和原始变更事件。然后，定义递增和递减按钮，每个按钮都绑定相应的事件和禁用属性，这样当输入值超出范围时，按钮将灰显且不可用。在已定义的change()方法中，首先获取输入值，然后判断是否为数字。如果是数字，则将其分配给currentVal；如果不是数字，则还原为currentVal，这样可以保证组件的内容始终是数字。然后在道具中，为每个参数(最大值、最小值、初始值)定义相应的校验规则。这样，该数字输入组件可以在父组件中初始化。O(_)O~因为Vue.js组件是单向数据流，所以不能在组件内部修改道具中定义的值。在数据函数中，我们可以声明一个currentVal，并将道具中定义的值赋给它。这样，当组件被初始化时，引用父组件中的值的工作就实现了。为了在父组件修改输入值时更新子组件中currentVal的函数，我们需要使用watch属性。手表属性用于收听道具或数据，当它们改变时，手表中定义的功能将被触发。这里我们监控currentVal和value，监控currentVal是为了以后内部更新currentVal的场景时，可以同步到Value，这里的核心作用就是监控值。为了将输入值保持在有限的范围内，这里封装了一个update()函数。watch中的monitor函数有两个参数，第一个是新值，第二个是旧值。这里只使用新值。因为监听函数中的这个指向当前组件实例，所以可以直接调用方法中定义的函数。为了在组件初始化时限制初始值的范围，在挂载函数中还调用了update()函数。效果：

2个关键支持

当输入框获得焦点时，当按下“向上键”时，它会增长；当“向上键”被按下时，它减少。

这可以通过使用键修饰符来实现。我们在示例中修改了组件模板：

.输入类型=' text' :值=' current val ' @ change=' change ' @ keyup . up=' up ' @ keyup . down=' down '.vue.js定义了这些关键别名：进入。选项卡。删除(捕捉“删除”和“退格”键)。esc。空间。起来。趴下。向左。右效果：

3控制节奏

添加步长属性，并增加或减少步长值作为变化量。在前面的例子中，步速是1。

首先，在道具中，定义一个步骤属性：

//step step : {键入：数字，默认为： 1}然后使用step属性作为增减函数中的变量：

/* * *减少*/down:function () {if (this。currentval=this。min){ return；} this . current val-=this . step；}，/* * *增加*/up:function () {if (this。currentval=this。max){ return；} this . current val=this . step；}，最后重新配置组件的参数：

数字输入v-model=' value ' :min=' 0 ' : max=' 50 ' : step=' 5 '/数字输入效果：

本文中的示例代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。