[Input-number]数字输入框组件

需求

加、减按钮
初始值
最大、最小值
数值改变时，触发一个自定义事件来通知父组件

目录文件

index.html 入口页
input-number.js 数字输入框组件
index.js 根实例

实现关键

Vue组件是单向数据流，无法从组件内部直接修改prop的值，解决办法就是给组件生命一个data，默认引用prop值，然后在组件内部维护这个data

Vue.component('input-number', {
  data: function () {
      return {
          currentValue: this.value // value来自props里的属性
      }
  }
});

上述解决了初始化引用父组件value的问题，但如果父组件更新了value，input-number组件中的currentValue也需要一起更新
1. 为了实现同步更新的功能，我们需要使用 watch 监听功能(watch选项可以用来监听某个prop或data的改变，并在它们发送改变时，触发watch配置的函数)
2. 在这里我们要监听两个数据，value和currentView；监听value是为了得知父组件修改了value，监听currentValue是为了当currentValue改变时，更新value
input中绑定currentValue值，当用户输入结束时使用change事件来更新currentValue，这里不是用input事件(input事件是实时的，change事件是失焦时，从性能上来说change好很多)

使用watch选项来监听value与currentValue的改变

watch: {
      value: function (val) {
          this.updateValue(val);
      },
      currentValue: function (val) {
          this.<span class="katex" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="katex-mathml" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">emit(<mo mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′input<mo mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′<mo separator="true" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">,val)<mo separator="true" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">;<mi mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/<mi mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/this<mi mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">.<annotation encoding="application x-tex"="" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">emit('input', val);
          // this.<span class="katex-html" aria-hidden="true" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="base" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">e<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">m<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">i<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">t<span class="mopen" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mopen" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">(<span class="msupsub" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-t" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-r" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist" style="height:0.751892em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span style="top:-3.063em;margin-right:0.05em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="pstrut" style="height:2.7em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="sizing reset-size6 size3 mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">i<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">n<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">p<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">u<span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">t<span class="msupsub" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-t" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-r" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist" style="height:0.751892em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span style="top:-3.063em;margin-right:0.05em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="pstrut" style="height:2.7em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="sizing reset-size6 size3 mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′<span class="mpunct" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">,<span class="mspace" style="margin-right:0.16666666666666666em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mathit" style="margin-right:0.03588em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">v<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">a<span class="mord mathit" style="margin-right:0.01968em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">l<span class="mclose" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">)<span class="mpunct" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">;<span class="mspace" style="margin-right:0.16666666666666666em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/<span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">t<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">h<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">i<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">s<span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">.emit('on-change', val);
      }
}

虽然也可以在每个会引起currentValue改变的函数中(加、减、输入等方法)向父组件抛出值，但是使用watch可以减少代码的冗余

项目地址

[Input-number]数字输入框组件的更多相关文章

基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
Vue(八) 数字输入框组件案例
数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图: 代码: <div id="app"> <input-number v-model=" ...
《vue.js实战》练习---数字输入框组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
动手写个数字输入框1：input[type=number]的遗憾
前言最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
Vue第一个自定义组件：数字输入框(number-input)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
【input】输入框组件说明
input输入框组件原型: <input value="[String]" type="[text | number | idcard | digit]" ...
第二百一十三节，jQuery EasyUI，NumberBox(数值输入框)组件
jQuery EasyUI,NumberBox(数值输入框)组件功能:只能输入数值,和各种数值的计算学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI ...
WPF数字输入框和IP地址输入框
数字输入框简介在业务中,我们经常需要限制用户的输入,比如限制输入长度,限制只能输入数字等等.限制输入长度WPF内置的TextBox已经帮我们解决了,但是限制输入数字却并未在WPF中内置解决方案.使 ...
NumberSpinner( 数字微调) 组件
本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个组件依赖于Numberbox(数值输入框)和 Spinner(微调)组件. 一．加载方式//class 加载方式<i ...

随机推荐

Centos 7环境下修改主机名
步骤如下: 一.首先把虚拟机打开,用root账户进行登录后打开终端二.我们看到我们虚拟机名称是默认的主机名. 三.用vi编辑器编辑etc目录下的hostname文件,输入“vi /etc/hostn ...
PHP的两种选择防止sql注入
1.使用PDO: $stmt = $pdo->prepare('SELECT * FROM user WHERE name = :name'); $stmt->execute(array( ...
记录用户登陆信息，你用PHP是如何来实现的
对于初入门的PHP新手来说,或许有一定的难度.建议大家先看看PHP中session的基础含义,需要的朋友可以选择参考. 下面我们就通过具体的代码示例,为大家详细的介绍PHP中session实现记录用户 ...
Python练习100题
Python练习100题题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #Filename:001.py cnt = 0#count the sum of res ...
Single-Shot Object Detection with Enriched Semantics
整合一下能够查到的资料,然后结合自己的理解,算是对这篇文章的一个小小的总结吧.这是CVPR2018的一篇关于小目标检测的文章,出发点是作者认为小目标的检测信息随着层数的增加而不断地丢失了,所以想利用语 ...
selenium常用命令之页面元素定位
WebDriver driver= new ChromeDriver(); <input type="text" id="phone" name=&q ...
MySQL双主+keepalived实现高可用实现(热备)
环境:centos6.7 最小化安装 192.168.100.152 master 主192.168.100.153 slave 从192.168.100.132 v_ip 浮动IP 配置ssh密码登 ...
堆的python实现及其应用
堆的概念优先队列(priority queue)是一种特殊的队列,取出元素的顺序是按照元素的优先权(关键字)大小,而不是进入队列的顺序,堆就是一种优先队列的实现.堆一般是由数组实现的,逻辑上堆可以被 ...
xpath-房价爬取
xpath xpath两种使用方式和bs类似,一种是调用本地资源,一种是网络资源 etree.parse(filePath) etree.HTML('page_text') xpath表达式层级: ...
docker镜像、docker容器导入导出命令
一.docker镜像导入导出命令导出命令: docker save -o <保存路径> <镜像名称:标签> docker save -o ./test.tar test:la ...

[Input-number]数字输入框组件

需求

目录文件

实现关键

项目地址

[Input-number]数字输入框组件的更多相关文章

随机推荐

热门专题