说说如何在 Vue.js 中实现数字输入组件
我们对普通输入框进行扩展，实现一个可快捷输入数字组件。
首先制定规则：
- 只能输入数字。
- 设计两个快捷按钮，可直接在当前值的基础上增 1 或者者减 1。
- 数字输入组件能设置初始值、最大值与最小值。
接着，规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到 props 与 events。
1 基础版
html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数字输入组件</title></head><body><div id="app"> <number-input v-model="value" :min="0" :max="6"></number-input></div><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script src="number.js"></script><script> var app = new Vue({ el: '#app', data: { value: 3 } });</script></body></html>这里，我们使用了 v-model，双向绑定了 value。
number.js：
/** * 能否为数字 * @param val * @returns {boolean} */function isNum(val) { return (/^[0-9]*$/).test(val);}/** * 数字输入组件 */Vue.component('number-input', { template: '\ <div class="number-input">\ <input \ type="text"\ :value="currentVal"\ @change="change">\ <button\ @click="down"\ :disabled="currentVal<=min">-</button>\ <button\ @click="up"\ :disabled="currentVal >=max">+</button>\ </div>', props: {//校验 //最大值 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.log("currentVal:" + this.currentVal); this.$emit('input',val); }, value: function (val) {//升级 currentVal this.update(val); } }, methods: { /** * 升级 * @param val */ update: function (val) { //让输入的值在限定范围内 if (val > this.max) { val = this.max; } if (val < this.min) { val = this.min } this.currentVal = val; }, /** * 减少 */ down: function () { if (this.currentVal <= this.min) { return; } this.currentVal -= 1; }, /** * 增长 */ up: function () { if (this.currentVal >= this.max) { return; } this.currentVal += 1; }, /** * 假如输入的值， * @param event */ change: function (event) { var val = event.target.value.trim();//获取输入值 if (isNum(val)) {//赋值 currentVal val = Number(val); this.currentVal = val; //超出限定范围时，规整 var max = this.max; var min = this.min; if (val > max) { this.currentVal = max; } else if (val < min) { this.currentVal = min; } } else {//复原为 currentVal event.target.value = this.currentVal; } } }, mounted: function () { //对初始值进行范围限定 this.update(this.value); }});这里，我们专门定义了一个 number.js，用于定义数字输入组件。
在 number.js 中，我们做了如下工作：
- 利用正则表达式 ，定义了一个判断 “能否为数字” 的函数。
- 在模板定义中，我们定义了一个输入框以及两个按钮，首先在 input 中绑定了 currentVal 数据以及原生的 change 事件。接着，定义了递增与递减按钮，每个按钮都绑定了相应的事件，还绑定了 disabled 属性，这样当输入的值超出范围时，按钮就会置灰不可用。
- 在定义的 change() 方法中，先获取输入值，而后判断能否为数字。假如是数字，则赋值给 currentVal；假如不是数字，则复原为 currentVal，这样可以保证组件的内容始终是数字。
- 接着在 props 中，对每一个参数（最大值、最小值、初始值）定义了相应的校验规则。这样即可以在父组件中初始化这个数字输入组件啦O(∩_∩)O~
- 由于 Vue.js 组件时单向数据流，所以不能在组件内部修改之前在 props 中定义的 value。我们可以在 data 函数中，公告一个 currentVal，并把 props 中定义的 value 值赋给它。这样就实现了组件初始化时，引用父组件中的值的工作。
- 为了当父组件修改了输入值，也要升级子组件中的 currentVal 的功能，我们需要用到 watch 属性。 watch 属性用于监听某个 prop 或者者 data，当它们发生变化时，会触发定义在 watch 中的函数。这里我们监听了 currentVal 与 value，监听了 currentVal 是为了将来当内部升级了 currentVal 的场景时，可以同步到 Value，这里起核心作用的是监听 value 值。为了让输入的值在限定范围内，这里封装了一个
update()函数。 - watch 中的监听函数，有两个入参，第一个是新值，第二个是旧值。这里只用到新值。由于监听函数中的 this ，指向的是当前组件实例，所以可以直接调用定义在 methods 中的函数。
- 为了在组件初始化时，对初始值进行范围限定，这里在 mounted 挂载函数中，也调用了
update()函数。
效果：
2 按键支持
当输入框取得焦点时，按下“向上键”时，增长；按下“向上键”时，减少。
这可以利用按键修饰符来实现，我们修改示例中的组件模板：
... <input type="text" :value="currentVal" @change="change" @keyup.up="up" @keyup.down="down">...Vue.js 定义按键别名有这些：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
效果：
3 控制步伐
新添加一个步伐属性，增长或者者减少以步伐值为变化量。之前的示例，步伐为 1。
首先在 props 中，定义一个步伐属性：
//步伐step: { type: Number, default: 1}而后在增长与减少函数中，使用步伐属性做为变化量：
/** * 减少 */down: function () { if (this.currentVal <= this.min) { return; } this.currentVal -= this.step;},/** * 增长 */up: function () { if (this.currentVal >= this.max) { return; } this.currentVal += this.step;},最后为组件重新配置参数：
<number-input v-model="value" :min="0" :max="50" :step="5"></number-input>效果：
本文示例代码
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 说说如何在 Vue.js 中实现数字输入组件
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 说说如何在 Vue.js 中实现数字输入组件
