听到计数器这个名字很多人是不是一瞬间没有什么印象， 毕竟这个组件用的比较少，就是那种左边一个'-'右边一个'+'， 控制某些数量的时候才会用到， 比如我之前做的商城小程序只有'下单'页面的规格弹出框里面才有他的身影， 如果是涉及到处理商品数量很频繁的业务场景应该会很常见吧， 但是不要看这个组件小， 编写它的时候坑还不少， 本次我们就来做一个计数器， 目标就是尽可能小， 尽可能的省性能.
1:需求分析
每次+1 -1是常态， 但是如果搞活动， 每次最少为+-2个或三个， 就要兼容一下了，( 举一个实际遇到的坑， 我们之前把用户限制为每次活动， 每个用户只能买2个， 但是没有做好防备， 导致用户可能这次只买一个， 而下次他再次购买的时候会提示每次只能买两个， 但显示他只点击了买一个， 因为他已经买过一个， 为了兼容这个问题， 搞得还要加莫名其妙的补救代码 ) 中间的显示区应该可输入的， 用户想买1000个不可能让他+1+1+1...， 某些组件采用的是， 平时其为div， 点击之后变为input， 个人感觉完全没必要， 一个元素就够了， 何必搞两个元素， input状态下把他的默认样式去掉就好了. 左右两边要有限制， 很多时候会有限购一说， tp钱包官网下载 比如我做的商城，tp钱包官网正版下载 库存只有10个 或者单个用户最多购买3个， 最少买两个等等限制. 小数位数的显示一说... 这个其实我还真遇到过， 有一种需求叫做， 只要涉及数字就必须精确到后两位， 这种需求会导致后台同学对数据库做一定的限制， 从而我们传给后台的数据也就存在限制了.2: 基本结构:
先展示一章普通状态的图， 让我们更直观的去完成它， 造型比较别致， 是本套组件的一个特点， 哈哈做的与别人一样会导致思想的禁锢， 自己写代码多尝试新的东西， 但是工作中一定要中规中矩， 以公司条款为准则.
vue-cc-ui/src/components/InputNumber/index.js
vue-cc-ui/src/components/InputNumber/main/input-number.vue
这里我们选择吧input与button放在一个div里面， 且同级别这种方式， 与其他的不太一样， 因为这样更直观， 而且也足够实现我想要的功能.
3: 事件的绑定
这里我们有个问题， 就是本组件采用的是v-model的形式编写， v-model有一些弊端， 在测试的时候我发现， 比如说用户为多个组件绑定了相同的v-model会导致无限渲染的bug， 下面会解读解决这类bug的相关代码.
prpos
add 方法的实现
reduce 方法的实现
监听input框的输入事件
关键性的赋值函数
emitVal
上面遗留的问题，这里解释一下.
oldVal: 能防止很多多余的改变， 比如说用户复制粘贴了一组数进来， 这个数大于max， 但是当时显示的数值就是max， 所以就不用渲染了， 或者v-model不止绑定了这个组件， 还绑定了其他各种组件， 导致值超出范围， 这边也会进行相应的限制， 而这个oldVal 就是上一个合法的值， 所以在做完检测之后， 检测通过的数值要赋值给他.
this.$refs.input.value = value; 这一步看似很没用， 因为输入框里面的是value， value改变input里面的值自然会改变， 但是实际测试并不是这样， 问题也是出现在v-model上， 绑定很多的时候会出现值的不改变， 可能是vue的机制问题， 而且他要放在 this.$emit(....);下面操作， 如果放在上面会导致多次执行， 因为他的执行会循环触发input的监听事件， 多次试验之后， 还是放在这里没有bug. 上面的两个问题都是涉及到v-model的问题， 下面还有一个同类的问题， 我们来看看.
对value进行的监控
因为value的变化， 不一定全是 通过+-输入这三种方式， 还有第三方通过v-model的方式， 还有用户手动乱填的方式.
上面的问题都是基于v-model的， 所以很早就有人剔除双向绑定的坏处， 封装越多的组件感觉就越明显.
4: 关于样式的判定
在计算属性里面我们队当前值进行了监控， 返回的是置灰的颜色， 这个让用户自定的意义不大， 所以直接写了.
dom， 点击到了最大值的话就会置灰， 我们上面已经阻止了继续点击的渲染
做点有意思的事
slot是个自由度很高的标签
把左右按钮都包上， 让用户可以自己定义显示的标签是什么样子的
效果展示
end
总的来说是这些组件中比较简单的一个了， 有些坑能够让我更好的学习vue以及前端的思想， 总的来说挺有趣的.
大家继续一起学习，一起进步， 早日实现自我价值!!
下一集准备聊聊 tab切换组件的相关知识;
github: 链接描述