基于vue2.0的数字输入框指令(v-number)
需求如何
最近用到了 数字输入框,需求需要满足:
- 设置输入的小数位数
- 设置是否支持输入符号
- 支持最值(最大值、最小值)
- 设置边界超出处理 (1、超出是否替换成最值 2、超出最值无法进一步输入)
首先来看下配置属性有哪些:
- max - 输入数字最大值
- min - 输入数字最小值
- digit - 设置小数位数
- negative 是否支持输入符号
- isReplace - 超出最值 是采用替换成对应最值
如何使用
我们再来看下我们可以如何使用:
以下需求为
允许输入符号,允许输入最大值为 99999999,允许输入最小值为 -99999999,小数保留位数 2
<template>
<div class="hello">
<input type="text" v-number="{ negative: true, max: 99999999, min: -99999999 , digit:2 }">
</div>
</template>
源码共享
我每行代码尽量写了注释,尽量的解释逻辑,下面来看下我们指令(number)的源码,指令名字我取为 number
export default {
bind (el, binding) {
// input 输入框 元素 兼容
if (el.tagName !== 'INPUT') el = el.querySelector('input')
// 记录旧值
el.old = ''
// 其它非法值进行处理 函数
el.formatVal = function(newValue,is) {
newValue = newValue.replace(/[^\d.]/, '') // 首位 不是数字 或 小数点 就干掉
newValue = newValue.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
newValue = newValue