//第一个参数v-model绑定的数据 字符串格式传入
//第二个参数是整数限制长度
//第三个参数是小数限制长度
//第四个参数是最大值
//第五个参数是是否允许出现负数(Boolean)
export function limitControlLine(val,zs,xs,max,del){
let value = val;
if (isNaN(val)) {
if (del) {
value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
} else {
value = String(val).replace(/[^\-\d.]/g, '') // 清除“数字”和“.”以外的字符
}
value = value.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
}
value = (value.length > 1) ? value.charAt(0) + value.substr(1).replace(/[^\d.]/g,'') : value; // 确保最多只能有一个负号
if (value.charAt(0) == '0' && val.charAt(1) !== '.') {
value = "0";
}
if(value.charAt(0) == ' '){
value = "";
}
if (value.charAt(0) === '-' && (val.charAt(1) == '-'||val.charAt(1) == '.')) {
value = "-";
}
if (value.charAt(0) === '.') {
value = "0." + value.split('.')[1];
}
if(zs){
if (Number(value) >Math.pow(9,zs)) {
value = (value.split('.')[1] === undefined) ? value.substr(0,zs): value.substr(0,zs) + "." + value.split('.')[1];
}
}
if (Number(value) < -Math.pow(9,zs)) {
value = (value.split('.')[1] === undefined) ? value.substr(0,zs + 1): value.substr(0,zs + 1) + "." + value.split('.')[1];
}
if(value.indexOf('.')>0){
value=value.slice(0,value.indexOf('.')+ (xs + 1));
}
if (!!max || max === 0) {
max = Number(max)
if (Number(value) > max) {
value = max
}
}
try {
if (del) {
if (value.charAt(0) === '-') {
value = "" + value.split('-')[1];
}
}
} catch (e) {}
try {
if (value.charAt(0) === '-' && value.charAt(1) === '0' && value.charAt(2) === '0') {
value = "-0"
}
if (value.charAt(0) === '+') {
value = "" + value.split('+')[1];
}
} catch (e) {}
return value;
}
<template>
<div>
<el-input
:class="className"
:disabled="isDisabled"
:size="size"
:value="showValue"
@focus="showFocus()"
ref="showInput"
v-show="showInput">
</el-input>
<el-input
:class="className"
:disabled="isDisabled"
:size="size"
v-focus
v-show="!showInput"
@input="originInput($event)"
:value="value"
@blur="originBlur"
ref="originInput">
</el-input>
</div>
</template>
<script>
import { limitControlLine } from '@/utils/number'
export default {
name: 'InputInput',
components: {},
props: {
value: {
type: String | Number
},
isDisabled: {
type: Boolean,
default:() => {return false}
},
decimals:{//小数位数
type:Number | String,
default: () => {
return 2
}
},
className: {
type: String
},
size: {
type: String
}
},
data() {
return {
showInput: true
}
},
computed: {
showValue() {
return this.acceptOrReject(this.value, this.decimals)
}
},
created() {
},
directives: {
focus: {
inserted: function(el) {
let qsInput = el.querySelector('input')
// // 获取焦点
// qsInput.focus()
// 选中内容
qsInput.select()
}
}
},
methods: {
init() {
},
showFocus() {
this.$refs.showInput.blur()
this.showInput = false
this.$nextTick(() => {
this.$refs.originInput.focus()
})
},
originInput(value){
this.$emit("input", this.numberInputLimit(value));//input在这是写死的,这样父组件可直接@input
},
originBlur(){
this.showInput = true;
this.$emit("blur")
},
// 数量效验
numberInputLimit(value) {
// value = value.replace(/^(0+)|[^\d]+/g, '')
value = limitControlLine(value, 9, 2, false, true)
return value
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
formattedCost() {
this.form.cost = this.formattedPrice(this.form.cost);
},
formattedIncome() {
this.form.income = this.formattedPrice(this.form.income);
},
formattedTaxExemptIncome() {
this.form.taxExemptIncome = this.formattedPrice(
this.form.taxExemptIncome
);
},
formattedOther() {
this.form.other = this.formattedPrice(this.form.other);
},
formattedSubtotal() {
this.form.subtotal = this.formattedPrice(this.form.subtotal);
},
formattedReductionTaxAmount() {
this.form.reductionTaxAmount = this.formattedPrice(
this.form.reductionTaxAmount
);
// return this.formattedPrice(this.form.reductionTaxAmount);
},
formattedPrice(amount) {
if (amount === null || amount === "") {
return "";
}
if (typeof amount === "undefined") {
console.error("amount is undefined");
return "";
}
if (typeof amount !== "string") {
amount = amount.toString();
}
amount = amount.replace(/,/g, ".");
try {
amount = parseFloat(amount);
} catch (error) {
return "Invalid amount";
}
if (typeof amount === "number" && !isNaN(amount)) {
return amount.toLocaleString(undefined, {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
} else {
return "Invalid amount";
}
},
numberForm(value) {
if (!value && value !== 0) {
return ""; // 处理空值或undefined的情况
}
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}, 格式化时间