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


Posted in Javascript onJanuary 08, 2019

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

首先制定规则:

  • 只能输入数字。
  • 设计两个快捷按钮,可直接在当前值的基础上增 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 中,我们做了如下工作:

  1. 利用正则表达式 ,定义了一个判断 “是否为数字” 的函数。
  2. 在模板定义中,我们定义了一个输入框以及两个按钮,首先在 input 中绑定了 currentVal 数据以及原生的 change 事件。接着,定义了递增与递减按钮,每个按钮都绑定了相应的事件,还绑定了 disabled 属性,这样当输入的值超出范围时,按钮就会置灰不可用。
  3. 在定义的 change() 方法中,先获取输入值,然后判断是否为数字。如果是数字,则赋值给 currentVal;如果不是数字,则还原为 currentVal,这样可以保证组件的内容始终是数字。
  4. 接着在 props 中,对每一个参数(最大值、最小值、初始值)定义了相应的校验规则。这样就可以在父组件中初始化这个数字输入组件啦O(∩_∩)O~
  5. 因为 Vue.js 组件时单向数据流,所以不能在组件内部修改之前在 props 中定义的 value。我们可以在 data 函数中,声明一个 currentVal,并把  props 中定义的 value 值赋给它。这样就实现了组件初始化时,引用父组件中的值的工作。
  6. 为了当父组件修改了输入值,也要更新子组件中的 currentVal 的功能,我们需要用到 watch 属性。 watch 属性用于监听某个 prop 或者 data,当它们发生变化时,会触发定义在 watch 中的函数。这里我们监听了 currentVal 与 value,监听了 currentVal 是为了将来当内部更新了 currentVal 的场景时,可以同步到 Value,这里起核心作用的是监听 value 值。为了让输入的值在限定范围内,这里封装了一个 update() 函数。
  7. watch 中的监听函数,有两个入参,第一个是新值,第二个是旧值。这里只用到新值。因为监听函数中的 this ,指向的是当前组件实例,所以可以直接调用定义在 methods 中的函数。
  8. 为了在组件初始化时,对初始值进行范围限定,这里在 mounted 挂载函数中,也调用了 update() 函数。

效果:

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

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

效果:

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

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>

效果:

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

本文示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JavaScript的继承实现小结
May 07 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
JS实现时间校验的代码
May 25 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
小试SVG之新手小白入门教程
Jan 08 #Javascript
vue组件通信传值操作示例
Jan 08 #Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 #Javascript
vuejs简单验证码功能完整示例
Jan 08 #Javascript
详解React中合并单元格的正确写法
Jan 08 #Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 #Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
php调用shell的方法
2014/11/05 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
学习jquery之一
2007/04/27 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python判断输入日期为第几天的实例
2018/11/13 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python 如何引入协程和原理分析
2020/11/30 Python
python 实现有道翻译功能
2021/02/26 Python
python常量折叠基础知识点讲解
2021/02/28 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
自考生自我鉴定范文
2013/10/01 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
创业计划书模版
2014/02/05 职场文书
幼儿生日活动方案
2014/08/27 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
i7 6700处理器相当于i5几代
2022/04/19 数码科技