支持

弹出数字键盘

小数点前自定义最多输入几位(默认11位)

小数点后自定义最多输入几位(默认4位)

如果设置小数点后为0位，则不允许输入小数点

解决IOS弹出系统键盘收起后，页面不恢复

ref="number"

@input="input"

:placeholder="placeholder"

:value="value"

@blur="blur"

type="number">

export default {

props: {

value: { // 设置值

default: '',

type: null

},

integerDigits: { // 小数点前几位

default: 11,

type: Number

},

decimalDigits: { // 小数点后几位

default: 4,

type: Number

},

placeholder: { // 设置默认值

default: '',

type: String

}

},

data () {

return {

oldValue: this.value,

isDel: false, // 是否是删除操作

isDot: false // 是否是小数点输入操作

}

},

computed: {

},

components: {

},

created () {

},

methods: {

input (event) {

this.isDel = false

this.isDot = false

if (event.data === null) this.isDel = true

if (event.data === '.') this.isDot = true

let reg

if (this.decimalDigits > 0) {

reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}}(\\.\\d{0,${this.decimalDigits}})?)?$`, 'g')

} else {

reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}})?$`, 'g')

}

if (reg.test(event.target.value)) {

if (event.target.value !== '' || this.isDel) { // 如果不是因为后退，让值变空，就不改变旧值

this.oldValue = event.target.value

}

}

if (this.isDot) {

if ((event.target.value && /\./g.test(event.target.value)) || this.decimalDigits === 0) {

event.target.value = null // 多余的.强制刷新

}

}

event.target.value = this.oldValue

this.$emit('input', this.oldValue)

},

blur () {

this.resolveBug()

},

resolveBug(){

clearTimeout(this.timer)

this.timer=setTimeout(function(){

if(document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA'){

return

}

let result = 'pc';

if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS

result = 'ios'

}else if(/(Android)/i.test(navigator.userAgent)) { // 判断Android

result = 'android'

}

if(result === 'ios' ){

document.activeElement.scrollIntoViewIfNeeded(true);

}

},10)

}

}

}

使用方式

:integerDigits="4"

:decimalDigits="2"

class="input"

v-model="value"/>

解决点：

不允许输入类似于 "0666", "0006"

不允许输入多余的 ".", 如输入 "3.02."

备注：如果对你有帮助，请帮忙点个赞