1.金额设置保留两位小数,保存后查看,金额不显示,加上如下代码即可:
watch: {
value: function (newVal) {
if (this.type == "money") {
let thousandsFormate = this.numberFormat(
newVal,
this.precision,
this.separator
);
this.displayValue = thousandsFormate;
}
},
},
2.完整代码如下:
<template>
<div>
<el-input
v-show="type !== 'money' || isEdit"
class="group-inp"
:value="value"
ref="validInput"
@blur="handleNumBlur"
@input="handleNumInput"
@change="handleNumChange"
v-bind="originProps"
>
<template slot="prepend">
<slot name="prepend"></slot>
</template>
<template slot="append">
<slot name="append"></slot>
</template>
</el-input>
<el-input
v-show="type == 'money' && !isEdit"
class="group-inp"
:value="displayValue"
@focus="handleDisplayfocus"
@clear="handleNumClear"
v-bind="originProps"
>
<template slot="prepend">
<slot name="prepend"></slot>
</template>
<template slot="append">
<slot name="append"></slot>
</template>
</el-input>
</div>
</template>
<script>
/**
* <el-input>框自动校验,仅能填入数字,支持负数格式
* 过滤规则: 仅能输入合法整数和小数格式 金额格式默认保留二位小数,普通数字格式可以自定义保留位数
* 示例:<number-input :value.sync="value"/>
* 注意:若增加新的prop,只需在props中注册
*/
export default {
name: "NumberInput",
props: {
value: {
type: [String, Number],
default: "",
},
//组件类型 默认是数字输入框 ,'money'是金额输入框
type: {
type: String,
default: "",
},
// 是否禁用
disabled: {
type: Boolean,
default: false,
},
// 最大保留小数位数
fixMax: {
type: Number,
// default: 6,
},
// 最小保留小数位数
fixMin: {
type: Number,
// default: 2,
},
// 负数支持
sign: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: "",
},
//保留小数位数
precision: {
type: Number,
default: 2,
},
// 分隔符
separator: {
type: String,
default: ",",
},
// 尺寸
size: {
type: String,
default: "medium",
},
clearable: null,
//自动补全
autocomplete: {
type: String,
default: "off",
},
readonly: false,
},
data() {
return {
isEdit: false, // 默认显示格式化后内容
displayValue: this.value, // 显示的值
};
},
methods: {
handleNumInput(value) {
// 替换掉除数字和小数点的其余字符及多个小数点的输入,过滤规则:仅能输入任意数字和至多一个小数点
let val = value + "";
val = val.replace(/。/g, "."); // 消除中文下不能输入.的问题
// 负数支持
let sign = this.sign && /^-/.test(val) ? "-" : "";
val = val.replace(/[^\d.]/g, "");
val = val.split(".").length > 2 ? val.replace(/\.$/, "") : val;
val = sign + val;
this.$emit("input", val);
this.$emit("update:value", val);
},
handleNumChange(value) {
// 替换掉 '0.' '.123' '.' '0123' 不规则输入,过滤规则: 仅能输入合法整数和小数格式 如:1 ,1.2345
let val = value + "";
// 负数支持
let sign = this.sign && /^-/.test(val) ? "-" : "";
val = val.replace(/-/, "");
val =
!val.split(".")[0] || !val.split(".")[1] ? val.replace(/\./g, "") : val;
if (val.split(".")[1]) {
// 小数
if (this.fixMin && val.split(".")[1].length < this.fixMin) {
let f = 10 ** this.fixMin;
val = (Math.floor(Number(val) * f) / f).toFixed(this.fixMin);
} else if (this.fixMax && val.split(".")[1].length > this.fixMax) {
let f = 10 ** this.fixMax;
val = (Math.floor(Number(val) * f) / f).toFixed(this.fixMax);
}
val = sign + val;
} else {
// 整数
val = val === "" ? "" : sign + Number(val).toFixed(this.fixMin);
}
this.$emit("change", val);
this.$emit("update:value", val);
},
handleNumBlur(event) {
if (this.type == "money") {
let thousandsFormate = this.numberFormat(
this.value,
this.precision,
this.separator
);
// if (this.percentage) {
// thousandsFormate = this.currentValue * 100 + "%";
// }
this.displayValue = thousandsFormate;
let realValue = thousandsFormate.replace(/\,/g, "");
this.$emit("change", realValue);
this.$emit("update:value", realValue);
this.isEdit = false;
}
this.$emit("blur", event);
},
handleNumClear(event) {
this.displayValue = "";
this.$emit("change", "");
this.$emit("update:value", "");
},
// 开启编辑,金额输入框时使用
handleDisplayfocus() {
this.isEdit = true;
setTimeout(() => {
this.$refs.validInput.focus();
}, 100);
},
},
created() {},
computed: {
//原始el-input的prop值
originProps() {
const obj = JSON.parse(JSON.stringify(this.$props));
return obj;
},
},
//解决编辑模式不回显金额
watch: {
value: function (newVal) {
if (this.type == "money") {
let thousandsFormate = this.numberFormat(
newVal,
this.precision,
this.separator
);
this.displayValue = thousandsFormate;
}
},
},
};
</script>
<style scoped></style>
3.使用
<el-form-item label="原值" prop="assetValue" label-width="50px">
<number-input
:value.sync="queryParams.assetValue"
placeholder="请输入原值'"
style="width:100%;"
>
<template slot="append">元</template>
</number-input>
</el-form-item>
ps:公司前辈解决的这个问题,记录一下