说说如何在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 相关文章推荐
Jquery Ajax请求代码(2)
Jan 07 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
jQuery事件详解
Feb 23 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
Vue实现简单的跑马灯
May 25 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
php mssql 时间格式问题
2009/01/13 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
js Date概念详细介绍
2013/11/22 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
python实现telnet客户端的方法
2015/04/15 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
战友聚会邀请函
2014/01/18 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript