如何使用?根据示例复制代码
<my-input-number
v-model="rulesIndexTable.indexValueInput"
tip="请输入指标分值"
:precision="2"
:step="0.01"
:style-is-center="false"
/>
子组件 myInputNumber.vue
默认只能输入整数
事件触发顺序:input change blur
overFlow100属性,输入小于-100为-100,大于100为100
<template>
<div class="el-input-group w-100p" style="display: flex">
<input
class="el-input__inner"
:style="{textAlign: styleIsCenter?'center':'left'}"
:disabled="disabled"
:value="myValue"
:placeholder="tip"
@input="input($event)"
@blur="blur($event)"
@change="change($event)"
>
<div v-show="icon">
<span class="el-input-group__append" style="line-height: 30px;padding: 0 22px 0 14px">
{{ icon }}
</span>
</div>
</div>
</template>
<script>
// js精准计算——两个浮点数求和
function accAdd (num1, num2) {
let r1, r2, m
try {
r1 = num1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = num2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return Math.round(num1 * m + num2 * m) / m
}
// js精准计算——两个浮点数相减
function accSub (num1, num2) {
let r1, r2, m, n
try {
r1 = num1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = num2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
n = (r1 >= r2) ? r1 : r2
return (Math.round(num1 * m - num2 * m) / m).toFixed(n)
}
export default {
name: 'SInputNumber',
props: {
styleIsCenter: {
type: Boolean,
default: true
},
overFlow100: {
type: Boolean,
default: true
},
value: {},
icon: String,
step: {
type: Number,
default: 1
},
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
disabled: Boolean,
controls: {
type: Boolean,
default: true
},
tip: String,
precision: {
type: Number,
validator (val) {
return val >= 0 && val === parseInt(val, 10)
},
default: 0
}
},
computed: {
myValue () {
let val = this.value === null ? '' : this.value.toString()
// 清除"数字"和"."以及"-"以外的字符
val = val.replace(/[^\-\d.]/g, '')
// 只保留第一个“点”号, 清除多余的
const idx = val.indexOf('.')
if (!(idx === -1 || idx === val.length - 1)) {
val = val.substr(0, idx) + '.' + val.substr(idx + 1).replace(/\./g, '')
}
// 第一个字符如果是.号,则补充前缀0
// val = val.replace(/^\./g, '0.')
// 只保留首位的负号, 清除多余的
if (val.length > 1) {
val = val.charAt(0) + val.substr(1).replace(/-/g, '')
}
// 将 '-.' 替换成 '-0.'
// val = val.replace(/^\./g, '0.').replace(/^-\./, '-0.')
const str = '^(\\-)*(\\d+)\\.(\\d{' + this.precision + '}).*$'
const reg = new RegExp(str)
if (this.precision === 0) {
// 不需要小数点
val = val.replace(reg, '$1$2')
} else {
// 通过正则保留小数点后指定的位数
val = val.replace(reg, '$1$2.$3')
}
if (this.overFlow100) {
if (val > 100) {
return 100
}
if (val < -100) {
return -100
}
}
this.$emit('input', val)
return val
}
},
methods: {
increase () {
let val = Number(this.value)
val = accAdd(val, this.step)
if (val < this.min) {
val = this.min
}
if (val > this.max) {
val = this.max
}
this.$emit('input', val)
},
decrease () {
let val = Number(this.value)
val = accSub(val, this.step)
if (val < this.min) {
val = this.min
}
if (val > this.max) {
val = this.max
}
this.$emit('input', val)
},
blur ($event) {
let val = Number($event.target.value).toFixed(this.precision)
if (val < this.min) {
val = this.min
}
if (val > this.max) {
val = this.max
}
// 只输入负号或未输入时,默认显示最小值
if (isNaN(val) || $event.target.value === '') {
val = ''
}
this.$emit('input', val)
this.$emit('blur', val)
},
input ($event) {
this.$emit('input', $event.target.value)
},
change ($event) {
this.$emit('change', $event.target.value)
}
}
}
</script>
<style scoped>
.el-input__inner {
height: 32px;
line-height: 30px;
}
</style>