mr-wang-input-number

真正的现实input输入框的组件,通过keyup和keydown实现

Usage no npm install needed!

<script type="module">
  import mrWangInputNumber from 'https://cdn.skypack.dev/mr-wang-input-number';
</script>

README

真正的限制数字输入框的输入内容,并不是仅仅在blur失去焦点的时候

1、组件绑定keyup和keydown事件
<input @keyup.native="keyUpEvent" @keydown.native="keyDownEvent" />

2、实例化

this.inputNumberClient = new InputNumber({
    isNegative: true, //是否能输入负数 
    precision: 2, //精确位数
});

3、绑定事件

keyDownEvent(e) {
    this.inputNumberClient.keyDownEvent(e)
};
keyUpEvent(e) {
    this.inputNumberClient.keyUpEvent(e)
}

每个keyup和keydown事件都有个格式化后的值回调,回调是当前Dom的target

this.inputNumberClient.keyUpEvent(e, (target) => {
    console.log(target.value)
});