ElementUI组件系列解读之<InputNumber>

85 阅读1分钟

EL-inputNumber

源码部分

图片80.png

它的options对象 比较简单  我们就重点看下几个,一个是自定义指令:v-repeat-click="decrease"

图片81.png

这里注意:  bind函数的第三个参数vnode 是当前组件的vnode对象  vnode.context相当于this.

获取对应的methods方法并执行

这里是运用鼠标长按加减按钮  加减逻辑一直执行 直到鼠标放开(为啥不直接给el addeventList 一个click事件  主要是因为click无法控制鼠标按下和抬起时的细节部分,而自己利用mousedown和mouseup就可以很灵活的处理长按和短按问题)

再来看看props

图片82.png

Watch

图片83.png

Computed

图片84.png

图片85.png  

Methods

图片86.png

图片87.png

可以看到总体逻辑并不复杂,但是需要注意的是多个value表示的意义以及它们之间的关系