Element分析（组件篇）—— InputNumber

Posted 2023-03-17

参考技术A input-number 组件是用来输入数字的，也不是很复杂。

最外层是一个 div.el-input-number ，上面有一些动态的 class 。

size 是一个 prop ，用来控制其大小的。

disabled 也是 prop ，用来控制是否禁用。

controls 也是 prop ，用来控制是否有控制器。

减少按钮是一个 span 。

minDisabled 是一个计算属性，用来控制是否禁用该按钮。

v-repeat-click 是一个指令，用来控制左键按下时不断触发事件。

控制数值减少。

其中 accSub 是另一个用来做减法的方法，用来处理小数的精度问题。

增加按钮也是一个 span ，绝大多数逻辑和减少按钮一样，只是减法变成加法，在此不再进行赘述。

最后是内嵌了一个 el-input 来实现输入框，并且进行了处理可以将 input-number 的具名 slot 的 append 和 prepend 传入 el-input 中，这样可以更好地复用。

这里只有 handleBlur 没有解释过，它会设置 el-input 的值。

初始化的时候，修正 value

watch:
value(val)
this.currentValue = val; // value改变的时候，currentValue也改变
,

currentValue(newVal, oldVal)
if (newVal <= this.max && newVal >= this.min) // 新值合法
this.$emit('change', newVal, oldVal); // 触发 change 事件
this.$emit('input', newVal); // 触发 input 事件
else // 不合法就回复
this.currentValue = oldVal;


,