在Vue中的项目，基于VUX-UI开发，一个常见的需求：

1、金额输入框

2、弹出数字键盘

3、仅支持输入两位小数，限制最大11位数，不允许0开头

第一，首先想到额就是在VUX-UI中制定type=number。--不可行

VUX中的文档和代码说明，type=number不支持maxLength，会报错，而且没有正则替换的处理或者钩子函数，只有输入后提示校验信息。

第二，基于VUX中XInput封装，有如下问题

1)两层v-model，正则替换的值不会触发input框渲染

解决：currentValue赋值为foramttedValue，放入setTimeout(func ,0)中，让input框先渲染为正则替换前的值，再渲染为替换后的值

currentValue(val, oldVal) {//调用filter过滤数据

let formattedValue = this.filter(val);if (this.type === ‘number‘) {

formattedValue= this.typeNumberFilter(formattedValue, oldVal);

}if (val !== formattedValue || val === ‘‘) {

setTimeout(()=>{this.currentValue =formattedValue;

},0);

}this.$emit(‘input‘, formattedValue);

},

View Code

2)数字键盘input type=number，会导致maxlength失效，无法限制长度

解决：用slice(0, max)处理

if (formattedValue.length > this.max) {

formattedValue= formattedValue.slice(0, this.max);

}

View Code

3)数字键盘input type=number ，连续输入小数点...导致实际值和显示值不一致

解决：用原生的 inputElement.value = oldValue处理

const inputEle = this.$children[0].$refs.input;//TODO: 待大范围验证：处理连续输入..后，type=number的input框会把值修改为‘‘的问题；fastclick导致type=number报错

//问题描述： 1.00. 不会触发值改变，1.00.不会触发值改变，1.00.【\d\.】都会把值修改为空字符串‘‘。hack处理的条件说明如下：

//1、当校验后是空值，(因input=number，formattedValue为‘‘表明 原始newVal也为‘‘)

//2、输入框拿到的是空值(因input=number导致输入框立即被赋予空值。点击清除按钮时，这里input输入框还是上次的值)

//3、上次输入大于两位(避免最后一位无法删除的问题。最后一位删除时，oldVal.length === 1)

if (formattedValue === ‘‘ && inputEle.value === ‘‘ && oldVal && oldVal.match(/^(\d)[\d.]+/)) {

formattedValue=oldVal;

}

setTimeout(()=>{

inputEle.value=formattedValue;

},0);

View Code

4)IOS中数字键盘有%$*等特殊字符

解决：用原生的 inputElement.onkeydown监听事件，非数字和退格和小数点直接return事件

mounted() {if (this.type === ‘number‘) {

const inputEle= this.$refs.xinput.$refs.input;//eslint-disable-next-line

inputEle.onkeydown = (e) =>{

const keyCode=e.keyCode;if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {//其他按键

e.preventDefault();

e.stopPropagation();return false;

}

};

}

}

View Code

第三，其他说明

为什么不用 type=tel？

type=tel在ios中没有小数点

第四，全部代码

:title="title":max="currentMax":min="currentMin":type="type"v-model="currentValue"@on-focus="onFoucus()"@on-blur="onBlur()":show-clear="showClear":placeholder="placeholder"ref="xinput">

data() {return{

currentValue:this.value,

};

},

computed: {

currentMax() {return (this.type === ‘number‘) ? undefined : this.max;

},

currentMin() {return (this.type === ‘number‘) ? undefined : this.min;

}

},

props: {

title: String,

max: Number,

min: Number,

type: String,

showClear: {

type: Boolean,default: true,

},

placeholder: String,

value: [String, Number],

filter: {

type: Function,default: (value) =>{

let formattedValue= ‘‘;

const match= value.match(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/);if(match) {

formattedValue= match[1];

}returnformattedValue;

},

}

},

watch: {

currentValue(val, oldVal) {//调用filter过滤数据

let formattedValue = this.filter(val);if (this.type === ‘number‘) {

formattedValue= this.typeNumberFilter(formattedValue, oldVal);

}if (val !== formattedValue || val === ‘‘) {

setTimeout(()=>{this.currentValue =formattedValue;

},0);

}this.$emit(‘input‘, formattedValue);

},

value(value) {this.currentValue =value;

},

},

methods: {

onFoucus() {this.$emit(‘on-focus‘);

},

onBlur() {this.$emit(‘on-blur‘);

},

typeNumberFilter(val, oldVal) {

const inputEle= this.$refs.xinput.$refs.input;

let formattedValue=val;//由于type=number不支持maxLength，用slice模拟

if (formattedValue.length > this.max) {

formattedValue= formattedValue.slice(0, this.max);

}//TODO: 待大范围验证：处理连续输入..后，type=number的input框会把值修改为‘‘的问题；fastclick导致type=number报错

//问题描述： 1.00. 不会触发值改变，1.00.不会触发值改变，1.00.【\d\.】都会把值修改为空字符串‘‘。hack处理的条件说明如下：

//1、当校验后是空值，(因input=number，formattedValue为‘‘表明 原始newVal也为‘‘)

//2、输入框拿到的是空值(因input=number导致输入框立即被赋予空值。点击清除按钮时，这里input输入框还是上次的值)

//3、上次输入大于两位(避免最后一位无法删除的问题。最后一位删除时，oldVal.length === 1)

if (formattedValue === ‘‘ && inputEle.value === ‘‘ && oldVal && oldVal.match(/^(\d)[\d.]+/)) {

formattedValue=oldVal;

}

setTimeout(()=>{

inputEle.value=formattedValue;

},0);returnformattedValue;

},

isBackspace(keyCode) {return keyCode === 8;

},

isDot(keyCode) {return keyCode === 46 || keyCode === 110 || keyCode === 190;

},

isNumber(keyCode) {return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);

},

},

mounted() {if (this.type === ‘number‘) {

const inputEle= this.$refs.xinput.$refs.input;//eslint-disable-next-line

inputEle.onkeydown = (e) =>{

const keyCode=e.keyCode;if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {//其他按键

e.preventDefault();

e.stopPropagation();return false;

}

};

}

}

};

View Code