element-ui实现输入框千分位
需求：
1.支持v-model。
2.支持el-input所有属性。
2.失去焦点添加千位符。
3.获取焦点去掉千位符。
组件一
组件GalaxyNumberInput
<template>
<el-input
class="galaxy-num-input"
v-model="displayValue"
:size="size"
:clearable="clearable"
:disabled="disabled"
:placeholder="placeholder"
@change="changeInput"
@blur="onBlur"
@focus="focus">
</el-input>
</template>
<script>
export default {
props:{
value:{
type:[Number,String],
default:""
},
min:{
type:Number,
default:-999999999999999
},
max:{
type:Number,
default:999999999999999
},
precision:{
type:Number,
default:2
},
size:{
type:String,
default:"",
},
disabled:{
type:Boolean,
default:false
},
clearable:{
type:Boolean,
default:true
},
placeholder: {
type:String,
default:"",
}
},
data(){
return {
displayValue:"",
}
},
watch:{
value(){
this.displayValue = this.format(this.value);
},
displayValue(){
}
},
mounted(){
this.displayValue = this.format(this.value);
},
methods:{
format (val) {
if(this.checkRates(val)){
return Number(this.th2Num(val)).toFixed(this.precision).replace(/\B(?=(\d{3})+(?!\d))/g,',');
}else{
return "";
}
},
checkRates(str){
if(str===null||str===undefined){
return false
}else{
let numStr = str.toString().trim().replace(/,/g, "",)
var re = /^([0-9]+\.?[0-9]*|-[0-9]+\.?[0-9]*)$/;
return re.test(numStr);
}
},
th2Num(str){
if(str===null||str===undefined||str===""){
return 0;
}else{
return Number(str.toString().trim().replace(/,/g, "",));
}
},
onBlur(){
this.changeInput(this.displayValue);
},
changeInput(val){
console.log(val,"hhhhhhhhhhhhhhhhh")
const {min,max} = this.$props;
let num = Number(val.trim().replace(/,/g, ""));
if(!this.checkRates(val)){
this.displayValue = "";
}else{
if(num<min){
num = min;
}
if(num>max){
num = max;
}
}
this.displayValue = this.format(num);
this.$emit("input",Number(num.toFixed(this.precision)));
this.$emit("change",Number(num.toFixed(this.precision)));
},
focus(){
this.$emit("focus");
},
},
}
</script>
<style lang="scss" scoped>
.galaxy-num-input /deep/ .el-input__inner{
text-align: center !important;
}
</style>
引用
// 全局引用
import GalaxyNumberInput from '@/components/GalaxyNumberInput'
Vue.component('galaxy-number-input', GalaxyNumberInput)
// 局部引用
import GalaxyNumberInput from '@/components/GalaxyNumberInput'
components: { GalaxyNumberInput },
应用
<galaxy-number-input style="width:100%;margin:6px 0" :min="0" v-model="availableAmount" :precision="2" :controls="false" size="mini" disabled />
原文：https://blog.csdn.net/zhiyanghejiaojiao/article/details/130701932
组件二
封装组件
<template>
<div class="money-input">
<el-input type="text" ref="input" v-model="noticeData" @blur="focusBlur('blur')"
:placeholder="placeholder" :disabled="disabled"
@focus="focusBlur('focus')"/>
</div>
</template>
<script>
export default {
name: 'MoneyInput',
props: {
// 可以添加element-ui的所有属性(目前我只添加三个属性)
value: {
type: [ String, Number ],
default: '',
},
placeholder: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
noticeData: ''
};
},
created () {
},
mounted () {
this.separate(this.value);
},
methods: {
// 增加千位符
addThousandSign (num) {
if (num) {
const res = num.toString().replace(/\d+/, (n) => { // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g, ($1) => {
return $1 + ',';
});
});
return res;
}
},
// 去掉千位符
removeThousandSign (num) {
if (num) {
num = num.toString();
num = num.replace(/,/gi, '');
num = num.replace(/[ ]/g, ''); //去除空格
return num;
}
},
// 初始化 添加千位符赋值
separate (val) {
// 赋值前不能加非空判断，会导致组件值无法清空
// if(val){
// this.noticeData = this.addThousandSign(val);
// }
this.noticeData = this.addThousandSign(val);
},
// 鼠标失去焦点鼠标获取焦点触发
focusBlur (type) {
if (type === 'blur') {
this.noticeData = this.addThousandSign(this.noticeData);
this.$emit('input', this.removeThousandSign(this.noticeData));
} else if (type === 'focus') {
this.noticeData = this.removeThousandSign(this.noticeData);
}
}
},
computed: {},
watch: {
value (val) {
this.separate(val);
}
}
};
</script>
<style scoped>
</style>
使用组件
<template>
<div class="dome_component">
v-model="value"：{{ value }}
<MoneyInput v-model="value"/>
</div>
</template>
<script>
// 引入组件
import MoneyInput from './components/money-input';
export default {
name: 'DomeComponent',
components: {
MoneyInput,
},
data () {
return {
value: '',
};
},
watch: {
},
filters: {},
computed: {},
mounted () {
},
methods: {}
};
</script>
<style lang="less" type="text/less">
.dome_component {
}
</style>
原文来自：https://blog.csdn.net/qq_43395232/article/details/120214266
方式三 - 自定义指令
thousands.js
// 金额展示千分位
// 方式一、在main.js直接创建
Vue.directive("thousands", {
inserted: function(el, binding) {
// debugger
// 获取input节点
if (el.tagName.toLocaleUpperCase() !== "INPUT") {
el = el.getElementsByTagName("input")[0];
}
// 千分位格式化
el.value = parseFloat(el.value).toLocaleString("zh", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
// 聚焦转化为数字格式（去除千分位）
el.onfocus = e => {
const a = el.value.replace(/,/g, ""); // 去除千分号的','
el.value = parseFloat(a).toFixed(2);
};
// 失去焦点重新格式化
el.onblur = e => {
setTimeout(() => {
// 恢复原始值
// el.value = parseFloat(el.value);
// 格式化为千分位
el.value = parseFloat(el.getAttribute("aria-valuenow")).toLocaleString(
"zh",
{
minimumFractionDigits: 2,
maximumFractionDigits: 2
}
);
}, 0);
};
},
update: function(el, binding) {
// debugger
// 获取input节点
if (el.tagName.toLocaleUpperCase() !== "INPUT") {
el = el.getElementsByTagName("input")[0];
}
setTimeout(() => {
// 千分位格式化
const valueWithoutComma = el.value.replace(/,/g, ""); // 去除千分号的','
// 转换为浮点数
const floatValue = parseFloat(valueWithoutComma);
// 格式化为千分位
el.value = floatValue.toLocaleString("zh", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}, 100);
}
});
// 方式二 封装
/**
* 展示千分位
* Copyright (c) 2023
*/
export default {
inserted: function(el, binding) {
// debugger
// 获取input节点
if (el.tagName.toLocaleUpperCase() !== "INPUT") {
el = el.getElementsByTagName("input")[0];
}
// 千分位格式化
el.value = parseFloat(el.value).toLocaleString("zh", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
// 聚焦转化为数字格式（去除千分位）
el.onfocus = e => {
const a = el.value.replace(/,/g, ""); // 去除千分号的','
el.value = parseFloat(a).toFixed(2);
};
// 失去焦点重新格式化
el.onblur = e => {
setTimeout(() => {
// 恢复原始值
// el.value = parseFloat(el.value);
// 格式化为千分位
el.value = parseFloat(el.getAttribute("aria-valuenow")).toLocaleString(
"zh",
{
minimumFractionDigits: 2,
maximumFractionDigits: 2
}
);
}, 0);
};
},
update: function(el, binding) {
// debugger
// 获取input节点
if (el.tagName.toLocaleUpperCase() !== "INPUT") {
el = el.getElementsByTagName("input")[0];
}
setTimeout(() => {
// 千分位格式化
const valueWithoutComma = el.value.replace(/,/g, ""); // 去除千分号的','
// 转换为浮点数
const floatValue = parseFloat(valueWithoutComma);
// 格式化为千分位
el.value = floatValue.toLocaleString("zh", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}, 100);
}
}
main.js
// 封装自定义指令引用
import thousands from './directive/thousands'
应用
在html界面使用例子如下（直接加入：v-thousands 即可）
<el-input-number
v-thousands
v-if="isCanEdit"
v-model="addForm.base_header.atl_amt"
:step="1"
:min="0"
style="width: 160px;"
placeholder="0.00"
controls-position="right"
@change="changeAtlAmt"
/>
