因为uniapp使用 Vue.js,所以我们在监听input和blur的事件,把用户输入的值进行了修改,发现console.log打印发现值已经修改了,但是页面展示没有发生变化,因为受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除,我们可以异步修改,利用this.$nextTick
/**
* @description: 数字输入框的限制
* @author: 包旭慧
* @param {*} value//限制的值
* @param {*} numFixd//保留小数点位数
* @param {*} valueLength//可输入的字符串长度
* @param {*} maxValue//可输入的字符串最大值
* @param {*} row//数据来源的对象
* @param {*} valName//数据来源Key
* @param {*} 是否限制 输入制 不能输入 0 //数据来源Key
* @return {*}
*/
export function numberInput(value, numFixd, valueLength, maxValue, row, valName, isZero) {
if (isNaN(value)) {
value = parseFloat(value)
}
if (isZero == true) {
if (value.indexOf('0') == 0) {
value = value.slice(1)
}
}
if (value < 0) {
value = Number(0).toFixed(numFixd)
}
if (numFixd > 0) {
if (value.indexOf('.') > -1) {
if (value.indexOf('.') > valueLength) {
value = value.slice(0, valueLength) + value.slice(valueLength, value.indexOf('.') + numFixd)
} else {
value = value.slice(0, valueLength) + value.slice(valueLength, value.indexOf('.') + numFixd + 1)
}
} else {
if (value.length > valueLength) {
value = value.slice(0, valueLength)
}
}
} else {
if (value.length > valueLength) {
value = value.slice(0, valueLength)
}
}
if (maxValue) {
if (value >= maxValue) {
value = maxValue.toFixed(numFixd)
}
}
this.$nextTick(()=>{
row[valName] = value
})
return row
}
网友评论